@kodaris/krubble-app-components 1.0.37 → 1.0.39
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/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/krubble-app.bundled.js +18 -974
- package/dist/krubble-app.bundled.js.map +1 -1
- package/dist/krubble-app.bundled.min.js +56 -785
- package/dist/krubble-app.bundled.min.js.map +1 -1
- package/dist/krubble-app.umd.js +17 -973
- package/dist/krubble-app.umd.js.map +1 -1
- package/dist/krubble-app.umd.min.js +52 -781
- package/dist/krubble-app.umd.min.js.map +1 -1
- package/dist/screen-nav.js +3 -3
- package/package.json +1 -5
- package/dist/shell.d.ts +0 -105
- package/dist/shell.d.ts.map +0 -1
- package/dist/shell.js +0 -961
- package/dist/shell.js.map +0 -1
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2019 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/const r=globalThis,
|
|
6
|
+
*/const r=globalThis,n=r.ShadowRoot&&(void 0===r.ShadyCSS||r.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),a=new WeakMap;let o=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(n&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=a.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&a.set(t,e))}return e}toString(){return this.cssText}};const l=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,r)=>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[r+1]),e[0]);return new o(i,e,s)},d=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,s))(t)})(e):e
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/,{is:c,defineProperty:
|
|
11
|
+
*/,{is:c,defineProperty:h,getOwnPropertyDescriptor:p,getOwnPropertyNames:v,getOwnPropertySymbols:u,getPrototypeOf:f}=Object,g=globalThis,m=g.trustedTypes,b=m?m.emptyScript:"",x=g.reactiveElementPolyfillSupport,y=(e,t)=>e,_={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},$=(e,t)=>!c(e,t),w={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;let I=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=w){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(),r=this.getPropertyDescriptor(e,i,t);void 0!==r&&h(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:n}=p(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const s=r?.call(this);n?.call(this,t),this.requestUpdate(e,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??w}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const e=f(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const e=this.properties,t=[...v(e),...u(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(d(e))}else void 0!==e&&t.push(d(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(n)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of t){const t=document.createElement("style"),n=r.litNonce;void 0!==n&&t.setAttribute("nonce",n),t.textContent=i.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(void 0!==r&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:_).toAttribute(t,i.type);this._$Em=e,null==n?this.removeAttribute(r):this.setAttribute(r,n),this._$Em=null}}_$AK(e,t){const i=this.constructor,r=i._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=i.getPropertyOptions(r),n="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:_;this._$Em=r;const s=n.fromAttribute(t,e.type);this[r]=s??this._$Ej?.get(r)??s,this._$Em=null}}requestUpdate(e,t,i,r=!1,n){if(void 0!==e){const s=this.constructor;if(!1===r&&(n=this[e]),i??=s.getPropertyOptions(e),!((i.hasChanged??$)(n,t)||i.useDefault&&i.reflect&&n===this._$Ej?.get(e)&&!this.hasAttribute(s._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:n},s){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,s??t??this[e]),!0!==n||void 0!==s)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===r&&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,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,i,r)}}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){}};I.elementStyles=[],I.shadowRootOptions={mode:"open"},I[y("elementProperties")]=new Map,I[y("finalized")]=new Map,x?.({ReactiveElement:I}),(g.reactiveElementVersions??=[]).push("2.1.2");
|
|
12
12
|
/**
|
|
13
13
|
* @license
|
|
14
14
|
* Copyright 2017 Google LLC
|
|
15
15
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
16
|
*/
|
|
17
|
-
const
|
|
17
|
+
const k=globalThis,E=k.trustedTypes,S=E?E.createPolicy("lit-html",{createHTML:e=>e}):void 0,N="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+A,D=`<${C}>`,P=document,M=()=>P.createComment(""),U=e=>null===e||"object"!=typeof e&&"function"!=typeof e,O=Array.isArray,T="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,j=/>/g,H=RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),L=/'/g,q=/"/g,X=/^(?:script|style|textarea|title)$/i,B=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),F=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),Q=new WeakMap,K=P.createTreeWalker(P,129);function Y(e,t){if(!O(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(t):t}const V=(e,t)=>{const i=e.length-1,r=[];let n,s=2===t?"<svg>":3===t?"<math>":"",a=z;for(let t=0;t<i;t++){const i=e[t];let o,l,d=-1,c=0;for(;c<i.length&&(a.lastIndex=c,l=a.exec(i),null!==l);)c=a.lastIndex,a===z?"!--"===l[1]?a=R:void 0!==l[1]?a=j:void 0!==l[2]?(X.test(l[2])&&(n=RegExp("</"+l[2],"g")),a=H):void 0!==l[3]&&(a=H):a===H?">"===l[0]?(a=n??z,d=-1):void 0===l[1]?d=-2:(d=a.lastIndex-l[2].length,o=l[1],a=void 0===l[3]?H:'"'===l[3]?q:L):a===q||a===L?a=H:a===R||a===j?a=z:(a=H,n=void 0);const h=a===H&&e[t+1].startsWith("/>")?" ":"";s+=a===z?i+D:d>=0?(r.push(o),i.slice(0,d)+N+i.slice(d)+A+h):i+A+(-2===d?t:h)}return[Y(e,s+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class G{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let n=0,s=0;const a=e.length-1,o=this.parts,[l,d]=V(e,t);if(this.el=G.createElement(l,i),K.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=K.nextNode())&&o.length<a;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(N)){const t=d[s++],i=r.getAttribute(e).split(A),a=/([.?@])?(.*)/.exec(t);o.push({type:1,index:n,name:a[2],strings:i,ctor:"."===a[1]?ie:"?"===a[1]?re:"@"===a[1]?ne:te}),r.removeAttribute(e)}else e.startsWith(A)&&(o.push({type:6,index:n}),r.removeAttribute(e));if(X.test(r.tagName)){const e=r.textContent.split(A),t=e.length-1;if(t>0){r.textContent=E?E.emptyScript:"";for(let i=0;i<t;i++)r.append(e[i],M()),K.nextNode(),o.push({type:2,index:++n});r.append(e[t],M())}}}else if(8===r.nodeType)if(r.data===C)o.push({type:2,index:n});else{let e=-1;for(;-1!==(e=r.data.indexOf(A,e+1));)o.push({type:7,index:n}),e+=A.length-1}n++}}static createElement(e,t){const i=P.createElement("template");return i.innerHTML=e,i}}function J(e,t,i=e,r){if(t===F)return t;let n=void 0!==r?i._$Co?.[r]:i._$Cl;const s=U(t)?void 0:t._$litDirective$;return n?.constructor!==s&&(n?._$AO?.(!1),void 0===s?n=void 0:(n=new s(e),n._$AT(e,i,r)),void 0!==r?(i._$Co??=[])[r]=n:i._$Cl=n),void 0!==n&&(t=J(e,n._$AS(e,t.values),n,r)),t}class Z{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,r=(e?.creationScope??P).importNode(t,!0);K.currentNode=r;let n=K.nextNode(),s=0,a=0,o=i[0];for(;void 0!==o;){if(s===o.index){let t;2===o.type?t=new ee(n,n.nextSibling,this,e):1===o.type?t=new o.ctor(n,o.name,o.strings,this,e):6===o.type&&(t=new se(n,this,e)),this._$AV.push(t),o=i[++a]}s!==o?.index&&(n=K.nextNode(),s++)}return K.currentNode=P,r}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 ee{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,r){this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=r,this._$Cv=r?.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=J(this,e,t),U(e)?e===W||null==e||""===e?(this._$AH!==W&&this._$AR(),this._$AH=W):e!==this._$AH&&e!==F&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>O(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!==W&&U(this._$AH)?this._$AA.nextSibling.data=e:this.T(P.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,r="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=G.createElement(Y(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new Z(r,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Q.get(e.strings);return void 0===t&&Q.set(e.strings,t=new G(e)),t}k(e){O(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const n of e)r===t.length?t.push(i=new ee(this.O(M()),this.O(M()),this,this.options)):i=t[r],i._$AI(n),r++;r<t.length&&(this._$AR(i&&i._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class te{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,r,n){this.type=1,this._$AH=W,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=W}_$AI(e,t=this,i,r){const n=this.strings;let s=!1;if(void 0===n)e=J(this,e,t,0),s=!U(e)||e!==this._$AH&&e!==F,s&&(this._$AH=e);else{const r=e;let a,o;for(e=n[0],a=0;a<n.length-1;a++)o=J(this,r[i+a],t,a),o===F&&(o=this._$AH[a]),s||=!U(o)||o!==this._$AH[a],o===W?e=W:e!==W&&(e+=(o??"")+n[a+1]),this._$AH[a]=o}s&&!r&&this.j(e)}j(e){e===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ie extends te{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===W?void 0:e}}class re extends te{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==W)}}class ne extends te{constructor(e,t,i,r,n){super(e,t,i,r,n),this.type=5}_$AI(e,t=this){if((e=J(this,e,t,0)??W)===F)return;const i=this._$AH,r=e===W&&i!==W||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,n=e!==W&&(i===W||r);r&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class se{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}}const ae=k.litHtmlPolyfillSupport;ae?.(G,ee),(k.litHtmlVersions??=[]).push("3.3.2");const oe=globalThis;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/let le=class extends
|
|
22
|
+
*/let le=class extends I{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 r=i?.renderBefore??t;let n=r._$litPart$;if(void 0===n){const e=i?.renderBefore??null;r._$litPart$=n=new ee(t.insertBefore(M(),e),e,void 0,i??{})}return n._$AI(e),n})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return F}};le._$litElement$=!0,le.finalized=!0,oe.litElementHydrateSupport?.({LitElement:le});const de=oe.litElementPolyfillSupport;de?.({LitElement:le}),(oe.litElementVersions??=[]).push("4.2.2");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
@@ -30,12 +30,12 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
32
32
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
33
|
-
*/,
|
|
33
|
+
*/,he={attribute:!0,type:String,converter:_,reflect:!1,hasChanged:$},pe=(e=he,t,i)=>{const{kind:r,metadata:n}=i;let s=globalThis.litPropertyMetadata.get(n);if(void 0===s&&globalThis.litPropertyMetadata.set(n,s=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),s.set(i.name,e),"accessor"===r){const{name:r}=i;return{set(i){const n=t.get.call(this);t.set.call(this,i),this.requestUpdate(r,n,e,!0,i)},init(t){return void 0!==t&&this.C(r,void 0,e,t),t}}}if("setter"===r){const{name:r}=i;return function(i){const n=this[r];t.call(this,i),this.requestUpdate(r,n,e,!0,i)}}throw Error("Unsupported decorator location: "+r)};function ve(e){return(t,i)=>"object"==typeof i?pe(e,t,i):((e,t,i)=>{const r=t.hasOwnProperty(i);return t.constructor.createProperty(i,e),r?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
-
*/}function
|
|
38
|
+
*/}function ue(e){return ve({...e,state:!0,attribute:!1})}
|
|
39
39
|
/**
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2017 Google LLC
|
|
@@ -43,743 +43,14 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
43
43
|
*/const fe=1,ge=2,me=e=>(...t)=>({_$litDirective$:e,values:t});class be{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)}}
|
|
44
44
|
/**
|
|
45
45
|
* @license
|
|
46
|
-
* Copyright
|
|
46
|
+
* Copyright 2017 Google LLC
|
|
47
47
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
48
|
-
*/const xe=me(class extends be{constructor(e){if(super(e),e.type!==fe||"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 r=!!t[e];r===this.st.has(e)||this.nt?.has(e)||(r?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return
|
|
48
|
+
*/let xe=class extends be{constructor(e){if(super(e),this.it=W,e.type!==ge)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===W||null==e)return this._t=void 0,this.it=e;if(e===F)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}};xe.directiveName="unsafeHTML",xe.resultType=1;const ye=me(xe),_e=me(class extends be{constructor(e){if(super(e),e.type!==fe||"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 r=!!t[e];r===this.st.has(e)||this.nt?.has(e)||(r?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return F}});
|
|
49
49
|
/**
|
|
50
50
|
* @license
|
|
51
|
-
* Copyright
|
|
51
|
+
* Copyright 2018 Google LLC
|
|
52
52
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
|
-
*/
|
|
54
|
-
<div class="appbar-apps">
|
|
55
|
-
${this.isAppsMenuOpen?F`
|
|
56
|
-
<div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
|
|
57
|
-
`:Y}
|
|
58
|
-
|
|
59
|
-
<button
|
|
60
|
-
class=${xe({"appbar-apps-btn":!0,"appbar-apps-btn--open":this.isAppsMenuOpen})}
|
|
61
|
-
@click=${this.toggleAppsMenu}
|
|
62
|
-
>
|
|
63
|
-
<span class="appbar-apps-btn__icon">${ye(this.appsGridIcon)}</span>
|
|
64
|
-
</button>
|
|
65
|
-
|
|
66
|
-
<div class=${xe({"appbar-apps-menu":!0,"appbar-apps-menu--open":this.isAppsMenuOpen})}>
|
|
67
|
-
<div class="appbar-apps-menu__header">
|
|
68
|
-
<h2 class="appbar-apps-menu__title">Applications</h2>
|
|
69
|
-
<button class="appbar-apps-menu__close" @click=${this.closeAppsMenu}>
|
|
70
|
-
${ye(this.closeIcon)}
|
|
71
|
-
</button>
|
|
72
|
-
</div>
|
|
73
|
-
<div class="appbar-apps-menu__content">
|
|
74
|
-
<div class="appbar-apps-menu__list">
|
|
75
|
-
${this.apps.map((e=>F`
|
|
76
|
-
<a
|
|
77
|
-
class="appbar-apps-menu__item"
|
|
78
|
-
href=${e.url}
|
|
79
|
-
@click=${t=>{this.closeAppsMenu();const i=new CustomEvent("app-click",{detail:{app:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&t.preventDefault()}}
|
|
80
|
-
>
|
|
81
|
-
${e.name}
|
|
82
|
-
</a>
|
|
83
|
-
`))}
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
`}renderUserMenu(){if(!this.user)return Y;const e=this.user.name.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2);return F`
|
|
89
|
-
<div class="appbar-user">
|
|
90
|
-
${this.isUserMenuOpen?F`
|
|
91
|
-
<div class="menu-backdrop" @click=${this.closeUserMenu}></div>
|
|
92
|
-
`:Y}
|
|
93
|
-
|
|
94
|
-
<div
|
|
95
|
-
class="appbar-user__avatar"
|
|
96
|
-
@click=${this.toggleUserMenu}
|
|
97
|
-
>
|
|
98
|
-
${this.user.avatar?F`<img src=${this.user.avatar} alt=${this.user.name} />`:e}
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div class=${xe({"appbar-user__menu":!0,"appbar-user__menu--open":this.isUserMenuOpen})}>
|
|
102
|
-
<div class="appbar-user__header">
|
|
103
|
-
<p class="appbar-user__name">${this.user.name}</p>
|
|
104
|
-
${this.user.email?F`
|
|
105
|
-
<p class="appbar-user__email">${this.user.email}</p>
|
|
106
|
-
`:Y}
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
${this.menuItems.map((e=>e.divider?F`<div class="appbar-user__menu-divider"></div>`:F`
|
|
110
|
-
<button
|
|
111
|
-
class="appbar-user__menu-item"
|
|
112
|
-
@click=${()=>this.handleMenuItemClick(e)}
|
|
113
|
-
>
|
|
114
|
-
${e.icon?F`
|
|
115
|
-
<span class="appbar-user__menu-item__icon">${ye(e.icon)}</span>
|
|
116
|
-
`:Y}
|
|
117
|
-
${e.label}
|
|
118
|
-
</button>
|
|
119
|
-
`))}
|
|
120
|
-
|
|
121
|
-
${this.menuItems.length>0?F`
|
|
122
|
-
<div class="appbar-user__menu-divider"></div>
|
|
123
|
-
`:Y}
|
|
124
|
-
|
|
125
|
-
<button
|
|
126
|
-
class="appbar-user__menu-item appbar-user__menu-item--danger"
|
|
127
|
-
@click=${this.handleLogout}
|
|
128
|
-
>
|
|
129
|
-
<span class="appbar-user__menu-item__icon">${ye(this.defaultLogoutIcon)}</span>
|
|
130
|
-
Sign Out
|
|
131
|
-
</button>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
`}render(){return F`
|
|
135
|
-
<div class=${xe({progress:!0,"progress--loading":this.pendingRequests>0})}>
|
|
136
|
-
<div class="progress__track"></div>
|
|
137
|
-
<div class="progress__bar progress__bar--primary">
|
|
138
|
-
<span class="progress__bar-inner"></span>
|
|
139
|
-
</div>
|
|
140
|
-
<div class="progress__bar progress__bar--secondary">
|
|
141
|
-
<span class="progress__bar-inner"></span>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<header class="appbar">
|
|
146
|
-
<!-- Logo -->
|
|
147
|
-
${this.logo?F`
|
|
148
|
-
<div class="appbar-logo" @click=${this.handleLogoClick}>
|
|
149
|
-
<img src=${this.logo} alt="Home" />
|
|
150
|
-
</div>
|
|
151
|
-
<div class="appbar-divider"></div>
|
|
152
|
-
`:Y}
|
|
153
|
-
|
|
154
|
-
<!-- App Switcher -->
|
|
155
|
-
${this.renderAppsMenu()}
|
|
156
|
-
|
|
157
|
-
<div class="appbar-spacer"></div>
|
|
158
|
-
|
|
159
|
-
<!-- User -->
|
|
160
|
-
${this.renderUserMenu()}
|
|
161
|
-
</header>
|
|
162
|
-
|
|
163
|
-
<!-- <div class="subbar">-->
|
|
164
|
-
<!-- <nav class="breadcrumbs">-->
|
|
165
|
-
<!-- <a href="#">Home</a>-->
|
|
166
|
-
<!-- <span class="breadcrumbs__separator">/</span>-->
|
|
167
|
-
<!-- <a href="#">Companies</a>-->
|
|
168
|
-
<!-- <span class="breadcrumbs__separator">/</span>-->
|
|
169
|
-
<!-- <span>Acme Corp</span>-->
|
|
170
|
-
<!-- </nav>-->
|
|
171
|
-
<!-- </div>-->
|
|
172
|
-
|
|
173
|
-
<main class="main">
|
|
174
|
-
<slot></slot>
|
|
175
|
-
</main>
|
|
176
|
-
|
|
177
|
-
<footer class="footer">
|
|
178
|
-
<div class="footer-content">
|
|
179
|
-
<div class="footer-info">
|
|
180
|
-
<span>© ${(new Date).getFullYear()} Kodaris. All Rights Reserved.</span>
|
|
181
|
-
</div>
|
|
182
|
-
<a class="footer-link" target="_blank" href="https://www.kodaris.com/content/privacy-policy">Privacy</a>
|
|
183
|
-
<a class="footer-link" target="_blank" href="https://www.kodaris.com/content/terms-use">Terms</a>
|
|
184
|
-
<button class="footer-chat" data-chatlio-widget-button @click=${this.handleChatClick}>
|
|
185
|
-
<span class="footer-chat__icon">
|
|
186
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon lucide-messages-square">
|
|
187
|
-
<path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/>
|
|
188
|
-
</svg>
|
|
189
|
-
</span>
|
|
190
|
-
Chat with us
|
|
191
|
-
</button>
|
|
192
|
-
</div>
|
|
193
|
-
</footer>
|
|
194
|
-
`}},e.Shell.styles=l`
|
|
195
|
-
:host {
|
|
196
|
-
display: flex;
|
|
197
|
-
flex-direction: column;
|
|
198
|
-
height: 100vh;
|
|
199
|
-
width: 100vw;
|
|
200
|
-
--kr-shell-bar-height: 48px;
|
|
201
|
-
--kr-shell-bar-bg: #10172a; /* matches scaffold nav-bg */
|
|
202
|
-
/* --kr-shell-bar-bg: #0a0f1a; */ /* original darker bg */
|
|
203
|
-
--kr-shell-bar-border: rgba(255, 255, 255, 0.08);
|
|
204
|
-
--kr-shell-icon-size: 36px;
|
|
205
|
-
--kr-shell-icon-color: rgba(255, 255, 255, 0.7);
|
|
206
|
-
--kr-shell-icon-color-hover: rgba(255, 255, 255, 1);
|
|
207
|
-
--kr-shell-icon-color-active: #beea4e;
|
|
208
|
-
--kr-shell-icon-bg-hover: rgba(255, 255, 255, 0.08);
|
|
209
|
-
--kr-shell-icon-bg-active: rgba(190, 234, 78, 0.15);
|
|
210
|
-
--kr-shell-tooltip-bg: #1a2332;
|
|
211
|
-
--kr-shell-tooltip-color: #ffffff;
|
|
212
|
-
--kr-shell-menu-bg: #1a2332;
|
|
213
|
-
--kr-shell-menu-border: rgba(255, 255, 255, 0.1);
|
|
214
|
-
--kr-shell-menu-hover: rgba(255, 255, 255, 0.08);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
*,
|
|
218
|
-
*::before,
|
|
219
|
-
*::after {
|
|
220
|
-
box-sizing: border-box;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/* App Bar */
|
|
224
|
-
.appbar {
|
|
225
|
-
height: var(--kr-shell-bar-height);
|
|
226
|
-
background: var(--kr-shell-bar-bg);
|
|
227
|
-
border-bottom: 1px solid var(--kr-shell-bar-border);
|
|
228
|
-
display: flex;
|
|
229
|
-
align-items: center;
|
|
230
|
-
padding: 0 16px;
|
|
231
|
-
flex-shrink: 0;
|
|
232
|
-
z-index: 100;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
/* Logo */
|
|
236
|
-
.appbar-logo {
|
|
237
|
-
cursor: pointer;
|
|
238
|
-
margin-right: 8px;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.appbar-logo img {
|
|
242
|
-
display: block;
|
|
243
|
-
max-width: 24px;
|
|
244
|
-
max-height: 24px;
|
|
245
|
-
object-fit: contain;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
/* Divider */
|
|
249
|
-
.appbar-divider {
|
|
250
|
-
width: 1px;
|
|
251
|
-
height: 24px;
|
|
252
|
-
background: #ffffff4f;
|
|
253
|
-
margin: 0 10px;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
/* Apps Button */
|
|
257
|
-
.appbar-apps {
|
|
258
|
-
position: relative;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.appbar-apps-btn {
|
|
262
|
-
width: var(--kr-shell-icon-size);
|
|
263
|
-
height: var(--kr-shell-icon-size);
|
|
264
|
-
display: flex;
|
|
265
|
-
align-items: center;
|
|
266
|
-
justify-content: center;
|
|
267
|
-
border-radius: 6px;
|
|
268
|
-
cursor: pointer;
|
|
269
|
-
color: var(--kr-shell-icon-color);
|
|
270
|
-
background: transparent;
|
|
271
|
-
border: none;
|
|
272
|
-
padding: 0;
|
|
273
|
-
transition: all 0.15s ease;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.appbar-apps-btn:hover {
|
|
277
|
-
color: var(--kr-shell-icon-color-hover);
|
|
278
|
-
background: var(--kr-shell-icon-bg-hover);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.appbar-apps-btn--open {
|
|
282
|
-
color: var(--kr-shell-icon-color-hover);
|
|
283
|
-
background: var(--kr-shell-icon-bg-hover);
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.appbar-apps-btn__icon {
|
|
287
|
-
width: 24px;
|
|
288
|
-
height: 24px;
|
|
289
|
-
display: flex;
|
|
290
|
-
align-items: center;
|
|
291
|
-
justify-content: center;
|
|
292
|
-
color: #ffffff;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
.appbar-apps-btn__icon svg {
|
|
296
|
-
width: 100%;
|
|
297
|
-
height: 100%;
|
|
298
|
-
fill: currentColor;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
/* Apps Megamenu */
|
|
302
|
-
.appbar-apps-menu {
|
|
303
|
-
position: absolute;
|
|
304
|
-
left: 0;
|
|
305
|
-
top: 100%;
|
|
306
|
-
margin-top: 6px;
|
|
307
|
-
min-width: 320px;
|
|
308
|
-
min-height: 90vh;
|
|
309
|
-
max-height: calc(100vh - var(--kr-shell-bar-height));
|
|
310
|
-
background: #10172a;
|
|
311
|
-
border: 1px solid var(--kr-shell-menu-border);
|
|
312
|
-
border-top: none;
|
|
313
|
-
border-radius: 0 0 8px 8px;
|
|
314
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
315
|
-
z-index: 1000;
|
|
316
|
-
opacity: 0;
|
|
317
|
-
visibility: hidden;
|
|
318
|
-
transform: translateY(-10px);
|
|
319
|
-
transition: all 0.15s ease;
|
|
320
|
-
overflow-y: auto;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.appbar-apps-menu--open {
|
|
324
|
-
opacity: 1;
|
|
325
|
-
visibility: visible;
|
|
326
|
-
transform: translateY(0);
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.appbar-apps-menu__header {
|
|
330
|
-
display: flex;
|
|
331
|
-
align-items: center;
|
|
332
|
-
justify-content: space-between;
|
|
333
|
-
padding: 16px 16px 16px 24px;
|
|
334
|
-
border-bottom: 1px solid var(--kr-shell-menu-border);
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.appbar-apps-menu__title {
|
|
338
|
-
font-size: 16px;
|
|
339
|
-
font-weight: 500;
|
|
340
|
-
color: #ffffff;
|
|
341
|
-
margin: 0;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.appbar-apps-menu__close {
|
|
345
|
-
width: 32px;
|
|
346
|
-
height: 32px;
|
|
347
|
-
display: flex;
|
|
348
|
-
align-items: center;
|
|
349
|
-
justify-content: center;
|
|
350
|
-
background: none;
|
|
351
|
-
border: none;
|
|
352
|
-
color: rgba(255, 255, 255, 0.6);
|
|
353
|
-
cursor: pointer;
|
|
354
|
-
border-radius: 6px;
|
|
355
|
-
transition: all 0.15s ease;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.appbar-apps-menu__close:hover {
|
|
359
|
-
background: var(--kr-shell-menu-hover);
|
|
360
|
-
color: #ffffff;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
.appbar-apps-menu__close svg {
|
|
364
|
-
width: 24px;
|
|
365
|
-
height: 24px;
|
|
366
|
-
fill: #ffffff;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
.appbar-apps-menu__content {
|
|
370
|
-
padding: 16px 8px;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.appbar-apps-menu__list {
|
|
374
|
-
display: flex;
|
|
375
|
-
flex-direction: column;
|
|
376
|
-
gap: 2px;
|
|
377
|
-
max-width: 320px;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.appbar-apps-menu__item {
|
|
381
|
-
display: block;
|
|
382
|
-
width: 100%;
|
|
383
|
-
padding: 12px 16px;
|
|
384
|
-
background: none;
|
|
385
|
-
border: none;
|
|
386
|
-
color: #ffffff;
|
|
387
|
-
font-size: 14px;
|
|
388
|
-
font-family: inherit;
|
|
389
|
-
text-align: left;
|
|
390
|
-
text-decoration: none;
|
|
391
|
-
cursor: pointer;
|
|
392
|
-
border-radius: 6px;
|
|
393
|
-
transition: all 0.15s ease;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.appbar-apps-menu__item:hover {
|
|
397
|
-
background: var(--kr-shell-menu-hover);
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.appbar-apps-menu__item--active,
|
|
401
|
-
.appbar-apps-menu__item--active:hover {
|
|
402
|
-
color: var(--kr-shell-icon-color-active);
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
/* Spacer to push user to the right */
|
|
406
|
-
.appbar-spacer {
|
|
407
|
-
flex: 1;
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
/* User Section */
|
|
411
|
-
.appbar-user {
|
|
412
|
-
position: relative;
|
|
413
|
-
margin-left: 8px;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.appbar-user__avatar {
|
|
417
|
-
width: 32px;
|
|
418
|
-
height: 32px;
|
|
419
|
-
border-radius: 50%;
|
|
420
|
-
background: #beea4e;
|
|
421
|
-
color: #0a0f1a;
|
|
422
|
-
display: flex;
|
|
423
|
-
align-items: center;
|
|
424
|
-
justify-content: center;
|
|
425
|
-
font-size: 12px;
|
|
426
|
-
font-weight: 600;
|
|
427
|
-
cursor: pointer;
|
|
428
|
-
overflow: hidden;
|
|
429
|
-
border: 2px solid transparent;
|
|
430
|
-
transition: border-color 0.15s ease;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
.appbar-user__avatar:hover {
|
|
434
|
-
border-color: rgba(255, 255, 255, 0.3);
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
.appbar-user__avatar img {
|
|
438
|
-
width: 100%;
|
|
439
|
-
height: 100%;
|
|
440
|
-
object-fit: cover;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
/* User Menu */
|
|
444
|
-
.appbar-user__menu {
|
|
445
|
-
position: absolute;
|
|
446
|
-
right: 0;
|
|
447
|
-
top: calc(100% + 8px);
|
|
448
|
-
min-width: 200px;
|
|
449
|
-
background: var(--kr-shell-menu-bg);
|
|
450
|
-
border: 1px solid var(--kr-shell-menu-border);
|
|
451
|
-
border-radius: 8px;
|
|
452
|
-
padding: 8px;
|
|
453
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
454
|
-
z-index: 1000;
|
|
455
|
-
opacity: 0;
|
|
456
|
-
visibility: hidden;
|
|
457
|
-
transform: translateY(-8px);
|
|
458
|
-
transition: all 0.15s ease;
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
.appbar-user__menu--open {
|
|
462
|
-
opacity: 1;
|
|
463
|
-
visibility: visible;
|
|
464
|
-
transform: translateY(0);
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.appbar-user__header {
|
|
468
|
-
padding: 8px 12px 12px;
|
|
469
|
-
border-bottom: 1px solid var(--kr-shell-menu-border);
|
|
470
|
-
margin-bottom: 8px;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.appbar-user__name {
|
|
474
|
-
font-size: 14px;
|
|
475
|
-
font-weight: 600;
|
|
476
|
-
color: #ffffff;
|
|
477
|
-
margin: 0 0 2px;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
.appbar-user__email {
|
|
481
|
-
font-size: 12px;
|
|
482
|
-
color: rgba(255, 255, 255, 0.6);
|
|
483
|
-
margin: 0;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
.appbar-user__menu-item {
|
|
487
|
-
display: flex;
|
|
488
|
-
align-items: center;
|
|
489
|
-
gap: 10px;
|
|
490
|
-
width: 100%;
|
|
491
|
-
padding: 10px 12px;
|
|
492
|
-
background: none;
|
|
493
|
-
border: none;
|
|
494
|
-
color: rgba(255, 255, 255, 0.8);
|
|
495
|
-
font-size: 13px;
|
|
496
|
-
font-family: inherit;
|
|
497
|
-
text-align: left;
|
|
498
|
-
cursor: pointer;
|
|
499
|
-
border-radius: 6px;
|
|
500
|
-
transition: all 0.15s ease;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
.appbar-user__menu-item:hover {
|
|
504
|
-
background: var(--kr-shell-menu-hover);
|
|
505
|
-
color: #ffffff;
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
.appbar-user__menu-item--danger {
|
|
509
|
-
color: #f87171;
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
.appbar-user__menu-item--danger:hover {
|
|
513
|
-
background: rgba(248, 113, 113, 0.1);
|
|
514
|
-
color: #f87171;
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
.appbar-user__menu-item__icon {
|
|
518
|
-
width: 16px;
|
|
519
|
-
height: 16px;
|
|
520
|
-
display: flex;
|
|
521
|
-
align-items: center;
|
|
522
|
-
justify-content: center;
|
|
523
|
-
flex-shrink: 0;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
.appbar-user__menu-item__icon svg {
|
|
527
|
-
width: 100%;
|
|
528
|
-
height: 100%;
|
|
529
|
-
fill: currentColor;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
.appbar-user__menu-divider {
|
|
533
|
-
height: 1px;
|
|
534
|
-
background: var(--kr-shell-menu-border);
|
|
535
|
-
margin: 8px 0;
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
/* Secondary App Bar */
|
|
539
|
-
.subbar {
|
|
540
|
-
height: 30px;
|
|
541
|
-
background: #364365;
|
|
542
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
543
|
-
display: flex;
|
|
544
|
-
align-items: center;
|
|
545
|
-
padding: 0 16px;
|
|
546
|
-
flex-shrink: 0;
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
.breadcrumbs {
|
|
550
|
-
display: flex;
|
|
551
|
-
align-items: center;
|
|
552
|
-
gap: 8px;
|
|
553
|
-
font-size: 12px;
|
|
554
|
-
color: #ffffff;
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
.breadcrumbs a {
|
|
558
|
-
color: #ffffff;
|
|
559
|
-
text-decoration: none;
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
.breadcrumbs a:hover {
|
|
563
|
-
text-decoration: underline;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
.breadcrumbs__separator {
|
|
567
|
-
color: #ffffff;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
/* Main Content */
|
|
571
|
-
.main {
|
|
572
|
-
flex: 1;
|
|
573
|
-
min-height: 0;
|
|
574
|
-
display: flex;
|
|
575
|
-
flex-direction: column;
|
|
576
|
-
overflow: hidden;
|
|
577
|
-
position: relative;
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
/* Click outside overlay */
|
|
581
|
-
.menu-backdrop {
|
|
582
|
-
position: fixed;
|
|
583
|
-
inset: 0;
|
|
584
|
-
z-index: 999;
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
/* Progress bar */
|
|
588
|
-
.progress {
|
|
589
|
-
position: fixed;
|
|
590
|
-
top: 0;
|
|
591
|
-
left: 0;
|
|
592
|
-
right: 0;
|
|
593
|
-
height: 4px;
|
|
594
|
-
overflow-x: hidden;
|
|
595
|
-
z-index: 1000;
|
|
596
|
-
display: none;
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
.progress--loading {
|
|
600
|
-
display: block;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
.progress__track {
|
|
604
|
-
position: absolute;
|
|
605
|
-
top: 0;
|
|
606
|
-
bottom: 0;
|
|
607
|
-
width: 100%;
|
|
608
|
-
background: rgb(190 234 78 / 50%); // rgba(190, 234, 78, 0.3);
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
.progress__bar {
|
|
612
|
-
position: absolute;
|
|
613
|
-
top: 0;
|
|
614
|
-
bottom: 0;
|
|
615
|
-
width: 100%;
|
|
616
|
-
transform-origin: left center;
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
.progress__bar-inner {
|
|
620
|
-
display: inline-block;
|
|
621
|
-
position: absolute;
|
|
622
|
-
width: 100%;
|
|
623
|
-
height: 100%;
|
|
624
|
-
background: #beea4e;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
.progress__bar--primary {
|
|
628
|
-
left: -145.166611%;
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
.progress--loading .progress__bar--primary {
|
|
632
|
-
animation: progress-primary-translate 2s infinite linear;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
.progress--loading .progress__bar--primary .progress__bar-inner {
|
|
636
|
-
animation: progress-primary-scale 2s infinite linear;
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
.progress__bar--secondary {
|
|
640
|
-
left: -54.888891%;
|
|
641
|
-
}
|
|
642
|
-
|
|
643
|
-
.progress--loading .progress__bar--secondary {
|
|
644
|
-
animation: progress-secondary-translate 2s infinite linear;
|
|
645
|
-
}
|
|
646
|
-
|
|
647
|
-
.progress--loading .progress__bar--secondary .progress__bar-inner {
|
|
648
|
-
animation: progress-secondary-scale 2s infinite linear;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
@keyframes progress-primary-translate {
|
|
652
|
-
0% {
|
|
653
|
-
transform: translateX(0);
|
|
654
|
-
}
|
|
655
|
-
20% {
|
|
656
|
-
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
|
657
|
-
transform: translateX(0);
|
|
658
|
-
}
|
|
659
|
-
59.15% {
|
|
660
|
-
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
|
|
661
|
-
transform: translateX(83.67142%);
|
|
662
|
-
}
|
|
663
|
-
100% {
|
|
664
|
-
transform: translateX(200.611057%);
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
@keyframes progress-primary-scale {
|
|
669
|
-
0% {
|
|
670
|
-
transform: scaleX(0.08);
|
|
671
|
-
}
|
|
672
|
-
36.65% {
|
|
673
|
-
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
|
|
674
|
-
transform: scaleX(0.08);
|
|
675
|
-
}
|
|
676
|
-
69.15% {
|
|
677
|
-
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
|
678
|
-
transform: scaleX(0.661479);
|
|
679
|
-
}
|
|
680
|
-
100% {
|
|
681
|
-
transform: scaleX(0.08);
|
|
682
|
-
}
|
|
683
|
-
}
|
|
684
|
-
|
|
685
|
-
@keyframes progress-secondary-translate {
|
|
686
|
-
0% {
|
|
687
|
-
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
|
688
|
-
transform: translateX(0);
|
|
689
|
-
}
|
|
690
|
-
25% {
|
|
691
|
-
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
|
692
|
-
transform: translateX(37.651913%);
|
|
693
|
-
}
|
|
694
|
-
48.35% {
|
|
695
|
-
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
696
|
-
transform: translateX(84.386165%);
|
|
697
|
-
}
|
|
698
|
-
100% {
|
|
699
|
-
transform: translateX(160.277782%);
|
|
700
|
-
}
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
@keyframes progress-secondary-scale {
|
|
704
|
-
0% {
|
|
705
|
-
animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
|
|
706
|
-
transform: scaleX(0.08);
|
|
707
|
-
}
|
|
708
|
-
19.15% {
|
|
709
|
-
animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
|
|
710
|
-
transform: scaleX(0.457104);
|
|
711
|
-
}
|
|
712
|
-
44.15% {
|
|
713
|
-
animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
|
|
714
|
-
transform: scaleX(0.72796);
|
|
715
|
-
}
|
|
716
|
-
100% {
|
|
717
|
-
transform: scaleX(0.08);
|
|
718
|
-
}
|
|
719
|
-
}
|
|
720
|
-
|
|
721
|
-
.footer {
|
|
722
|
-
background: var(--kr-shell-bar-bg);
|
|
723
|
-
border-top: 1px solid var(--kr-shell-bar-border);
|
|
724
|
-
padding: 8px 16px;
|
|
725
|
-
flex-shrink: 0;
|
|
726
|
-
}
|
|
727
|
-
|
|
728
|
-
.footer-content {
|
|
729
|
-
display: flex;
|
|
730
|
-
justify-content: flex-end;
|
|
731
|
-
align-items: center;
|
|
732
|
-
gap: 36px;
|
|
733
|
-
}
|
|
734
|
-
|
|
735
|
-
.footer-info {
|
|
736
|
-
font-size: 12px;
|
|
737
|
-
color: rgba(255, 255, 255, 0.7);
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
.footer-link {
|
|
741
|
-
color: rgba(255, 255, 255, 0.7);
|
|
742
|
-
text-decoration: none;
|
|
743
|
-
font-size: 12px;
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
.footer-link:hover {
|
|
747
|
-
color: #ffffff;
|
|
748
|
-
text-decoration: underline;
|
|
749
|
-
}
|
|
750
|
-
|
|
751
|
-
.footer-chat {
|
|
752
|
-
display: flex;
|
|
753
|
-
align-items: center;
|
|
754
|
-
gap: 6px;
|
|
755
|
-
font-size: 14px;
|
|
756
|
-
color: #beea4e;
|
|
757
|
-
cursor: pointer;
|
|
758
|
-
background: none;
|
|
759
|
-
border: none;
|
|
760
|
-
border-radius: 4px;
|
|
761
|
-
font-family: inherit;
|
|
762
|
-
transition: background 0.15s ease;
|
|
763
|
-
}
|
|
764
|
-
|
|
765
|
-
.footer-chat:hover {
|
|
766
|
-
background: rgba(255, 255, 255, 0.08);
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
.footer-chat__icon {
|
|
770
|
-
width: 16px;
|
|
771
|
-
height: 16px;
|
|
772
|
-
display: flex;
|
|
773
|
-
align-items: center;
|
|
774
|
-
justify-content: center;
|
|
775
|
-
}
|
|
776
|
-
|
|
777
|
-
.footer-chat__icon svg {
|
|
778
|
-
width: 100%;
|
|
779
|
-
height: 100%;
|
|
780
|
-
stroke: currentColor;
|
|
781
|
-
}
|
|
782
|
-
`,ke([ue({type:String})],e.Shell.prototype,"logo",void 0),ke([ue({type:Array})],e.Shell.prototype,"apps",void 0),ke([ue({type:String,attribute:"active-app-id"})],e.Shell.prototype,"activeAppId",void 0),ke([ue({type:Object})],e.Shell.prototype,"user",void 0),ke([ue({type:Array,attribute:"menu-items"})],e.Shell.prototype,"menuItems",void 0),ke([ve()],e.Shell.prototype,"isUserMenuOpen",void 0),ke([ve()],e.Shell.prototype,"isAppsMenuOpen",void 0),ke([ve()],e.Shell.prototype,"pendingRequests",void 0),e.Shell=ke([ce("kr-shell")],e.Shell);var we=function(e,t,i,r){var a,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s<3?a(n):s>3?a(t,i,n):a(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};let $e=class extends le{constructor(){super(...arguments),this.label="",this.icon="",this.url="",this.active=!0}connectedCallback(){super.connectedCallback(),this.data&&(this.label=this.data.label||"",this.icon=this.data.icon||"",this.url=this.data.url||"",this.active=!1!==this.data.active)}handleLabelInput(e){const t=e.target;this.label=t.value}handleIconInput(e){const t=e.target;this.icon=t.value}handleUrlInput(e){const t=e.target;this.url=t.value}handleActiveChange(e){this.active=e.target.checked}handleCancel(){this.dialogRef.close(void 0)}handleSave(){this.dialogRef.close({label:this.label,icon:this.icon||void 0,url:this.url||void 0,active:this.active})}handleKeyDown(e){"Enter"===e.key&&this.handleSave()}render(){return F`
|
|
53
|
+
*/var $e=function(e,t,i,r){var n,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};let we=class extends le{constructor(){super(...arguments),this.label="",this.icon="",this.url="",this.active=!0}connectedCallback(){super.connectedCallback(),this.data&&(this.label=this.data.label||"",this.icon=this.data.icon||"",this.url=this.data.url||"",this.active=!1!==this.data.active)}handleLabelInput(e){const t=e.target;this.label=t.value}handleIconInput(e){const t=e.target;this.icon=t.value}handleUrlInput(e){const t=e.target;this.url=t.value}handleActiveChange(e){this.active=e.target.checked}handleCancel(){this.dialogRef.close(void 0)}handleSave(){this.dialogRef.close({label:this.label,icon:this.icon||void 0,url:this.url||void 0,active:this.active})}handleKeyDown(e){"Enter"===e.key&&this.handleSave()}render(){return B`
|
|
783
54
|
<h2>Edit Navigation Item</h2>
|
|
784
55
|
|
|
785
56
|
<div class="form-group">
|
|
@@ -831,7 +102,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
831
102
|
<button class="btn-cancel" @click=${this.handleCancel}>Cancel</button>
|
|
832
103
|
<button class="btn-save" @click=${this.handleSave}>Save</button>
|
|
833
104
|
</div>
|
|
834
|
-
`}}
|
|
105
|
+
`}};we.styles=l`
|
|
835
106
|
:host {
|
|
836
107
|
display: block;
|
|
837
108
|
width: 360px;
|
|
@@ -916,26 +187,26 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
916
187
|
.btn-save:hover {
|
|
917
188
|
background: #d4f472;
|
|
918
189
|
}
|
|
919
|
-
`,we([ve()],$e.prototype,"label",void 0),we([ve()],$e.prototype,"icon",void 0),we([ve()],$e.prototype,"url",void 0),we([ve()],$e.prototype,"active",void 0),$e=we([ce("kr-nav-item-edit")],$e);var Ie=function(e,t,i,r){var a,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s<3?a(n):s>3?a(t,i,n):a(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};e.Scaffold=class extends le{constructor(){super(),this.defaultNavItemIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>',this.navItemsExpanded=new Set,this.navQuery="",this.activeNavItemId=null,this.isNavScrolled=!1,this.isNavOpened="false"!==localStorage.getItem("kr-scaffold-nav-opened"),this.isEditing=!1,this.isUserMenuOpen=!1,this.pref={nav:{}},this.draggedNavItemId=null,this.navItemDropTargetId=null,this.navItemDropPosition="above",this.pendingRequests=0,this.originalFetch=null,this.originalXhrOpen=null,this.navItemDragPreview=null,this.navItemDragStartY=0,this.isNavItemDragging=!1,this.navItemDragExpandTimeout=null,this.navInitialized=!1,this.logo="",this.label="",this.homeUrl="/",this.scheme="light",this.nav=[],this.navIconsDisplayed=!1,this.navExpanded=!1,this.user=null,this.subbar=!1,this.breadcrumbs=[],this.boundHandleMouseMove=this.handleMouseMove.bind(this),this.boundHandleMouseUp=this.handleMouseUp.bind(this)}connectedCallback(){super.connectedCallback(),this.loadPref(),this.installFetchInterceptor()}updated(e){super.updated(e),e.has("nav")&&this.nav.length>0&&(this.updateActiveNavItem(),this.navExpanded&&!this.navInitialized&&(this.navInitialized=!0,this.getComputedNav().filter((e=>"group"===e.type)).forEach((e=>this.navItemsExpanded.add(e.id)))))}disconnectedCallback(){super.disconnectedCallback(),this.uninstallFetchInterceptor()}installFetchInterceptor(){if(this.originalFetch)return;const e=this;this.originalFetch=window.fetch.bind(window);const t=this.originalFetch;window.fetch=function(...i){return e.pendingRequests++,t(...i).finally((()=>{e.pendingRequests--}))},this.originalXhrOpen=XMLHttpRequest.prototype.open;const i=this.originalXhrOpen;XMLHttpRequest.prototype.open=function(t,r,a=!0,s,n){return e.pendingRequests++,this.addEventListener("loadend",(()=>{e.pendingRequests--}),{once:!0}),i.call(this,t,r,a,s,n)}}uninstallFetchInterceptor(){this.originalFetch&&(window.fetch=this.originalFetch,this.originalFetch=null),this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen,this.originalXhrOpen=null)}resolveUrl(e){if(!e.url)return"#";if(e.external)return e.url;const t=e.url.startsWith("/")?e.url.slice(1):e.url,i=document.querySelector("base")?.getAttribute("href")||"/";return(i.endsWith("/")?i:i+"/")+t}getComputedNav(){const e=[];return this.nav.forEach(((t,i)=>{const r=this.pref.nav[t.id];e.push({...t,...r,order:r?.order??t.order??i,parentId:r?.parentId??null}),"group"===t.type&&t.children&&t.children.forEach(((i,r)=>{const a=this.pref.nav[i.id];e.push({...i,...a,order:a?.order??i.order??r,parentId:void 0!==a?.parentId?a.parentId:t.id})}))})),Object.entries(this.pref.nav).forEach((([t,i])=>{t.startsWith("custom")&&i.type&&i.label&&e.push({id:t,type:i.type,label:i.label,icon:i.icon,url:i.url,active:i.active,order:i.order??e.length,parentId:i.parentId??null})})),e}getNavItemChildren(e){let t=this.getComputedNav().filter((t=>t.parentId===e)).sort(((e,t)=>e.order-t.order));if(this.isEditing||(t=t.filter((e=>!1!==e.active))),this.navQuery){const i=this.navQuery.toLowerCase(),r=this.getComputedNav();if(null!==e){const a=r.find((t=>t.id===e));if(a?.label.toLowerCase().includes(i))return t}t=t.filter((e=>"group"===e.type?e.label.toLowerCase().includes(i)||r.some((t=>t.parentId===e.id&&!1!==t.active&&t.label.toLowerCase().includes(i))):e.label.toLowerCase().includes(i)))}return t}handleNavQueryChange(e){this.navQuery=e.target.value,this.navQuery?this.getComputedNav().forEach((e=>{"group"===e.type&&this.navItemsExpanded.add(e.id)})):this.navItemsExpanded.clear()}handleNavQueryClear(){this.navQuery="",this.navItemsExpanded.clear()}handleMenuClick(){this.isNavOpened=!this.isNavOpened,localStorage.setItem("kr-scaffold-nav-opened",String(this.isNavOpened))}handleNavHeaderClick(){this.activeNavItemId=null;const e=new CustomEvent("nav-item-click",{detail:{item:{url:this.homeUrl}},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||(window.location.href=this.homeUrl)}handleNavScroll(e){this.isNavScrolled=e.target.scrollTop>0}toggleNavItem(e){const t=this.shadowRoot?.querySelector(`.nav-item[data-id="${e}"]`),i=t?.nextElementSibling;i&&(this.navItemsExpanded.has(e)?(this.navItemsExpanded.delete(e),i.animate([{height:`${i.scrollHeight}px`},{height:"0px"}],{duration:300,easing:"ease-in-out"}).onfinish=()=>{i.classList.remove("nav-group--expanded")}):(this.navItemsExpanded.add(e),i.classList.add("nav-group--expanded"),i.animate([{height:"0px"},{height:`${i.scrollHeight}px`}],{duration:300,easing:"ease-in-out"})),this.requestUpdate())}handleNavItemClick(e,t){if("group"===t.type)this.toggleNavItem(t.id);else{if(e.ctrlKey||e.metaKey||1===e.button)return;this.activeNavItemId=t.id;const i=new CustomEvent("nav-item-click",{detail:{item:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&e.preventDefault()}}updateActiveNavItem(){const e=window.location.pathname,t=this.getComputedNav().filter((e=>"item"===e.type&&e.url));let i=null,r=0;for(const a of t){const t=this.resolveUrl(a);e.startsWith(t)&&t.length>r&&(i=a,r=t.length)}i?(this.activeNavItemId=i.id,i.parentId&&this.navItemsExpanded.add(i.parentId)):this.activeNavItemId=null}startEditing(){this.isEditing=!0}cancelEditing(){this.isEditing=!1,this.loadPref()}resetPref(){this.pref.nav={}}savePref(){const e=this.pref.uuid?`/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`:"/api/system/preference/json/scaffold?global=true";i.Http.fetch({url:e,method:this.pref.uuid?"PUT":"POST",body:JSON.stringify({nav:this.pref.nav})}).then((e=>e.json())).then((e=>{this.pref=e.data,this.isEditing=!1})).catch((e=>{console.error("Failed to save nav customizations:",e)}))}loadPref(){i.Http.fetch({url:"/api/system/preference/json/scaffold?global=true",method:"GET"}).then((e=>e.json())).then((e=>{const t=e?.data?.[0];t&&(this.pref=t)})).catch((()=>{}))}handleNavItemContextMenu(e,i){this.isEditing&&(e.preventDefault(),t.ContextMenu.open({x:e.clientX,y:e.clientY,items:[{id:"edit",label:"Edit Item"},{id:"divider-1",label:"",divider:!0},{id:"add-above",label:"Add Item Above"},{id:"add-below",label:"Add Item Below"}]}).then((e=>{if(e)switch(e.id){case"edit":this.openNavItemEdit(i);break;case"add-above":this.addNavItem(i,"above");break;case"add-below":this.addNavItem(i,"below")}})))}openNavItemEdit(e){t.Dialog.open($e,{data:e}).afterClosed().then((t=>{const i=t;i&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id]={...this.pref.nav[e.id],...i},this.requestUpdate())}))}addNavItem(e,t){const i=`custom-${Date.now()}`,r=this.getComputedNav().filter((t=>t.parentId===e.parentId)).sort(((e,t)=>e.order-t.order)),a=r.findIndex((t=>t.id===e.id)),s="above"===t?a:a+1;r.forEach(((e,t)=>{t>=s&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id].order=t+1)}));const n={id:i,type:"item",label:"New Item",order:s,parentId:e.parentId,active:!0};this.pref.nav[i]=n,this.requestUpdate(),this.openNavItemEdit(n)}handleNavItemMouseDown(e,t){this.isEditing&&(e.preventDefault(),this.draggedNavItemId=t.id,this.navItemDragStartY=e.clientY,this.isNavItemDragging=!1,document.addEventListener("mousemove",this.boundHandleMouseMove),document.addEventListener("mouseup",this.boundHandleMouseUp))}handleMouseMove(e){if(this.draggedNavItemId){if(!this.isNavItemDragging&&Math.abs(e.clientY-this.navItemDragStartY)>5){this.isNavItemDragging=!0,this.classList.add("kr-scaffold--dragging");const t=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));t&&(this.navItemDragPreview=document.createElement("div"),this.navItemDragPreview.className="nav-item-drag-preview",this.navItemDragPreview.textContent=t.label,this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px",this.shadowRoot?.appendChild(this.navItemDragPreview))}this.isNavItemDragging&&(this.navItemDragPreview&&(this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px"),this.updateNavItemDropTarget(e))}}handleMouseUp(){document.removeEventListener("mousemove",this.boundHandleMouseMove),document.removeEventListener("mouseup",this.boundHandleMouseUp),this.isNavItemDragging&&this.navItemDropTargetId&&this.executeNavItemDrop(),this.draggedNavItemId=null,this.navItemDropTargetId=null,this.isNavItemDragging=!1,this.classList.remove("kr-scaffold--dragging"),this.navItemDragPreview&&(this.navItemDragPreview.remove(),this.navItemDragPreview=null),this.clearNavItemDragExpandTimeout(),this.requestUpdate()}updateNavItemDropTarget(e){const t=this.shadowRoot?.querySelectorAll(".nav-item[data-id]");if(!t)return;let i=!1;t.forEach((t=>{const r=t.getBoundingClientRect(),a=t.getAttribute("data-id");if(!a||a===this.draggedNavItemId)return;if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)return;const s=this.getComputedNav().find((e=>e.id===a));if(!s)return;const n=e.clientY-r.top;let o;"group"===s.type?n<r.height/3?(o="above",this.clearNavItemDragExpandTimeout()):n>2*r.height/3?(o="below",this.clearNavItemDragExpandTimeout()):(o="center",this.navItemsExpanded.has(s.id)||this.navItemDragExpandTimeout||this.expandNavGroupOnDrag(s.id)):(o=n<r.height/2?"above":"below",this.clearNavItemDragExpandTimeout());const l="center"===o?s.id:s.parentId,d=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));if(l===this.draggedNavItemId||"group"===d?.type&&null!==l)return this.navItemDropTargetId=null,void this.clearNavItemDragExpandTimeout();this.navItemDropTargetId=s.id,this.navItemDropPosition=o,i=!0})),i||(this.navItemDropTargetId=null,this.clearNavItemDragExpandTimeout()),this.requestUpdate()}clearNavItemDragExpandTimeout(){this.navItemDragExpandTimeout&&(clearTimeout(this.navItemDragExpandTimeout),this.navItemDragExpandTimeout=null)}expandNavGroupOnDrag(e){this.navItemDragExpandTimeout=window.setTimeout((()=>{this.navItemDropTargetId===e&&"center"===this.navItemDropPosition&&(this.navItemsExpanded.add(e),this.requestUpdate()),this.navItemDragExpandTimeout=null}),500)}executeNavItemDrop(){if(!this.draggedNavItemId||!this.navItemDropTargetId)return;const e=this.getComputedNav(),t=e.find((e=>e.id===this.draggedNavItemId)),i=e.find((e=>e.id===this.navItemDropTargetId));if(!t||!i)return;let r;if("center"===this.navItemDropPosition&&"group"===i.type){if(i.id===this.draggedNavItemId)return;r=i.id}else r=i.parentId;if(r===this.draggedNavItemId)return;const a=e.filter((e=>e.parentId===r&&e.id!==this.draggedNavItemId)).sort(((e,t)=>e.order-t.order)),s=this.pref.nav;let n;if("center"===this.navItemDropPosition)n=a.length>0?Math.max(...a.map((e=>e.order)))+1:0;else{const e=a.findIndex((e=>e.id===i.id));n=-1===e?0:"above"===this.navItemDropPosition?e:e+1,a.forEach(((e,t)=>{s[e.id]||(s[e.id]={}),s[e.id].order=t>=n?t+1:t}))}s[this.draggedNavItemId]||(s[this.draggedNavItemId]={}),s[this.draggedNavItemId].order=n,s[this.draggedNavItemId].parentId=r,this.pref.nav=s,this.requestUpdate()}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen}closeUserMenu(){this.isUserMenuOpen=!1}handleCustomize(){this.closeUserMenu(),this.startEditing()}renderNormalFooter(){if(!this.user)return Y;const e=this.user.name.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2);return F`
|
|
190
|
+
`,$e([ue()],we.prototype,"label",void 0),$e([ue()],we.prototype,"icon",void 0),$e([ue()],we.prototype,"url",void 0),$e([ue()],we.prototype,"active",void 0),we=$e([ce("kr-nav-item-edit")],we);var Ie=function(e,t,i,r){var n,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};e.Scaffold=class extends le{constructor(){super(),this.defaultNavItemIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>',this.navItemsExpanded=new Set,this.navQuery="",this.activeNavItemId=null,this.isNavScrolled=!1,this.isNavOpened="false"!==localStorage.getItem("kr-scaffold-nav-opened"),this.isEditing=!1,this.isUserMenuOpen=!1,this.pref={nav:{}},this.draggedNavItemId=null,this.navItemDropTargetId=null,this.navItemDropPosition="above",this.pendingRequests=0,this.originalFetch=null,this.originalXhrOpen=null,this.navItemDragPreview=null,this.navItemDragStartY=0,this.isNavItemDragging=!1,this.navItemDragExpandTimeout=null,this.navInitialized=!1,this.logo="",this.label="",this.homeUrl="/",this.scheme="light",this.nav=[],this.navIconsDisplayed=!1,this.navExpanded=!1,this.user=null,this.subbar=!1,this.breadcrumbs=[],this.boundHandleMouseMove=this.handleMouseMove.bind(this),this.boundHandleMouseUp=this.handleMouseUp.bind(this)}connectedCallback(){super.connectedCallback(),this.loadPref(),this.installFetchInterceptor()}updated(e){super.updated(e),e.has("nav")&&this.nav.length>0&&(this.updateActiveNavItem(),this.navExpanded&&!this.navInitialized&&(this.navInitialized=!0,this.getComputedNav().filter((e=>"group"===e.type)).forEach((e=>this.navItemsExpanded.add(e.id)))))}disconnectedCallback(){super.disconnectedCallback(),this.uninstallFetchInterceptor()}installFetchInterceptor(){if(this.originalFetch)return;const e=this;this.originalFetch=window.fetch.bind(window);const t=this.originalFetch;window.fetch=function(...i){return e.pendingRequests++,t(...i).finally((()=>{e.pendingRequests--}))},this.originalXhrOpen=XMLHttpRequest.prototype.open;const i=this.originalXhrOpen;XMLHttpRequest.prototype.open=function(t,r,n=!0,s,a){return e.pendingRequests++,this.addEventListener("loadend",(()=>{e.pendingRequests--}),{once:!0}),i.call(this,t,r,n,s,a)}}uninstallFetchInterceptor(){this.originalFetch&&(window.fetch=this.originalFetch,this.originalFetch=null),this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen,this.originalXhrOpen=null)}resolveUrl(e){if(!e.url)return"#";if(e.external)return e.url;const t=e.url.startsWith("/")?e.url.slice(1):e.url,i=document.querySelector("base")?.getAttribute("href")||"/";return(i.endsWith("/")?i:i+"/")+t}getComputedNav(){const e=[];return this.nav.forEach(((t,i)=>{const r=this.pref.nav[t.id];e.push({...t,...r,order:r?.order??t.order??i,parentId:r?.parentId??null}),"group"===t.type&&t.children&&t.children.forEach(((i,r)=>{const n=this.pref.nav[i.id];e.push({...i,...n,order:n?.order??i.order??r,parentId:void 0!==n?.parentId?n.parentId:t.id})}))})),Object.entries(this.pref.nav).forEach((([t,i])=>{t.startsWith("custom")&&i.type&&i.label&&e.push({id:t,type:i.type,label:i.label,icon:i.icon,url:i.url,active:i.active,order:i.order??e.length,parentId:i.parentId??null})})),e}getNavItemChildren(e){let t=this.getComputedNav().filter((t=>t.parentId===e)).sort(((e,t)=>e.order-t.order));if(this.isEditing||(t=t.filter((e=>!1!==e.active))),this.navQuery){const i=this.navQuery.toLowerCase(),r=this.getComputedNav();if(null!==e){const n=r.find((t=>t.id===e));if(n?.label.toLowerCase().includes(i))return t}t=t.filter((e=>"group"===e.type?e.label.toLowerCase().includes(i)||r.some((t=>t.parentId===e.id&&!1!==t.active&&t.label.toLowerCase().includes(i))):e.label.toLowerCase().includes(i)))}return t}handleNavQueryChange(e){this.navQuery=e.target.value,this.navQuery?this.getComputedNav().forEach((e=>{"group"===e.type&&this.navItemsExpanded.add(e.id)})):this.navItemsExpanded.clear()}handleNavQueryClear(){this.navQuery="",this.navItemsExpanded.clear()}handleMenuClick(){this.isNavOpened=!this.isNavOpened,localStorage.setItem("kr-scaffold-nav-opened",String(this.isNavOpened))}handleNavHeaderClick(){this.activeNavItemId=null;const e=new CustomEvent("nav-item-click",{detail:{item:{url:this.homeUrl}},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||(window.location.href=this.homeUrl)}handleNavScroll(e){this.isNavScrolled=e.target.scrollTop>0}toggleNavItem(e){const t=this.shadowRoot?.querySelector(`.nav-item[data-id="${e}"]`),i=t?.nextElementSibling;i&&(this.navItemsExpanded.has(e)?(this.navItemsExpanded.delete(e),i.animate([{height:`${i.scrollHeight}px`},{height:"0px"}],{duration:300,easing:"ease-in-out"}).onfinish=()=>{i.classList.remove("nav-group--expanded")}):(this.navItemsExpanded.add(e),i.classList.add("nav-group--expanded"),i.animate([{height:"0px"},{height:`${i.scrollHeight}px`}],{duration:300,easing:"ease-in-out"})),this.requestUpdate())}handleNavItemClick(e,t){if("group"===t.type)this.toggleNavItem(t.id);else{if(e.ctrlKey||e.metaKey||1===e.button)return;this.activeNavItemId=t.id;const i=new CustomEvent("nav-item-click",{detail:{item:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&e.preventDefault()}}updateActiveNavItem(){const e=window.location.pathname,t=this.getComputedNav().filter((e=>"item"===e.type&&e.url));let i=null,r=0;for(const n of t){const t=this.resolveUrl(n);e.startsWith(t)&&t.length>r&&(i=n,r=t.length)}i?(this.activeNavItemId=i.id,i.parentId&&this.navItemsExpanded.add(i.parentId)):this.activeNavItemId=null}startEditing(){this.isEditing=!0}cancelEditing(){this.isEditing=!1,this.loadPref()}resetPref(){this.pref.nav={}}savePref(){const e=this.pref.uuid?`/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`:"/api/system/preference/json/scaffold?global=true";i.Http.fetch({url:e,method:this.pref.uuid?"PUT":"POST",body:JSON.stringify({nav:this.pref.nav})}).then((e=>e.json())).then((e=>{this.pref=e.data,this.isEditing=!1})).catch((e=>{console.error("Failed to save nav customizations:",e)}))}loadPref(){i.Http.fetch({url:"/api/system/preference/json/scaffold?global=true",method:"GET"}).then((e=>e.json())).then((e=>{const t=e?.data?.[0];t&&(this.pref=t)})).catch((()=>{}))}handleNavItemContextMenu(e,i){this.isEditing&&(e.preventDefault(),t.ContextMenu.open({x:e.clientX,y:e.clientY,items:[{id:"edit",label:"Edit Item"},{id:"divider-1",label:"",divider:!0},{id:"add-above",label:"Add Item Above"},{id:"add-below",label:"Add Item Below"}]}).then((e=>{if(e)switch(e.id){case"edit":this.openNavItemEdit(i);break;case"add-above":this.addNavItem(i,"above");break;case"add-below":this.addNavItem(i,"below")}})))}openNavItemEdit(e){t.Dialog.open(we,{data:e}).afterClosed().then((t=>{const i=t;i&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id]={...this.pref.nav[e.id],...i},this.requestUpdate())}))}addNavItem(e,t){const i=`custom-${Date.now()}`,r=this.getComputedNav().filter((t=>t.parentId===e.parentId)).sort(((e,t)=>e.order-t.order)),n=r.findIndex((t=>t.id===e.id)),s="above"===t?n:n+1;r.forEach(((e,t)=>{t>=s&&(this.pref.nav[e.id]||(this.pref.nav[e.id]={}),this.pref.nav[e.id].order=t+1)}));const a={id:i,type:"item",label:"New Item",order:s,parentId:e.parentId,active:!0};this.pref.nav[i]=a,this.requestUpdate(),this.openNavItemEdit(a)}handleNavItemMouseDown(e,t){this.isEditing&&(e.preventDefault(),this.draggedNavItemId=t.id,this.navItemDragStartY=e.clientY,this.isNavItemDragging=!1,document.addEventListener("mousemove",this.boundHandleMouseMove),document.addEventListener("mouseup",this.boundHandleMouseUp))}handleMouseMove(e){if(this.draggedNavItemId){if(!this.isNavItemDragging&&Math.abs(e.clientY-this.navItemDragStartY)>5){this.isNavItemDragging=!0,this.classList.add("kr-scaffold--dragging");const t=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));t&&(this.navItemDragPreview=document.createElement("div"),this.navItemDragPreview.className="nav-item-drag-preview",this.navItemDragPreview.textContent=t.label,this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px",this.shadowRoot?.appendChild(this.navItemDragPreview))}this.isNavItemDragging&&(this.navItemDragPreview&&(this.navItemDragPreview.style.left=`${e.clientX+10}px`,this.navItemDragPreview.style.top=e.clientY-20+"px"),this.updateNavItemDropTarget(e))}}handleMouseUp(){document.removeEventListener("mousemove",this.boundHandleMouseMove),document.removeEventListener("mouseup",this.boundHandleMouseUp),this.isNavItemDragging&&this.navItemDropTargetId&&this.executeNavItemDrop(),this.draggedNavItemId=null,this.navItemDropTargetId=null,this.isNavItemDragging=!1,this.classList.remove("kr-scaffold--dragging"),this.navItemDragPreview&&(this.navItemDragPreview.remove(),this.navItemDragPreview=null),this.clearNavItemDragExpandTimeout(),this.requestUpdate()}updateNavItemDropTarget(e){const t=this.shadowRoot?.querySelectorAll(".nav-item[data-id]");if(!t)return;let i=!1;t.forEach((t=>{const r=t.getBoundingClientRect(),n=t.getAttribute("data-id");if(!n||n===this.draggedNavItemId)return;if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)return;const s=this.getComputedNav().find((e=>e.id===n));if(!s)return;const a=e.clientY-r.top;let o;"group"===s.type?a<r.height/3?(o="above",this.clearNavItemDragExpandTimeout()):a>2*r.height/3?(o="below",this.clearNavItemDragExpandTimeout()):(o="center",this.navItemsExpanded.has(s.id)||this.navItemDragExpandTimeout||this.expandNavGroupOnDrag(s.id)):(o=a<r.height/2?"above":"below",this.clearNavItemDragExpandTimeout());const l="center"===o?s.id:s.parentId,d=this.getComputedNav().find((e=>e.id===this.draggedNavItemId));if(l===this.draggedNavItemId||"group"===d?.type&&null!==l)return this.navItemDropTargetId=null,void this.clearNavItemDragExpandTimeout();this.navItemDropTargetId=s.id,this.navItemDropPosition=o,i=!0})),i||(this.navItemDropTargetId=null,this.clearNavItemDragExpandTimeout()),this.requestUpdate()}clearNavItemDragExpandTimeout(){this.navItemDragExpandTimeout&&(clearTimeout(this.navItemDragExpandTimeout),this.navItemDragExpandTimeout=null)}expandNavGroupOnDrag(e){this.navItemDragExpandTimeout=window.setTimeout((()=>{this.navItemDropTargetId===e&&"center"===this.navItemDropPosition&&(this.navItemsExpanded.add(e),this.requestUpdate()),this.navItemDragExpandTimeout=null}),500)}executeNavItemDrop(){if(!this.draggedNavItemId||!this.navItemDropTargetId)return;const e=this.getComputedNav(),t=e.find((e=>e.id===this.draggedNavItemId)),i=e.find((e=>e.id===this.navItemDropTargetId));if(!t||!i)return;let r;if("center"===this.navItemDropPosition&&"group"===i.type){if(i.id===this.draggedNavItemId)return;r=i.id}else r=i.parentId;if(r===this.draggedNavItemId)return;const n=e.filter((e=>e.parentId===r&&e.id!==this.draggedNavItemId)).sort(((e,t)=>e.order-t.order)),s=this.pref.nav;let a;if("center"===this.navItemDropPosition)a=n.length>0?Math.max(...n.map((e=>e.order)))+1:0;else{const e=n.findIndex((e=>e.id===i.id));a=-1===e?0:"above"===this.navItemDropPosition?e:e+1,n.forEach(((e,t)=>{s[e.id]||(s[e.id]={}),s[e.id].order=t>=a?t+1:t}))}s[this.draggedNavItemId]||(s[this.draggedNavItemId]={}),s[this.draggedNavItemId].order=a,s[this.draggedNavItemId].parentId=r,this.pref.nav=s,this.requestUpdate()}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen}closeUserMenu(){this.isUserMenuOpen=!1}handleCustomize(){this.closeUserMenu(),this.startEditing()}renderNormalFooter(){if(!this.user)return W;const e=this.user.name.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2);return B`
|
|
920
191
|
<div class="user-menu-container">
|
|
921
|
-
${this.isUserMenuOpen?
|
|
192
|
+
${this.isUserMenuOpen?B`
|
|
922
193
|
<div class="user-menu">
|
|
923
194
|
<button class="user-menu__item" @click=${this.handleCustomize}>
|
|
924
195
|
Customize Navigation
|
|
925
196
|
</button>
|
|
926
197
|
</div>
|
|
927
|
-
`:
|
|
198
|
+
`:W}
|
|
928
199
|
<div class="user" @click=${this.toggleUserMenu}>
|
|
929
200
|
<div class="user__avatar">
|
|
930
|
-
${this.user.avatar?
|
|
201
|
+
${this.user.avatar?B`<img src=${this.user.avatar} alt=${this.user.name} />`:e}
|
|
931
202
|
</div>
|
|
932
203
|
<div class="user__info">
|
|
933
204
|
<div class="user__name">${this.user.name}</div>
|
|
934
|
-
${this.user.email?
|
|
205
|
+
${this.user.email?B`<div class="user__email">${this.user.email}</div>`:W}
|
|
935
206
|
</div>
|
|
936
207
|
</div>
|
|
937
208
|
</div>
|
|
938
|
-
`}renderEditFooter(){return
|
|
209
|
+
`}renderEditFooter(){return B`
|
|
939
210
|
<div class="edit-actions">
|
|
940
211
|
<button class="edit-actions__btn edit-actions__btn--primary" @click=${this.savePref}>
|
|
941
212
|
Save
|
|
@@ -949,17 +220,17 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
949
220
|
</button>
|
|
950
221
|
</div>
|
|
951
222
|
</div>
|
|
952
|
-
`}renderNavItem(e,t=!1){if("section"===e.type)return
|
|
223
|
+
`}renderNavItem(e,t=!1){if("section"===e.type)return B`
|
|
953
224
|
<div class="nav-section">${e.label}</div>
|
|
954
|
-
`;if("group"===e.type){const t=this.getNavItemChildren(e.id);return
|
|
225
|
+
`;if("group"===e.type){const t=this.getNavItemChildren(e.id);return B`
|
|
955
226
|
<button
|
|
956
|
-
class=${
|
|
227
|
+
class=${_e({"nav-item":!0,"nav-item--expanded":this.navItemsExpanded.has(e.id),"nav-item--hidden":this.isEditing&&!1===e.active,"nav-item--drop-above":this.navItemDropTargetId===e.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===e.id&&"below"===this.navItemDropPosition,"nav-item--drop-center":this.navItemDropTargetId===e.id&&"center"===this.navItemDropPosition})}
|
|
957
228
|
data-id="${e.id}"
|
|
958
229
|
@mousedown=${t=>this.handleNavItemMouseDown(t,e)}
|
|
959
230
|
@click=${t=>this.handleNavItemClick(t,e)}
|
|
960
231
|
@contextmenu=${t=>this.handleNavItemContextMenu(t,e)}
|
|
961
232
|
>
|
|
962
|
-
${this.navIconsDisplayed?
|
|
233
|
+
${this.navIconsDisplayed?B`<span class="nav-item__icon">${ye(e.icon||this.defaultNavItemIcon)}</span>`:W}
|
|
963
234
|
<span class="nav-item__label">${e.label}</span>
|
|
964
235
|
<svg
|
|
965
236
|
class="nav-item__chevron"
|
|
@@ -971,24 +242,24 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
971
242
|
<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
|
|
972
243
|
</svg>
|
|
973
244
|
</button>
|
|
974
|
-
<div class=${
|
|
245
|
+
<div class=${_e({"nav-group":!0,"nav-group--expanded":this.navItemsExpanded.has(e.id)})}>
|
|
975
246
|
${t.map((e=>this.renderNavItem(e,!0)))}
|
|
976
247
|
</div>
|
|
977
|
-
`}return
|
|
248
|
+
`}return B`
|
|
978
249
|
<a
|
|
979
|
-
class=${
|
|
250
|
+
class=${_e({"nav-item":!0,"nav-item--active":this.activeNavItemId===e.id,"nav-item--hidden":this.isEditing&&!1===e.active,"nav-item--drop-above":this.navItemDropTargetId===e.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===e.id&&"below"===this.navItemDropPosition})}
|
|
980
251
|
data-id="${e.id}"
|
|
981
252
|
href=${this.resolveUrl(e)}
|
|
982
|
-
target=${e.external?"_blank":
|
|
253
|
+
target=${e.external?"_blank":W}
|
|
983
254
|
@mousedown=${t=>this.handleNavItemMouseDown(t,e)}
|
|
984
255
|
@click=${t=>this.handleNavItemClick(t,e)}
|
|
985
256
|
@contextmenu=${t=>this.handleNavItemContextMenu(t,e)}
|
|
986
257
|
>
|
|
987
|
-
${this.navIconsDisplayed&&!t?
|
|
258
|
+
${this.navIconsDisplayed&&!t?B`<span class="nav-item__icon">${ye(e.icon||this.defaultNavItemIcon)}</span>`:W}
|
|
988
259
|
<span class="nav-item__label">${e.label}</span>
|
|
989
260
|
</a>
|
|
990
|
-
`}render(){const e=this.getNavItemChildren(null),t=this.getComputedNav().filter((e=>null===e.parentId)).length;return
|
|
991
|
-
<div class=${
|
|
261
|
+
`}render(){const e=this.getNavItemChildren(null),t=this.getComputedNav().filter((e=>null===e.parentId)).length;return B`
|
|
262
|
+
<div class=${_e({progress:!0,"progress--loading":this.pendingRequests>0})}>
|
|
992
263
|
<div class="progress__track"></div>
|
|
993
264
|
<div class="progress__bar progress__bar--primary">
|
|
994
265
|
<span class="progress__bar-inner"></span>
|
|
@@ -998,19 +269,19 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
998
269
|
</div>
|
|
999
270
|
</div>
|
|
1000
271
|
|
|
1001
|
-
${this.subbar?
|
|
272
|
+
${this.subbar?B`
|
|
1002
273
|
<kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
|
|
1003
274
|
<slot name="subbar"></slot>
|
|
1004
275
|
</kr-subbar>
|
|
1005
|
-
`:
|
|
276
|
+
`:W}
|
|
1006
277
|
|
|
1007
278
|
<div class="wrapper">
|
|
1008
|
-
<nav class=${
|
|
279
|
+
<nav class=${_e({nav:!0,"nav--scrolled":this.isNavScrolled,"nav--opened":!this.subbar||this.isNavOpened})}>
|
|
1009
280
|
<div class="nav-header" @click=${this.handleNavHeaderClick}>
|
|
1010
|
-
${this.label?
|
|
281
|
+
${this.label?B`<span class="nav-title">${this.label}</span>`:this.logo?B`<img class="nav-logo" src=${this.logo} alt="Logo" />`:W}
|
|
1011
282
|
</div>
|
|
1012
283
|
<div class="nav-content" @scroll=${this.handleNavScroll}>
|
|
1013
|
-
${t>20?
|
|
284
|
+
${t>20?B`
|
|
1014
285
|
<div class="nav-search">
|
|
1015
286
|
<div class="nav-search__wrapper">
|
|
1016
287
|
<span class="nav-search__icon">
|
|
@@ -1025,16 +296,16 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1025
296
|
.value=${this.navQuery}
|
|
1026
297
|
@input=${this.handleNavQueryChange}
|
|
1027
298
|
/>
|
|
1028
|
-
${this.navQuery?
|
|
299
|
+
${this.navQuery?B`
|
|
1029
300
|
<button class="nav-search__clear" @click=${this.handleNavQueryClear}>
|
|
1030
301
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
1031
302
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
|
1032
303
|
</svg>
|
|
1033
304
|
</button>
|
|
1034
|
-
`:
|
|
305
|
+
`:W}
|
|
1035
306
|
</div>
|
|
1036
307
|
</div>
|
|
1037
|
-
`:
|
|
308
|
+
`:W}
|
|
1038
309
|
<div class="nav-items">
|
|
1039
310
|
${e.map((e=>this.renderNavItem(e)))}
|
|
1040
311
|
</div>
|
|
@@ -1774,19 +1045,19 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1774
1045
|
transform: scaleX(0.08);
|
|
1775
1046
|
}
|
|
1776
1047
|
}
|
|
1777
|
-
`,Ie([
|
|
1048
|
+
`,Ie([ue()],e.Scaffold.prototype,"navItemsExpanded",void 0),Ie([ue()],e.Scaffold.prototype,"navQuery",void 0),Ie([ue()],e.Scaffold.prototype,"activeNavItemId",void 0),Ie([ue()],e.Scaffold.prototype,"isNavScrolled",void 0),Ie([ue()],e.Scaffold.prototype,"isNavOpened",void 0),Ie([ue()],e.Scaffold.prototype,"isEditing",void 0),Ie([ue()],e.Scaffold.prototype,"isUserMenuOpen",void 0),Ie([ue()],e.Scaffold.prototype,"pref",void 0),Ie([ue()],e.Scaffold.prototype,"draggedNavItemId",void 0),Ie([ue()],e.Scaffold.prototype,"navItemDropTargetId",void 0),Ie([ue()],e.Scaffold.prototype,"navItemDropPosition",void 0),Ie([ue()],e.Scaffold.prototype,"pendingRequests",void 0),Ie([ve({type:String})],e.Scaffold.prototype,"logo",void 0),Ie([ve({type:String})],e.Scaffold.prototype,"label",void 0),Ie([ve({type:String,attribute:"home-url"})],e.Scaffold.prototype,"homeUrl",void 0),Ie([ve({type:String,reflect:!0})],e.Scaffold.prototype,"scheme",void 0),Ie([ve({type:Array})],e.Scaffold.prototype,"nav",void 0),Ie([ve({type:Boolean,attribute:"nav-icons-displayed",reflect:!0})],e.Scaffold.prototype,"navIconsDisplayed",void 0),Ie([ve({type:Boolean,attribute:"nav-expanded"})],e.Scaffold.prototype,"navExpanded",void 0),Ie([ve({type:Object})],e.Scaffold.prototype,"user",void 0),Ie([ve({type:Boolean})],e.Scaffold.prototype,"subbar",void 0),Ie([ve({type:Array})],e.Scaffold.prototype,"breadcrumbs",void 0),e.Scaffold=Ie([ce("kr-scaffold")],e.Scaffold);var ke=function(e,t,i,r){var n,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};e.ScreenNav=class extends le{constructor(){super(...arguments),this.label="",this.subLabel="",this.navItems=[],this.activeId=""}handleNavItemClick(e,t){const i=new CustomEvent("nav-item-click",{detail:{item:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&e.preventDefault()}render(){return B`
|
|
1778
1049
|
<nav class="nav">
|
|
1779
|
-
${this.label?
|
|
1050
|
+
${this.label?B`
|
|
1780
1051
|
<div class="nav-header">
|
|
1781
1052
|
<div class="nav-header__text">
|
|
1782
|
-
${this.subLabel?
|
|
1053
|
+
${this.subLabel?B`<div class="nav-header__subtitle">${this.subLabel}</div>`:W}
|
|
1783
1054
|
<div class="nav-header__title">${this.label}</div>
|
|
1784
1055
|
</div>
|
|
1785
1056
|
</div>
|
|
1786
|
-
`:
|
|
1057
|
+
`:W}
|
|
1787
1058
|
<div class="nav-content">
|
|
1788
1059
|
<div class="nav-items">
|
|
1789
|
-
${this.navItems.map((e=>
|
|
1060
|
+
${this.navItems.map((e=>B`
|
|
1790
1061
|
<a
|
|
1791
1062
|
class="nav-item ${e.id===this.activeId?"nav-item--active":""}"
|
|
1792
1063
|
href=${e.url||"#"}
|
|
@@ -1811,8 +1082,8 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1811
1082
|
|
|
1812
1083
|
.nav {
|
|
1813
1084
|
width: 200px;
|
|
1814
|
-
background:
|
|
1815
|
-
|
|
1085
|
+
background: white;
|
|
1086
|
+
border-right: 1px solid #e5e7eb;
|
|
1816
1087
|
display: flex;
|
|
1817
1088
|
flex-direction: column;
|
|
1818
1089
|
flex-shrink: 0;
|
|
@@ -1829,7 +1100,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1829
1100
|
}
|
|
1830
1101
|
|
|
1831
1102
|
.nav-header__title {
|
|
1832
|
-
font-size:
|
|
1103
|
+
font-size: 18px;
|
|
1833
1104
|
font-weight: 600;
|
|
1834
1105
|
color: #111827;
|
|
1835
1106
|
white-space: nowrap;
|
|
@@ -1894,7 +1165,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1894
1165
|
flex: 1;
|
|
1895
1166
|
overflow-y: auto;
|
|
1896
1167
|
}
|
|
1897
|
-
`,
|
|
1168
|
+
`,ke([ve({type:String})],e.ScreenNav.prototype,"label",void 0),ke([ve({type:String})],e.ScreenNav.prototype,"subLabel",void 0),ke([ve({type:Array})],e.ScreenNav.prototype,"navItems",void 0),ke([ve({type:String})],e.ScreenNav.prototype,"activeId",void 0),e.ScreenNav=ke([ce("kr-screen-nav")],e.ScreenNav);var Ee=function(e,t,i,r){var n,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};e.ScreenDetail=class extends le{constructor(){super(...arguments),this.title=""}render(){return B`
|
|
1898
1169
|
<div class="header">
|
|
1899
1170
|
<h2 class="header__title">${this.title}</h2>
|
|
1900
1171
|
<div class="header__actions">
|
|
@@ -1950,8 +1221,8 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1950
1221
|
width: 100%;
|
|
1951
1222
|
max-width: 700px;
|
|
1952
1223
|
}
|
|
1953
|
-
`,Ee([
|
|
1954
|
-
${this.menu?
|
|
1224
|
+
`,Ee([ve({type:String})],e.ScreenDetail.prototype,"title",void 0),e.ScreenDetail=Ee([ce("kr-screen-detail")],e.ScreenDetail);var Se=function(e,t,i,r){var n,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};e.Subbar=class extends le{constructor(){super(...arguments),this.breadcrumbs=[],this.menu=!1}_handleMenuClick(){this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}resolveUrl(e){if(!e.url)return"#";const t=e.url.startsWith("/")?e.url.slice(1):e.url,i=document.querySelector("base")?.getAttribute("href")||"/";return(i.endsWith("/")?i:i+"/")+t}_handleBreadcrumbClick(e,t,i){if(i||!t.url)return void e.preventDefault();if(e.ctrlKey||e.metaKey||1===e.button)return;const r=new CustomEvent("breadcrumb-click",{detail:{breadcrumb:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r),r.defaultPrevented&&e.preventDefault()}render(){return B`
|
|
1225
|
+
${this.menu?B`
|
|
1955
1226
|
<div class="menu" @click=${this._handleMenuClick}>
|
|
1956
1227
|
<svg class="menu__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1957
1228
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
@@ -1959,12 +1230,12 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1959
1230
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
1960
1231
|
</svg>
|
|
1961
1232
|
</div>
|
|
1962
|
-
`:
|
|
1233
|
+
`:W}
|
|
1963
1234
|
<div class="breadcrumbs">
|
|
1964
|
-
${this.breadcrumbs.map(((e,t)=>{const i=t===this.breadcrumbs.length-1;return
|
|
1965
|
-
${t>0?
|
|
1235
|
+
${this.breadcrumbs.map(((e,t)=>{const i=t===this.breadcrumbs.length-1;return B`
|
|
1236
|
+
${t>0?B`<span class="breadcrumb-separator">/</span>`:""}
|
|
1966
1237
|
<a
|
|
1967
|
-
class=${
|
|
1238
|
+
class=${_e({breadcrumb:!0,"breadcrumb--current":i})}
|
|
1968
1239
|
href=${this.resolveUrl(e)}
|
|
1969
1240
|
@click=${t=>this._handleBreadcrumbClick(t,e,i)}
|
|
1970
1241
|
>${e.label}</a>
|
|
@@ -2040,5 +1311,5 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
2040
1311
|
width: 18px;
|
|
2041
1312
|
height: 18px;
|
|
2042
1313
|
}
|
|
2043
|
-
`,Se([
|
|
1314
|
+
`,Se([ve({type:Array})],e.Subbar.prototype,"breadcrumbs",void 0),Se([ve({type:Boolean})],e.Subbar.prototype,"menu",void 0),e.Subbar=Se([ce("kr-subbar")],e.Subbar)})),function(e){Object.keys(e).forEach((function(t){t.startsWith("KR")&&"function"==typeof e[t]&&(e[t.slice(2)]=e[t],delete e[t])}))}(krApp);
|
|
2044
1315
|
//# sourceMappingURL=krubble-app.umd.min.js.map
|