@kodaris/krubble-app-components 1.0.61 → 1.0.63
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/chatbot.d.ts +158 -0
- package/dist/chatbot.d.ts.map +1 -0
- package/dist/chatbot.js +1320 -0
- package/dist/chatbot.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/krubble-app.bundled.js +1378 -50
- package/dist/krubble-app.bundled.js.map +1 -1
- package/dist/krubble-app.bundled.min.js +790 -71
- package/dist/krubble-app.bundled.min.js.map +1 -1
- package/dist/krubble-app.umd.js +1377 -49
- package/dist/krubble-app.umd.js.map +1 -1
- package/dist/krubble-app.umd.min.js +790 -71
- package/dist/krubble-app.umd.min.js.map +1 -1
- package/package.json +5 -1
|
@@ -1,56 +1,67 @@
|
|
|
1
|
-
import{KRContextMenu as
|
|
1
|
+
import{KRContextMenu as t,KRDialog as e}from"@kodaris/krubble-components";import{KRHttp as i}from"@kodaris/krubble-http";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2019 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/const
|
|
6
|
+
*/const s=globalThis,a=s.ShadowRoot&&(void 0===s.ShadyCSS||s.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,r=Symbol(),n=new WeakMap;let o=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(a&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&n.set(e,t))}return t}toString(){return this.cssText}};const l=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new o(i,t,r)},d=a?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,r))(e)})(t):t
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/,{is:c,defineProperty:h,getOwnPropertyDescriptor:p,getOwnPropertyNames:
|
|
11
|
+
*/,{is:c,defineProperty:h,getOwnPropertyDescriptor:p,getOwnPropertyNames:u,getOwnPropertySymbols:g,getPrototypeOf:v}=Object,f=globalThis,b=f.trustedTypes,m=b?b.emptyScript:"",_=f.reactiveElementPolyfillSupport,x=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},w=(t,e)=>!c(t,e),k={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:w};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;let $=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=k){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&h(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:a}=p(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:s,set(e){const r=s?.call(this);a?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??k}static _$Ei(){if(this.hasOwnProperty(x("elementProperties")))return;const t=v(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(x("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(x("properties"))){const t=this.properties,e=[...u(t),...g(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(d(t))}else void 0!==t&&e.push(d(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.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((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(a)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),a=s.litNonce;void 0!==a&&e.setAttribute("nonce",a),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const a=(void 0!==i.converter?.toAttribute?i.converter:y).toAttribute(e,i.type);this._$Em=t,null==a?this.removeAttribute(s):this.setAttribute(s,a),this._$Em=null}}_$AK(t,e){const i=this.constructor,s=i._$Eh.get(t);if(void 0!==s&&this._$Em!==s){const t=i.getPropertyOptions(s),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=s;const r=a.fromAttribute(e,t.type);this[s]=r??this._$Ej?.get(s)??r,this._$Em=null}}requestUpdate(t,e,i,s=!1,a){if(void 0!==t){const r=this.constructor;if(!1===s&&(a=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??w)(a,e)||i.useDefault&&i.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:s,wrapped:a},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==a||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===s&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$AL.has(e)||void 0===s||this.C(e,void 0,i,s)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[x("elementProperties")]=new Map,$[x("finalized")]=new Map,_?.({ReactiveElement:$}),(f.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 E=globalThis,I=E.trustedTypes,S=I?I.createPolicy("lit-html",{createHTML:t=>t}):void 0,A="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,N="?"+C,z=`<${N}>`,D=document,M=()=>D.createComment(""),P=t=>null===t||"object"!=typeof t&&"function"!=typeof t,T=Array.isArray,R="[ \t\n\f\r]",U=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,O=/-->/g,L=/>/g,H=RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),j=/'/g,q=/"/g,X=/^(?:script|style|textarea|title)$/i,B=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),F=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),Y=new WeakMap,V=D.createTreeWalker(D,129);function K(t,e){if(!T(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(e):e}const Q=(t,e)=>{const i=t.length-1,s=[];let a,r=2===e?"<svg>":3===e?"<math>":"",n=U;for(let e=0;e<i;e++){const i=t[e];let o,l,d=-1,c=0;for(;c<i.length&&(n.lastIndex=c,l=n.exec(i),null!==l);)c=n.lastIndex,n===U?"!--"===l[1]?n=O:void 0!==l[1]?n=L:void 0!==l[2]?(X.test(l[2])&&(a=RegExp("</"+l[2],"g")),n=H):void 0!==l[3]&&(n=H):n===H?">"===l[0]?(n=a??U,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,o=l[1],n=void 0===l[3]?H:'"'===l[3]?q:j):n===q||n===j?n=H:n===O||n===L?n=U:(n=H,a=void 0);const h=n===H&&t[e+1].startsWith("/>")?" ":"";r+=n===U?i+z:d>=0?(s.push(o),i.slice(0,d)+A+i.slice(d)+C+h):i+C+(-2===d?e:h)}return[K(t,r+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]};class G{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let a=0,r=0;const n=t.length-1,o=this.parts,[l,d]=Q(t,e);if(this.el=G.createElement(l,i),V.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=V.nextNode())&&o.length<n;){if(1===s.nodeType){if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(A)){const e=d[r++],i=s.getAttribute(t).split(C),n=/([.?@])?(.*)/.exec(e);o.push({type:1,index:a,name:n[2],strings:i,ctor:"."===n[1]?it:"?"===n[1]?st:"@"===n[1]?at:et}),s.removeAttribute(t)}else t.startsWith(C)&&(o.push({type:6,index:a}),s.removeAttribute(t));if(X.test(s.tagName)){const t=s.textContent.split(C),e=t.length-1;if(e>0){s.textContent=I?I.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],M()),V.nextNode(),o.push({type:2,index:++a});s.append(t[e],M())}}}else if(8===s.nodeType)if(s.data===N)o.push({type:2,index:a});else{let t=-1;for(;-1!==(t=s.data.indexOf(C,t+1));)o.push({type:7,index:a}),t+=C.length-1}a++}}static createElement(t,e){const i=D.createElement("template");return i.innerHTML=t,i}}function J(t,e,i=t,s){if(e===F)return e;let a=void 0!==s?i._$Co?.[s]:i._$Cl;const r=P(e)?void 0:e._$litDirective$;return a?.constructor!==r&&(a?._$AO?.(!1),void 0===r?a=void 0:(a=new r(t),a._$AT(t,i,s)),void 0!==s?(i._$Co??=[])[s]=a:i._$Cl=a),void 0!==a&&(e=J(t,a._$AS(t,e.values),a,s)),e}class Z{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,s=(t?.creationScope??D).importNode(e,!0);V.currentNode=s;let a=V.nextNode(),r=0,n=0,o=i[0];for(;void 0!==o;){if(r===o.index){let e;2===o.type?e=new tt(a,a.nextSibling,this,t):1===o.type?e=new o.ctor(a,o.name,o.strings,this,t):6===o.type&&(e=new rt(a,this,t)),this._$AV.push(e),o=i[++n]}r!==o?.index&&(a=V.nextNode(),r++)}return V.currentNode=D,s}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class tt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=J(this,t,e),P(t)?t===W||null==t||""===t?(this._$AH!==W&&this._$AR(),this._$AH=W):t!==this._$AH&&t!==F&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>T(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==W&&P(this._$AH)?this._$AA.nextSibling.data=t:this.T(D.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=G.createElement(K(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(e);else{const t=new Z(s,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=Y.get(t.strings);return void 0===e&&Y.set(t.strings,e=new G(t)),e}k(t){T(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const a of t)s===e.length?e.push(i=new tt(this.O(M()),this.O(M()),this,this.options)):i=e[s],i._$AI(a),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,a){this.type=1,this._$AH=W,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=a,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=W}_$AI(t,e=this,i,s){const a=this.strings;let r=!1;if(void 0===a)t=J(this,t,e,0),r=!P(t)||t!==this._$AH&&t!==F,r&&(this._$AH=t);else{const s=t;let n,o;for(t=a[0],n=0;n<a.length-1;n++)o=J(this,s[i+n],e,n),o===F&&(o=this._$AH[n]),r||=!P(o)||o!==this._$AH[n],o===W?t=W:t!==W&&(t+=(o??"")+a[n+1]),this._$AH[n]=o}r&&!s&&this.j(t)}j(t){t===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class it extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===W?void 0:t}}class st extends et{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==W)}}class at extends et{constructor(t,e,i,s,a){super(t,e,i,s,a),this.type=5}_$AI(t,e=this){if((t=J(this,t,e,0)??W)===F)return;const i=this._$AH,s=t===W&&i!==W||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,a=t!==W&&(i===W||s);s&&this.element.removeEventListener(this.name,this,i),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){J(this,t)}}const nt=E.litHtmlPolyfillSupport;nt?.(G,tt),(E.litHtmlVersions??=[]).push("3.3.2");const ot=globalThis;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/let
|
|
22
|
+
*/let lt=class extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const s=i?.renderBefore??e;let a=s._$litPart$;if(void 0===a){const t=i?.renderBefore??null;s._$litPart$=a=new tt(e.insertBefore(M(),t),t,void 0,i??{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return F}};lt._$litElement$=!0,lt.finalized=!0,ot.litElementHydrateSupport?.({LitElement:lt});const dt=ot.litElementPolyfillSupport;dt?.({LitElement:lt}),(ot.litElementVersions??=[]).push("4.2.2");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
27
|
*/
|
|
28
|
-
const
|
|
28
|
+
const ct=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
32
32
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
33
|
-
*/,
|
|
33
|
+
*/,ht={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:w},pt=(t=ht,e,i)=>{const{kind:s,metadata:a}=i;let r=globalThis.litPropertyMetadata.get(a);if(void 0===r&&globalThis.litPropertyMetadata.set(a,r=new Map),"setter"===s&&((t=Object.create(t)).wrapped=!0),r.set(i.name,t),"accessor"===s){const{name:s}=i;return{set(i){const a=e.get.call(this);e.set.call(this,i),this.requestUpdate(s,a,t,!0,i)},init(e){return void 0!==e&&this.C(s,void 0,t,e),e}}}if("setter"===s){const{name:s}=i;return function(i){const a=this[s];e.call(this,i),this.requestUpdate(s,a,t,!0,i)}}throw Error("Unsupported decorator location: "+s)};function ut(t){return(e,i)=>"object"==typeof i?pt(t,e,i):((t,e,i)=>{const s=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),s?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
-
*/}function
|
|
38
|
+
*/}function gt(t){return ut({...t,state:!0,attribute:!1})}
|
|
39
39
|
/**
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2017 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
43
|
-
*/
|
|
43
|
+
*/
|
|
44
|
+
/**
|
|
45
|
+
* @license
|
|
46
|
+
* Copyright 2017 Google LLC
|
|
47
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
48
|
+
*/
|
|
49
|
+
function vt(t,e){return(e,i,s)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}
|
|
44
50
|
/**
|
|
45
51
|
* @license
|
|
46
52
|
* Copyright 2017 Google LLC
|
|
47
53
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
48
|
-
*/
|
|
54
|
+
*/const ft=1,bt=2,mt=t=>(...e)=>({_$litDirective$:t,values:e});class _t{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
55
|
+
/**
|
|
56
|
+
* @license
|
|
57
|
+
* Copyright 2017 Google LLC
|
|
58
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
|
+
*/let xt=class extends _t{constructor(t){if(super(t),this.it=W,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===W||null==t)return this._t=void 0,this.it=t;if(t===F)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};xt.directiveName="unsafeHTML",xt.resultType=1;const yt=mt(xt),wt=mt(class extends _t{constructor(t){if(super(t),t.type!==ft||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const i=t.element.classList;for(const t of this.st)t in e||(i.remove(t),this.st.delete(t));for(const t in e){const s=!!e[t];s===this.st.has(t)||this.nt?.has(t)||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return F}});
|
|
49
60
|
/**
|
|
50
61
|
* @license
|
|
51
62
|
* Copyright 2018 Google LLC
|
|
52
63
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
|
-
*/var
|
|
64
|
+
*/var kt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let $t=class extends lt{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(t){const e=t.target;this.label=e.value}handleIconInput(t){const e=t.target;this.icon=e.value}handleUrlInput(t){const e=t.target;this.url=e.value}handleActiveChange(t){this.active=t.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(t){"Enter"===t.key&&this.handleSave()}render(){return B`
|
|
54
65
|
<h2>Edit Navigation Item</h2>
|
|
55
66
|
|
|
56
67
|
<div class="form-group">
|
|
@@ -102,7 +113,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
102
113
|
<button class="btn-cancel" @click=${this.handleCancel}>Cancel</button>
|
|
103
114
|
<button class="btn-save" @click=${this.handleSave}>Save</button>
|
|
104
115
|
</div>
|
|
105
|
-
`}}
|
|
116
|
+
`}};$t.styles=l`
|
|
106
117
|
:host {
|
|
107
118
|
display: block;
|
|
108
119
|
width: 360px;
|
|
@@ -187,9 +198,9 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
187
198
|
.btn-save:hover {
|
|
188
199
|
background: #d4f472;
|
|
189
200
|
}
|
|
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};let ke=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.navEnabled=!0,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.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.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(t,i){this.isEditing&&(t.preventDefault(),e.open({x:t.clientX,y:t.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.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 F`
|
|
201
|
+
`,kt([gt()],$t.prototype,"label",void 0),kt([gt()],$t.prototype,"icon",void 0),kt([gt()],$t.prototype,"url",void 0),kt([gt()],$t.prototype,"active",void 0),$t=kt([ct("kr-nav-item-edit")],$t);var Et=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let It=class extends lt{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.navEnabled=!0,this.breadcrumbs=[],this.boundHandleMouseMove=this.handleMouseMove.bind(this),this.boundHandleMouseUp=this.handleMouseUp.bind(this)}connectedCallback(){super.connectedCallback(),this.loadPref(),this.installFetchInterceptor()}updated(t){super.updated(t),t.has("nav")&&this.nav.length>0&&(this.updateActiveNavItem(),this.navExpanded&&!this.navInitialized&&(this.navInitialized=!0,this.getComputedNav().filter((t=>"group"===t.type)).forEach((t=>this.navItemsExpanded.add(t.id)))))}disconnectedCallback(){super.disconnectedCallback(),this.uninstallFetchInterceptor()}installFetchInterceptor(){if(this.originalFetch)return;const t=this;this.originalFetch=window.fetch.bind(window);const e=this.originalFetch;window.fetch=function(...i){return t.pendingRequests++,e(...i).finally((()=>{t.pendingRequests--}))},this.originalXhrOpen=XMLHttpRequest.prototype.open;const i=this.originalXhrOpen;XMLHttpRequest.prototype.open=function(e,s,a=!0,r,n){return t.pendingRequests++,this.addEventListener("loadend",(()=>{t.pendingRequests--}),{once:!0}),i.call(this,e,s,a,r,n)}}uninstallFetchInterceptor(){this.originalFetch&&(window.fetch=this.originalFetch,this.originalFetch=null),this.originalXhrOpen&&(XMLHttpRequest.prototype.open=this.originalXhrOpen,this.originalXhrOpen=null)}resolveUrl(t){if(!t.url)return"#";if(t.external)return t.url;const e=t.url.startsWith("/")?t.url.slice(1):t.url,i=document.querySelector("base")?.getAttribute("href")||"/";return(i.endsWith("/")?i:i+"/")+e}getComputedNav(){const t=[];return this.nav.forEach(((e,i)=>{const s=this.pref.nav[e.id];t.push({...e,...s,order:s?.order??e.order??i,parentId:s?.parentId??null}),"group"===e.type&&e.children&&e.children.forEach(((i,s)=>{const a=this.pref.nav[i.id];t.push({...i,...a,order:a?.order??i.order??s,parentId:void 0!==a?.parentId?a.parentId:e.id})}))})),Object.entries(this.pref.nav).forEach((([e,i])=>{e.startsWith("custom")&&i.type&&i.label&&t.push({id:e,type:i.type,label:i.label,icon:i.icon,url:i.url,active:i.active,order:i.order??t.length,parentId:i.parentId??null})})),t}getNavItemChildren(t){let e=this.getComputedNav().filter((e=>e.parentId===t)).sort(((t,e)=>t.order-e.order));if(this.isEditing||(e=e.filter((t=>!1!==t.active))),this.navQuery){const i=this.navQuery.toLowerCase(),s=this.getComputedNav();if(null!==t){const a=s.find((e=>e.id===t));if(a?.label.toLowerCase().includes(i))return e}e=e.filter((t=>"group"===t.type?t.label.toLowerCase().includes(i)||s.some((e=>e.parentId===t.id&&!1!==e.active&&e.label.toLowerCase().includes(i))):t.label.toLowerCase().includes(i)))}return e}handleNavQueryChange(t){this.navQuery=t.target.value,this.navQuery?this.getComputedNav().forEach((t=>{"group"===t.type&&this.navItemsExpanded.add(t.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 t=new CustomEvent("nav-item-click",{detail:{item:{url:this.homeUrl}},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(window.location.href=this.homeUrl)}handleNavScroll(t){this.isNavScrolled=t.target.scrollTop>0}toggleNavItem(t){const e=this.shadowRoot?.querySelector(`.nav-item[data-id="${t}"]`),i=e?.nextElementSibling;i&&(this.navItemsExpanded.has(t)?(this.navItemsExpanded.delete(t),i.animate([{height:`${i.scrollHeight}px`},{height:"0px"}],{duration:300,easing:"ease-in-out"}).onfinish=()=>{i.classList.remove("nav-group--expanded")}):(this.navItemsExpanded.add(t),i.classList.add("nav-group--expanded"),i.animate([{height:"0px"},{height:`${i.scrollHeight}px`}],{duration:300,easing:"ease-in-out"})),this.requestUpdate())}handleNavItemClick(t,e){if("group"===e.type)this.toggleNavItem(e.id);else{if(t.ctrlKey||t.metaKey||1===t.button)return;this.activeNavItemId=e.id;const i=new CustomEvent("nav-item-click",{detail:{item:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&t.preventDefault()}}updateActiveNavItem(){const t=window.location.pathname,e=this.getComputedNav().filter((t=>"item"===t.type&&t.url));let i=null,s=0;for(const a of e){const e=this.resolveUrl(a);t.startsWith(e)&&e.length>s&&(i=a,s=e.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 t=this.pref.uuid?`/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`:"/api/system/preference/json/scaffold?global=true";i.fetch({url:t,method:this.pref.uuid?"PUT":"POST",body:JSON.stringify({nav:this.pref.nav})}).then((t=>t.json())).then((t=>{this.pref=t.data,this.isEditing=!1})).catch((t=>{console.error("Failed to save nav customizations:",t)}))}loadPref(){i.fetch({url:"/api/system/preference/json/scaffold?global=true",method:"GET"}).then((t=>t.json())).then((t=>{const e=t?.data?.[0];e&&(this.pref=e)})).catch((()=>{}))}handleNavItemContextMenu(e,i){this.isEditing&&(e.preventDefault(),t.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((t=>{if(t)switch(t.id){case"edit":this.openNavItemEdit(i);break;case"add-above":this.addNavItem(i,"above");break;case"add-below":this.addNavItem(i,"below")}})))}openNavItemEdit(t){e.open($t,{data:t}).afterClosed().then((e=>{const i=e;i&&(this.pref.nav[t.id]||(this.pref.nav[t.id]={}),this.pref.nav[t.id]={...this.pref.nav[t.id],...i},this.requestUpdate())}))}addNavItem(t,e){const i=`custom-${Date.now()}`,s=this.getComputedNav().filter((e=>e.parentId===t.parentId)).sort(((t,e)=>t.order-e.order)),a=s.findIndex((e=>e.id===t.id)),r="above"===e?a:a+1;s.forEach(((t,e)=>{e>=r&&(this.pref.nav[t.id]||(this.pref.nav[t.id]={}),this.pref.nav[t.id].order=e+1)}));const n={id:i,type:"item",label:"New Item",order:r,parentId:t.parentId,active:!0};this.pref.nav[i]=n,this.requestUpdate(),this.openNavItemEdit(n)}handleNavItemMouseDown(t,e){this.isEditing&&(t.preventDefault(),this.draggedNavItemId=e.id,this.navItemDragStartY=t.clientY,this.isNavItemDragging=!1,document.addEventListener("mousemove",this.boundHandleMouseMove),document.addEventListener("mouseup",this.boundHandleMouseUp))}handleMouseMove(t){if(this.draggedNavItemId){if(!this.isNavItemDragging&&Math.abs(t.clientY-this.navItemDragStartY)>5){this.isNavItemDragging=!0,this.classList.add("kr-scaffold--dragging");const e=this.getComputedNav().find((t=>t.id===this.draggedNavItemId));e&&(this.navItemDragPreview=document.createElement("div"),this.navItemDragPreview.className="nav-item-drag-preview",this.navItemDragPreview.textContent=e.label,this.navItemDragPreview.style.left=`${t.clientX+10}px`,this.navItemDragPreview.style.top=t.clientY-20+"px",this.shadowRoot?.appendChild(this.navItemDragPreview))}this.isNavItemDragging&&(this.navItemDragPreview&&(this.navItemDragPreview.style.left=`${t.clientX+10}px`,this.navItemDragPreview.style.top=t.clientY-20+"px"),this.updateNavItemDropTarget(t))}}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(t){const e=this.shadowRoot?.querySelectorAll(".nav-item[data-id]");if(!e)return;let i=!1;e.forEach((e=>{const s=e.getBoundingClientRect(),a=e.getAttribute("data-id");if(!a||a===this.draggedNavItemId)return;if(t.clientX<s.left||t.clientX>s.right||t.clientY<s.top||t.clientY>s.bottom)return;const r=this.getComputedNav().find((t=>t.id===a));if(!r)return;const n=t.clientY-s.top;let o;"group"===r.type?n<s.height/3?(o="above",this.clearNavItemDragExpandTimeout()):n>2*s.height/3?(o="below",this.clearNavItemDragExpandTimeout()):(o="center",this.navItemsExpanded.has(r.id)||this.navItemDragExpandTimeout||this.expandNavGroupOnDrag(r.id)):(o=n<s.height/2?"above":"below",this.clearNavItemDragExpandTimeout());const l="center"===o?r.id:r.parentId,d=this.getComputedNav().find((t=>t.id===this.draggedNavItemId));if(l===this.draggedNavItemId||"group"===d?.type&&null!==l)return this.navItemDropTargetId=null,void this.clearNavItemDragExpandTimeout();this.navItemDropTargetId=r.id,this.navItemDropPosition=o,i=!0})),i||(this.navItemDropTargetId=null,this.clearNavItemDragExpandTimeout()),this.requestUpdate()}clearNavItemDragExpandTimeout(){this.navItemDragExpandTimeout&&(clearTimeout(this.navItemDragExpandTimeout),this.navItemDragExpandTimeout=null)}expandNavGroupOnDrag(t){this.navItemDragExpandTimeout=window.setTimeout((()=>{this.navItemDropTargetId===t&&"center"===this.navItemDropPosition&&(this.navItemsExpanded.add(t),this.requestUpdate()),this.navItemDragExpandTimeout=null}),500)}executeNavItemDrop(){if(!this.draggedNavItemId||!this.navItemDropTargetId)return;const t=this.getComputedNav(),e=t.find((t=>t.id===this.draggedNavItemId)),i=t.find((t=>t.id===this.navItemDropTargetId));if(!e||!i)return;let s;if("center"===this.navItemDropPosition&&"group"===i.type){if(i.id===this.draggedNavItemId)return;s=i.id}else s=i.parentId;if(s===this.draggedNavItemId)return;const a=t.filter((t=>t.parentId===s&&t.id!==this.draggedNavItemId)).sort(((t,e)=>t.order-e.order)),r=this.pref.nav;let n;if("center"===this.navItemDropPosition)n=a.length>0?Math.max(...a.map((t=>t.order)))+1:0;else{const t=a.findIndex((t=>t.id===i.id));n=-1===t?0:"above"===this.navItemDropPosition?t:t+1,a.forEach(((t,e)=>{r[t.id]||(r[t.id]={}),r[t.id].order=e>=n?e+1:e}))}r[this.draggedNavItemId]||(r[this.draggedNavItemId]={}),r[this.draggedNavItemId].order=n,r[this.draggedNavItemId].parentId=s,this.pref.nav=r,this.requestUpdate()}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen}closeUserMenu(){this.isUserMenuOpen=!1}handleCustomize(){this.closeUserMenu(),this.startEditing()}renderNormalFooter(){if(!this.user)return W;const t=this.user.name.split(" ").map((t=>t[0])).join("").toUpperCase().slice(0,2);return B`
|
|
191
202
|
<div class="user-menu-container">
|
|
192
|
-
${this.isUserMenuOpen?
|
|
203
|
+
${this.isUserMenuOpen?B`
|
|
193
204
|
<div class="user-menu">
|
|
194
205
|
<button class="user-menu__item" @click=${this.handleCustomize}>
|
|
195
206
|
Customize Navigation
|
|
@@ -198,15 +209,15 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
198
209
|
`:W}
|
|
199
210
|
<div class="user" @click=${this.toggleUserMenu}>
|
|
200
211
|
<div class="user__avatar">
|
|
201
|
-
${this.user.avatar?
|
|
212
|
+
${this.user.avatar?B`<img src=${this.user.avatar} alt=${this.user.name} />`:t}
|
|
202
213
|
</div>
|
|
203
214
|
<div class="user__info">
|
|
204
215
|
<div class="user__name">${this.user.name}</div>
|
|
205
|
-
${this.user.email?
|
|
216
|
+
${this.user.email?B`<div class="user__email">${this.user.email}</div>`:W}
|
|
206
217
|
</div>
|
|
207
218
|
</div>
|
|
208
219
|
</div>
|
|
209
|
-
`}renderEditFooter(){return
|
|
220
|
+
`}renderEditFooter(){return B`
|
|
210
221
|
<div class="edit-actions">
|
|
211
222
|
<button class="edit-actions__btn edit-actions__btn--primary" @click=${this.savePref}>
|
|
212
223
|
Save
|
|
@@ -220,18 +231,18 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
220
231
|
</button>
|
|
221
232
|
</div>
|
|
222
233
|
</div>
|
|
223
|
-
`}renderNavItem(e
|
|
224
|
-
<div class="nav-section">${
|
|
225
|
-
`;if("group"===
|
|
234
|
+
`}renderNavItem(t,e=!1){if("section"===t.type)return B`
|
|
235
|
+
<div class="nav-section">${t.label}</div>
|
|
236
|
+
`;if("group"===t.type){const e=this.getNavItemChildren(t.id);return B`
|
|
226
237
|
<button
|
|
227
|
-
class=${
|
|
228
|
-
data-id="${
|
|
229
|
-
@mousedown=${
|
|
230
|
-
@click=${
|
|
231
|
-
@contextmenu=${
|
|
238
|
+
class=${wt({"nav-item":!0,"nav-item--expanded":this.navItemsExpanded.has(t.id),"nav-item--hidden":this.isEditing&&!1===t.active,"nav-item--drop-above":this.navItemDropTargetId===t.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===t.id&&"below"===this.navItemDropPosition,"nav-item--drop-center":this.navItemDropTargetId===t.id&&"center"===this.navItemDropPosition})}
|
|
239
|
+
data-id="${t.id}"
|
|
240
|
+
@mousedown=${e=>this.handleNavItemMouseDown(e,t)}
|
|
241
|
+
@click=${e=>this.handleNavItemClick(e,t)}
|
|
242
|
+
@contextmenu=${e=>this.handleNavItemContextMenu(e,t)}
|
|
232
243
|
>
|
|
233
|
-
${this.navIconsDisplayed?
|
|
234
|
-
<span class="nav-item__label">${
|
|
244
|
+
${this.navIconsDisplayed?B`<span class="nav-item__icon">${yt(t.icon||this.defaultNavItemIcon)}</span>`:W}
|
|
245
|
+
<span class="nav-item__label">${t.label}</span>
|
|
235
246
|
<svg
|
|
236
247
|
class="nav-item__chevron"
|
|
237
248
|
viewBox="0 0 24 24"
|
|
@@ -242,24 +253,24 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
242
253
|
<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
|
|
243
254
|
</svg>
|
|
244
255
|
</button>
|
|
245
|
-
<div class=${
|
|
246
|
-
${
|
|
256
|
+
<div class=${wt({"nav-group":!0,"nav-group--expanded":this.navItemsExpanded.has(t.id)})}>
|
|
257
|
+
${e.map((t=>this.renderNavItem(t,!0)))}
|
|
247
258
|
</div>
|
|
248
|
-
`}return
|
|
259
|
+
`}return B`
|
|
249
260
|
<a
|
|
250
|
-
class=${
|
|
251
|
-
data-id="${
|
|
252
|
-
href=${this.resolveUrl(
|
|
253
|
-
target=${
|
|
254
|
-
@mousedown=${
|
|
255
|
-
@click=${
|
|
256
|
-
@contextmenu=${
|
|
261
|
+
class=${wt({"nav-item":!0,"nav-item--active":this.activeNavItemId===t.id,"nav-item--hidden":this.isEditing&&!1===t.active,"nav-item--drop-above":this.navItemDropTargetId===t.id&&"above"===this.navItemDropPosition,"nav-item--drop-below":this.navItemDropTargetId===t.id&&"below"===this.navItemDropPosition})}
|
|
262
|
+
data-id="${t.id}"
|
|
263
|
+
href=${this.resolveUrl(t)}
|
|
264
|
+
target=${t.external?"_blank":W}
|
|
265
|
+
@mousedown=${e=>this.handleNavItemMouseDown(e,t)}
|
|
266
|
+
@click=${e=>this.handleNavItemClick(e,t)}
|
|
267
|
+
@contextmenu=${e=>this.handleNavItemContextMenu(e,t)}
|
|
257
268
|
>
|
|
258
|
-
${this.navIconsDisplayed&&!
|
|
259
|
-
<span class="nav-item__label">${
|
|
269
|
+
${this.navIconsDisplayed&&!e?B`<span class="nav-item__icon">${yt(t.icon||this.defaultNavItemIcon)}</span>`:W}
|
|
270
|
+
<span class="nav-item__label">${t.label}</span>
|
|
260
271
|
</a>
|
|
261
|
-
`}render(){const
|
|
262
|
-
<div class=${
|
|
272
|
+
`}render(){const t=this.getNavItemChildren(null),e=this.getComputedNav().filter((t=>null===t.parentId)).length;return B`
|
|
273
|
+
<div class=${wt({progress:!0,"progress--loading":this.pendingRequests>0})}>
|
|
263
274
|
<div class="progress__track"></div>
|
|
264
275
|
<div class="progress__bar progress__bar--primary">
|
|
265
276
|
<span class="progress__bar-inner"></span>
|
|
@@ -269,20 +280,20 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
269
280
|
</div>
|
|
270
281
|
</div>
|
|
271
282
|
|
|
272
|
-
${this.subbar?
|
|
283
|
+
${this.subbar?B`
|
|
273
284
|
<kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
|
|
274
285
|
<slot name="subbar"></slot>
|
|
275
286
|
</kr-subbar>
|
|
276
287
|
`:W}
|
|
277
288
|
|
|
278
289
|
<div class="wrapper">
|
|
279
|
-
${this.navEnabled?
|
|
280
|
-
<nav class=${
|
|
290
|
+
${this.navEnabled?B`
|
|
291
|
+
<nav class=${wt({nav:!0,"nav--scrolled":this.isNavScrolled,"nav--opened":!this.subbar||this.isNavOpened})}>
|
|
281
292
|
<div class="nav-header" @click=${this.handleNavHeaderClick}>
|
|
282
|
-
${this.label?
|
|
293
|
+
${this.label?B`<span class="nav-title">${this.label}</span>`:this.logo?B`<img class="nav-logo" src=${this.logo} alt="Logo" />`:W}
|
|
283
294
|
</div>
|
|
284
295
|
<div class="nav-content" @scroll=${this.handleNavScroll}>
|
|
285
|
-
${
|
|
296
|
+
${e>20?B`
|
|
286
297
|
<div class="nav-search">
|
|
287
298
|
<div class="nav-search__wrapper">
|
|
288
299
|
<span class="nav-search__icon">
|
|
@@ -297,7 +308,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
297
308
|
.value=${this.navQuery}
|
|
298
309
|
@input=${this.handleNavQueryChange}
|
|
299
310
|
/>
|
|
300
|
-
${this.navQuery?
|
|
311
|
+
${this.navQuery?B`
|
|
301
312
|
<button class="nav-search__clear" @click=${this.handleNavQueryClear}>
|
|
302
313
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
303
314
|
<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"/>
|
|
@@ -308,7 +319,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
308
319
|
</div>
|
|
309
320
|
`:W}
|
|
310
321
|
<div class="nav-items">
|
|
311
|
-
${
|
|
322
|
+
${t.map((t=>this.renderNavItem(t)))}
|
|
312
323
|
</div>
|
|
313
324
|
</div>
|
|
314
325
|
<!-- <div class="nav-footer">
|
|
@@ -322,7 +333,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
322
333
|
</main>
|
|
323
334
|
</div>
|
|
324
335
|
|
|
325
|
-
`}};
|
|
336
|
+
`}};It.styles=l`
|
|
326
337
|
:host {
|
|
327
338
|
display: flex;
|
|
328
339
|
flex-direction: column;
|
|
@@ -1047,25 +1058,25 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1047
1058
|
transform: scaleX(0.08);
|
|
1048
1059
|
}
|
|
1049
1060
|
}
|
|
1050
|
-
`,
|
|
1061
|
+
`,Et([gt()],It.prototype,"navItemsExpanded",void 0),Et([gt()],It.prototype,"navQuery",void 0),Et([gt()],It.prototype,"activeNavItemId",void 0),Et([gt()],It.prototype,"isNavScrolled",void 0),Et([gt()],It.prototype,"isNavOpened",void 0),Et([gt()],It.prototype,"isEditing",void 0),Et([gt()],It.prototype,"isUserMenuOpen",void 0),Et([gt()],It.prototype,"pref",void 0),Et([gt()],It.prototype,"draggedNavItemId",void 0),Et([gt()],It.prototype,"navItemDropTargetId",void 0),Et([gt()],It.prototype,"navItemDropPosition",void 0),Et([gt()],It.prototype,"pendingRequests",void 0),Et([ut({type:String})],It.prototype,"logo",void 0),Et([ut({type:String})],It.prototype,"label",void 0),Et([ut({type:String,attribute:"home-url"})],It.prototype,"homeUrl",void 0),Et([ut({type:String,reflect:!0})],It.prototype,"scheme",void 0),Et([ut({type:Array})],It.prototype,"nav",void 0),Et([ut({type:Boolean,attribute:"nav-icons-displayed",reflect:!0})],It.prototype,"navIconsDisplayed",void 0),Et([ut({type:Boolean,attribute:"nav-expanded"})],It.prototype,"navExpanded",void 0),Et([ut({type:Object})],It.prototype,"user",void 0),Et([ut({type:Boolean})],It.prototype,"subbar",void 0),Et([ut({type:Boolean,attribute:"nav-enabled"})],It.prototype,"navEnabled",void 0),Et([ut({type:Array})],It.prototype,"breadcrumbs",void 0),It=Et([ct("kr-scaffold")],It);var St=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let At=class extends lt{constructor(){super(...arguments),this.label="",this.subLabel="",this.navItems=[],this.activeId="",this.handlePopstate=()=>{this.syncActiveFromUrl()}}connectedCallback(){super.connectedCallback(),requestAnimationFrame((()=>this.syncActiveFromUrl())),window.addEventListener("popstate",this.handlePopstate)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("popstate",this.handlePopstate)}handleNavItemClick(t,e){const i=new CustomEvent("nav-item-click",{detail:{item:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),i.defaultPrevented&&t.preventDefault(),this.activeId=e.id}syncActiveFromUrl(){const t=window.location.pathname,e=this.navItems.find((e=>!!e.url&&(e.url.startsWith("/")?t===e.url:t.endsWith("/"+e.url))));e&&(this.activeId=e.id)}render(){return B`
|
|
1051
1062
|
<nav class="nav">
|
|
1052
|
-
${this.label?
|
|
1063
|
+
${this.label?B`
|
|
1053
1064
|
<div class="nav-header">
|
|
1054
1065
|
<div class="nav-header__text">
|
|
1055
|
-
${this.subLabel?
|
|
1066
|
+
${this.subLabel?B`<div class="nav-header__subtitle">${this.subLabel}</div>`:W}
|
|
1056
1067
|
<div class="nav-header__title">${this.label}</div>
|
|
1057
1068
|
</div>
|
|
1058
1069
|
</div>
|
|
1059
1070
|
`:W}
|
|
1060
1071
|
<div class="nav-content">
|
|
1061
1072
|
<div class="nav-items">
|
|
1062
|
-
${this.navItems.map((
|
|
1073
|
+
${this.navItems.map((t=>B`
|
|
1063
1074
|
<a
|
|
1064
|
-
class="nav-item ${
|
|
1065
|
-
href=${
|
|
1066
|
-
@click=${
|
|
1075
|
+
class="nav-item ${t.id===this.activeId?"nav-item--active":""}"
|
|
1076
|
+
href=${t.url||"#"}
|
|
1077
|
+
@click=${e=>this.handleNavItemClick(e,t)}
|
|
1067
1078
|
>
|
|
1068
|
-
${
|
|
1079
|
+
${t.label}
|
|
1069
1080
|
</a>
|
|
1070
1081
|
`))}
|
|
1071
1082
|
</div>
|
|
@@ -1076,7 +1087,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1076
1087
|
<slot></slot>
|
|
1077
1088
|
</div>
|
|
1078
1089
|
</main>
|
|
1079
|
-
`}};
|
|
1090
|
+
`}};At.styles=l`
|
|
1080
1091
|
:host {
|
|
1081
1092
|
display: flex;
|
|
1082
1093
|
height: 100%;
|
|
@@ -1167,7 +1178,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1167
1178
|
flex: 1;
|
|
1168
1179
|
overflow-y: auto;
|
|
1169
1180
|
}
|
|
1170
|
-
`,
|
|
1181
|
+
`,St([ut({type:String})],At.prototype,"label",void 0),St([ut({type:String})],At.prototype,"subLabel",void 0),St([ut({type:Array})],At.prototype,"navItems",void 0),St([ut({type:String})],At.prototype,"activeId",void 0),At=St([ct("kr-screen-nav")],At);var Ct=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let Nt=class extends lt{constructor(){super(...arguments),this.title=""}render(){return B`
|
|
1171
1182
|
<div class="header">
|
|
1172
1183
|
<h2 class="header__title">${this.title}</h2>
|
|
1173
1184
|
<div class="header__actions">
|
|
@@ -1179,7 +1190,7 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1179
1190
|
<slot></slot>
|
|
1180
1191
|
</div>
|
|
1181
1192
|
</div>
|
|
1182
|
-
`}};
|
|
1193
|
+
`}};Nt.styles=l`
|
|
1183
1194
|
:host {
|
|
1184
1195
|
display: flex;
|
|
1185
1196
|
flex-direction: column;
|
|
@@ -1223,8 +1234,8 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1223
1234
|
width: 100%;
|
|
1224
1235
|
max-width: 700px;
|
|
1225
1236
|
}
|
|
1226
|
-
`,
|
|
1227
|
-
${this.menu?
|
|
1237
|
+
`,Ct([ut({type:String})],Nt.prototype,"title",void 0),Nt=Ct([ct("kr-screen-detail")],Nt);var zt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let Dt=class extends lt{constructor(){super(...arguments),this.breadcrumbs=[],this.menu=!1}_handleMenuClick(){this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}resolveUrl(t){if(!t.url)return"#";const e=t.url.startsWith("/")?t.url.slice(1):t.url,i=document.querySelector("base")?.getAttribute("href")||"/";return(i.endsWith("/")?i:i+"/")+e}_handleBreadcrumbClick(t,e,i){if(i||!e.url)return void t.preventDefault();if(t.ctrlKey||t.metaKey||1===t.button)return;const s=new CustomEvent("breadcrumb-click",{detail:{breadcrumb:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(s),s.defaultPrevented&&t.preventDefault()}render(){return B`
|
|
1238
|
+
${this.menu?B`
|
|
1228
1239
|
<div class="menu" @click=${this._handleMenuClick}>
|
|
1229
1240
|
<svg class="menu__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1230
1241
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
@@ -1234,20 +1245,20 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1234
1245
|
</div>
|
|
1235
1246
|
`:W}
|
|
1236
1247
|
<div class="breadcrumbs">
|
|
1237
|
-
${this.breadcrumbs.map(((e
|
|
1238
|
-
${
|
|
1248
|
+
${this.breadcrumbs.map(((t,e)=>{const i=e===this.breadcrumbs.length-1;return B`
|
|
1249
|
+
${e>0?B`<span class="breadcrumb-separator">/</span>`:""}
|
|
1239
1250
|
<a
|
|
1240
|
-
class=${
|
|
1241
|
-
href=${this.resolveUrl(
|
|
1242
|
-
@click=${
|
|
1243
|
-
>${
|
|
1251
|
+
class=${wt({breadcrumb:!0,"breadcrumb--current":i})}
|
|
1252
|
+
href=${this.resolveUrl(t)}
|
|
1253
|
+
@click=${e=>this._handleBreadcrumbClick(e,t,i)}
|
|
1254
|
+
>${t.label}</a>
|
|
1244
1255
|
`}))}
|
|
1245
1256
|
</div>
|
|
1246
1257
|
<div class="content">
|
|
1247
1258
|
<slot></slot>
|
|
1248
1259
|
</div>
|
|
1249
1260
|
|
|
1250
|
-
`}};
|
|
1261
|
+
`}};Dt.styles=l`
|
|
1251
1262
|
:host {
|
|
1252
1263
|
display: flex;
|
|
1253
1264
|
flex-direction: row;
|
|
@@ -1313,10 +1324,718 @@ const ce=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
1313
1324
|
width: 18px;
|
|
1314
1325
|
height: 18px;
|
|
1315
1326
|
}
|
|
1316
|
-
`,
|
|
1327
|
+
`,zt([ut({type:Array})],Dt.prototype,"breadcrumbs",void 0),zt([ut({type:Boolean})],Dt.prototype,"menu",void 0),Dt=zt([ct("kr-subbar")],Dt);var Mt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Pt{static configure(t){Pt.base=t.base,Pt.routes=t.routes,window.addEventListener("click",(t=>{const e=t.composedPath().find((t=>t instanceof HTMLAnchorElement));e&&e.origin===window.location.origin&&e.pathname.startsWith(Pt.base)&&(t.preventDefault(),Pt.navigate(e.pathname))}))}static navigate(t){let e=t;t.startsWith("/")||(e=Pt.base+"/"+t),window.history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate"))}static getParams(){const t=Pt.matchAll(),e={};for(const i of t)for(const t in i.params)e[t]=decodeURIComponent(i.params[t]);return e}static outlet(t){const e=Pt.matchAll();if(t>=e.length)return null;const i=e[t].route.component,s=Pt.elementCache.get(t+":"+i);if(s)return s;for(const e of Pt.elementCache.keys())e.startsWith(t+":")&&Pt.elementCache.delete(e);const a=document.createElement(i);return Pt.elementCache.set(t+":"+i,a),a}static matchAll(){const t=window.location.pathname;let e=t;t.startsWith(Pt.base)&&(e=t.slice(Pt.base.length));const i=e.split("/").filter((t=>t));return Pt.matchRoutes(Pt.routes,i)}static matchRoutes(t,e){for(const i of t){const t=i.path.split("/").filter((t=>t));if(0===t.length&&0===e.length)return[{route:i,params:{}}];if(0===t.length)continue;if(e.length<t.length)continue;const s={};let a=!0;for(let i=0;i<t.length;i++)if(t[i].startsWith(":"))s[t[i].slice(1)]=e[i];else if(t[i]!==e[i]){a=!1;break}if(!a)continue;const r=e.slice(t.length);if(r.length>0&&!i.children)continue;const n=[{route:i,params:s}];if(i.children&&r.length>0){const t=Pt.matchRoutes(i.children,r);if(t.length>0)return n.push(...t),n}if(i.children&&0===r.length&&i.default){window.history.replaceState({},"",window.location.pathname+"/"+i.default);const t=Pt.matchRoutes(i.children,[i.default]);if(t.length>0)return n.push(...t),n}return n}return[]}}Pt.base="",Pt.routes=[],Pt.elementCache=new Map;let Tt=class extends lt{constructor(){super(...arguments),this.level=-1,this.handlePopState=()=>{this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.level=this.detectLevel(),window.addEventListener("popstate",this.handlePopState)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("popstate",this.handlePopState)}detectLevel(){let t=0,e=this;for(;e;)e instanceof ShadowRoot?e=e.host:(e instanceof HTMLElement&&"KR-ROUTER-OUTLET"===e.tagName&&e!==this&&t++,e=e instanceof HTMLElement?e.parentNode:null);return t}render(){const t=Pt.outlet(this.level);return t?B`${t}`:B``}};Tt.styles=l`
|
|
1317
1328
|
:host {
|
|
1318
1329
|
display: block;
|
|
1319
1330
|
height: 100%;
|
|
1320
1331
|
}
|
|
1321
|
-
`,
|
|
1332
|
+
`,Tt=Mt([ct("kr-router-outlet")],Tt);var Rt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let Ut=class extends lt{constructor(){super(...arguments),this._reader=null,this._decoder=new TextDecoder,this._buffer="",this._userHasScrolledUp=!1,this._isDragging=!1,this._isResizing=!1,this._resizeDir="",this._dragStartX=0,this._dragStartY=0,this._dragStartLeft=0,this._dragStartTop=0,this._resizeStartW=0,this._resizeStartH=0,this.send=null,this.clear=null,this.messages=[],this.title="AI Assistant",this.subtitle="",this.placeholder="Type a message...",this.opened=!1,this._inputValue="",this._isStreaming=!1,this._statusText="",this._error="",this._handleMouseMove=t=>{if(this._isDragging){let e=this._dragStartLeft+(t.clientX-this._dragStartX),i=this._dragStartTop+(t.clientY-this._dragStartY);const s=this._panelEl.offsetWidth,a=this._panelEl.offsetHeight;e=Math.max(48-s,Math.min(e,window.innerWidth-48)),i=Math.max(48-a,Math.min(i,window.innerHeight-48)),this._panelEl.style.left=e+"px",this._panelEl.style.top=i+"px"}else if(this._isResizing){const e=t.clientX-this._dragStartX,i=t.clientY-this._dragStartY,s=340,a=380,r=.9*window.innerWidth,n=window.innerHeight-72;let o=this._resizeStartW,l=this._resizeStartH,d=this._dragStartLeft,c=this._dragStartTop;if(this._resizeDir.includes("e")&&(o=Math.max(s,Math.min(this._resizeStartW+e,r))),this._resizeDir.includes("w")){const t=this._resizeStartW-e;t>=s&&t<=r&&(o=t,d=this._dragStartLeft+e)}if(this._resizeDir.includes("s")&&(l=Math.max(a,Math.min(this._resizeStartH+i,n))),this._resizeDir.includes("n")){const t=this._resizeStartH-i;t>=a&&t<=n&&(l=t,c=this._dragStartTop+i)}d=Math.max(0,d),c=Math.max(0,c),this._panelEl.style.width=o+"px",this._panelEl.style.height=l+"px",this._panelEl.style.left=d+"px",this._panelEl.style.top=c+"px"}},this._handleMouseUp=()=>{this._isDragging&&(this._isDragging=!1,this._panelEl.classList.remove("chatbot__panel--dragging")),this._isResizing&&(this._isResizing=!1,this._panelEl.classList.remove("chatbot__panel--resizing")),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}}disconnectedCallback(){super.disconnectedCallback(),this._reader&&(this._reader.cancel(),this._reader=null),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}updated(t){(t.has("messages")||t.has("_statusText"))&&!this._userHasScrolledUp&&this._messagesEl&&requestAnimationFrame((()=>{this._messagesEl&&(this._messagesEl.scrollTop=this._messagesEl.scrollHeight)})),t.has("opened")&&this.opened&&this._inputEl&&setTimeout((()=>{this._inputEl&&this._inputEl.focus()}),200)}stop(){this._handleStop()}_handleHeaderMouseDown(t){if(t.target.closest("button"))return;if(!this._panelEl)return;this._isDragging=!0,this._panelEl.classList.add("chatbot__panel--dragging");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,t.preventDefault(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleResizeMouseDown(t){if(!this._panelEl)return;this._isResizing=!0,this._resizeDir=t.currentTarget.dataset.dir||"",this._panelEl.classList.add("chatbot__panel--resizing");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,this._resizeStartW=e.width,this._resizeStartH=e.height,t.preventDefault(),t.stopPropagation(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleToggle(){this.opened=!this.opened,this.opened&&this._panelEl&&(this._panelEl.style.left="",this._panelEl.style.top="",this._panelEl.style.right="",this._panelEl.style.bottom="",this._panelEl.style.width="",this._panelEl.style.height="",this._panelEl.style.position="")}_handleInputChange(t){this._inputValue=t.target.value;const e=t.target;e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px"}_handleKeyDown(t){"Enter"!==t.key||t.shiftKey||(t.preventDefault(),this._handleSubmit())}_handleSubmit(){if(!this._inputValue.trim()||!this.send||this._isStreaming)return;const t=this._inputValue.trim(),e=new CustomEvent("message-submit",{detail:{message:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||(this.messages=[...this.messages,{role:"user",content:t}],this._inputValue="",this._error="",this._userHasScrolledUp=!1,this._inputEl&&(this._inputEl.style.height="auto"),this.messages=[...this.messages,{role:"assistant",content:""}],this._isStreaming=!0,this._statusText="",this.send({message:t,messages:this.messages.slice(0,-1)}).then((t=>{t.ok?t.body?(this._reader=t.body.getReader(),this._decoder=new TextDecoder,this._buffer="",this._readStreamChunk()):this._handleStreamError("No response body"):this._handleStreamError("Request failed: "+t.status)})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)})))}_handleStop(){this._reader&&(this._reader.cancel(),this._reader=null),this._isStreaming=!1,this._statusText=""}_handleClear(){this.clear&&this.clear().then((()=>{this._reader&&(this._reader.cancel(),this._reader=null),this.messages=[],this._isStreaming=!1,this._statusText="",this._error="",this._inputValue="",this._userHasScrolledUp=!1}))}_handleMessagesScroll(t){const e=t.target,i=e.scrollHeight-e.scrollTop-e.clientHeight;this._userHasScrolledUp=i>50}_handleErrorDismiss(){this._error=""}_readStreamChunk(){this._reader&&this._reader.read().then((t=>{if(t.done)return this._isStreaming=!1,this._statusText="",void(this._reader=null);this._buffer=this._buffer+this._decoder.decode(t.value,{stream:!0});const e=this._buffer.split("\n\n");this._buffer=e.pop()||"";for(let t=0;t<e.length;t++){if(!e[t].trim())continue;const i=e[t].split("\n");for(let t=0;t<i.length;t++){if(!i[t].startsWith("data:"))continue;const e=i[t].slice(5).trim();if(!e)continue;let s;try{s=JSON.parse(e)}catch{continue}if("STATUS"===s.type)s.message&&(this._statusText=String(s.message));else if("REASONING_PART"===s.type){if(s.message){const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].reasoning||(this.messages[t].reasoning=""),this.messages[t].reasoning+=String(s.message),this.requestUpdate())}}else if("RESPONSE_PART"===s.type){if(s.message){this._statusText="";const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].content+=String(s.message),this.requestUpdate())}}else if("ACTION"===s.type){const t=s,e=new CustomEvent("action",{detail:{action:t},bubbles:!0,composed:!0,cancelable:!0});if(this.dispatchEvent(e),!e.defaultPrevented)if("RELOAD"===t.action)location.reload();else if("NAVIGATE"===t.action)t.data&&t.data.url&&(window.location.href=t.data.url);else if("OPEN_TAB"===t.action)t.data&&t.data.url&&window.open(t.data.url,"_blank");else if("UPDATE_HTML"===t.action){if(t.data&&t.data.selector&&t.data.html){const e=document.querySelector(t.data.selector);e&&(e.innerHTML=t.data.html)}}else if("SCROLL_TO"===t.action&&t.data&&t.data.selector){const e=document.querySelector(t.data.selector);e&&e.scrollIntoView({behavior:"smooth"})}}else"ERROR"===s.type&&this._handleStreamError(String(s.message||"Unknown error"));s.finished&&(this._isStreaming=!1,this._statusText="",this._reader=null)}}this._readStreamChunk()})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)}))}_handleStreamError(t){if(this._isStreaming=!1,this._statusText="",this._error=t,this._reader&&(this._reader.cancel(),this._reader=null),this.messages.length>0){const t=this.messages[this.messages.length-1];"assistant"!==t.role||t.content||(this.messages=this.messages.slice(0,-1))}}_formatAssistantContent(t){let e=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");e=e.replace(/```(\w*)\n?([\s\S]*?)```/g,"<pre><code>$2</code></pre>"),e=e.replace(/`([^`]+)`/g,"<code>$1</code>"),e=e.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>");const i=e.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g);for(let t=0;t<i.length;t++)t%2==0&&(i[t]=i[t].replace(/\n\n/g,"</p><p>"),i[t]=i[t].replace(/\n/g,"<br>"));return e=i.join(""),e.includes("</p><p>")&&(e="<p>"+e+"</p>"),e}render(){return B`
|
|
1333
|
+
<button
|
|
1334
|
+
class=${wt({chatbot__toggle:!0,"chatbot__toggle--hidden":this.opened})}
|
|
1335
|
+
@click=${this._handleToggle}
|
|
1336
|
+
title="Open chat"
|
|
1337
|
+
>
|
|
1338
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="chatbot__toggle-icon">
|
|
1339
|
+
<path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
|
|
1340
|
+
<path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
|
|
1341
|
+
</svg>
|
|
1342
|
+
</button>
|
|
1343
|
+
|
|
1344
|
+
<div class=${wt({chatbot__panel:!0,"chatbot__panel--opened":this.opened})}>
|
|
1345
|
+
<div class="chatbot__resize chatbot__resize--n" data-dir="n" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1346
|
+
<div class="chatbot__resize chatbot__resize--s" data-dir="s" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1347
|
+
<div class="chatbot__resize chatbot__resize--w" data-dir="w" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1348
|
+
<div class="chatbot__resize chatbot__resize--e" data-dir="e" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1349
|
+
<div class="chatbot__resize chatbot__resize--nw" data-dir="nw" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1350
|
+
<div class="chatbot__resize chatbot__resize--ne" data-dir="ne" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1351
|
+
<div class="chatbot__resize chatbot__resize--sw" data-dir="sw" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1352
|
+
<div class="chatbot__resize chatbot__resize--se" data-dir="se" @mousedown=${this._handleResizeMouseDown}></div>
|
|
1353
|
+
<div class="chatbot__header" @mousedown=${this._handleHeaderMouseDown}>
|
|
1354
|
+
<div class="chatbot__header-left">
|
|
1355
|
+
<div class="chatbot__header-drag-hint">
|
|
1356
|
+
<span></span>
|
|
1357
|
+
<span></span>
|
|
1358
|
+
<span></span>
|
|
1359
|
+
</div>
|
|
1360
|
+
<div class="chatbot__header-info">
|
|
1361
|
+
<span class="chatbot__header-title">${this.title}</span>
|
|
1362
|
+
${this.subtitle?B`
|
|
1363
|
+
<span class="chatbot__header-subtitle">${this.subtitle}</span>
|
|
1364
|
+
`:W}
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
<div class="chatbot__header-actions">
|
|
1368
|
+
${this.messages.length>0?B`
|
|
1369
|
+
<button class="chatbot__header-action" @click=${this._handleClear} title="Clear conversation">
|
|
1370
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="chatbot__header-action-icon">
|
|
1371
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
1372
|
+
</svg>
|
|
1373
|
+
</button>
|
|
1374
|
+
`:W}
|
|
1375
|
+
<button class="chatbot__header-action" @click=${this._handleToggle} title="Close">
|
|
1376
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__header-action-icon">
|
|
1377
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
1378
|
+
</svg>
|
|
1379
|
+
</button>
|
|
1380
|
+
</div>
|
|
1381
|
+
</div>
|
|
1382
|
+
|
|
1383
|
+
<div class="chatbot__messages" @scroll=${this._handleMessagesScroll}>
|
|
1384
|
+
${0===this.messages.length?B`
|
|
1385
|
+
<div class="chatbot__empty">
|
|
1386
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="chatbot__empty-icon">
|
|
1387
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
|
|
1388
|
+
</svg>
|
|
1389
|
+
<span class="chatbot__empty-text">How can I help?</span>
|
|
1390
|
+
</div>
|
|
1391
|
+
`:W}
|
|
1392
|
+
${this.messages.map((t=>B`
|
|
1393
|
+
<div class=${wt({chatbot__message:!0,"chatbot__message--user":"user"===t.role,"chatbot__message--assistant":"assistant"===t.role})}>
|
|
1394
|
+
${t.reasoning?B`
|
|
1395
|
+
<details class="chatbot__reasoning">
|
|
1396
|
+
<summary>Thinking</summary>
|
|
1397
|
+
<div class="chatbot__reasoning-content">${t.reasoning}</div>
|
|
1398
|
+
</details>
|
|
1399
|
+
`:W}
|
|
1400
|
+
<div class="chatbot__message-content">
|
|
1401
|
+
${"user"===t.role?t.content:yt(this._formatAssistantContent(t.content))}
|
|
1402
|
+
</div>
|
|
1403
|
+
</div>
|
|
1404
|
+
`))}
|
|
1405
|
+
${this._statusText?B`
|
|
1406
|
+
<div class="chatbot__message chatbot__message--assistant">
|
|
1407
|
+
<div class="chatbot__typing">
|
|
1408
|
+
<span></span>
|
|
1409
|
+
<span></span>
|
|
1410
|
+
<span></span>
|
|
1411
|
+
</div>
|
|
1412
|
+
</div>
|
|
1413
|
+
`:W}
|
|
1414
|
+
</div>
|
|
1415
|
+
|
|
1416
|
+
${this._error?B`
|
|
1417
|
+
<div class="chatbot__error">
|
|
1418
|
+
<span>${this._error}</span>
|
|
1419
|
+
<button class="chatbot__error-dismiss" @click=${this._handleErrorDismiss}>
|
|
1420
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__error-dismiss-icon">
|
|
1421
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
1422
|
+
</svg>
|
|
1423
|
+
</button>
|
|
1424
|
+
</div>
|
|
1425
|
+
`:W}
|
|
1426
|
+
|
|
1427
|
+
<div class="chatbot__footer">
|
|
1428
|
+
<div class="chatbot__input-wrapper">
|
|
1429
|
+
<button class="chatbot__input-plus" title="Attach">+</button>
|
|
1430
|
+
<textarea
|
|
1431
|
+
class="chatbot__input"
|
|
1432
|
+
.value=${this._inputValue}
|
|
1433
|
+
placeholder=${this.placeholder}
|
|
1434
|
+
rows="1"
|
|
1435
|
+
@input=${this._handleInputChange}
|
|
1436
|
+
@keydown=${this._handleKeyDown}
|
|
1437
|
+
></textarea>
|
|
1438
|
+
${this._isStreaming?B`
|
|
1439
|
+
<button class="chatbot__stop" @click=${this._handleStop} title="Stop generating">
|
|
1440
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="chatbot__stop-icon">
|
|
1441
|
+
<rect x="6" y="6" width="12" height="12" rx="2" />
|
|
1442
|
+
</svg>
|
|
1443
|
+
</button>
|
|
1444
|
+
`:B`
|
|
1445
|
+
<button
|
|
1446
|
+
class=${wt({chatbot__send:!0,"chatbot__send--disabled":!this._inputValue.trim()})}
|
|
1447
|
+
@click=${this._handleSubmit}
|
|
1448
|
+
title="Send message"
|
|
1449
|
+
>
|
|
1450
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="chatbot__send-icon">
|
|
1451
|
+
<path d="M12 19V5M5 12l7-7 7 7"/>
|
|
1452
|
+
</svg>
|
|
1453
|
+
</button>
|
|
1454
|
+
`}
|
|
1455
|
+
</div>
|
|
1456
|
+
</div>
|
|
1457
|
+
</div>
|
|
1458
|
+
`}};Ut.styles=l`
|
|
1459
|
+
*,
|
|
1460
|
+
*::before,
|
|
1461
|
+
*::after {
|
|
1462
|
+
box-sizing: border-box;
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
:host {
|
|
1466
|
+
display: block;
|
|
1467
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
1468
|
+
font-size: 14px;
|
|
1469
|
+
line-height: 1.6;
|
|
1470
|
+
|
|
1471
|
+
--kr-chatbot-primary: #163052;
|
|
1472
|
+
--kr-chatbot-primary-hover: #1e4068;
|
|
1473
|
+
--kr-chatbot-bg: #ffffff;
|
|
1474
|
+
--kr-chatbot-border: #d9d9d9;
|
|
1475
|
+
--kr-chatbot-text: #1a1a2e;
|
|
1476
|
+
--kr-chatbot-text-secondary: #64668b;
|
|
1477
|
+
--kr-chatbot-user-bg: #e9e9e980;
|
|
1478
|
+
--kr-chatbot-user-text: #1a1a2e;
|
|
1479
|
+
--kr-chatbot-error-bg: #fef2f2;
|
|
1480
|
+
--kr-chatbot-error-text: #dc2626;
|
|
1481
|
+
--kr-chatbot-success: #00b894;
|
|
1482
|
+
--kr-chatbot-toggle-size: 56px;
|
|
1483
|
+
--kr-chatbot-panel-width: 440px;
|
|
1484
|
+
--kr-chatbot-panel-height: 620px;
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1487
|
+
:host {
|
|
1488
|
+
position: fixed;
|
|
1489
|
+
bottom: 24px;
|
|
1490
|
+
right: 24px;
|
|
1491
|
+
z-index: 10000;
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
/* Toggle button */
|
|
1495
|
+
.chatbot__toggle {
|
|
1496
|
+
width: var(--kr-chatbot-toggle-size);
|
|
1497
|
+
height: var(--kr-chatbot-toggle-size);
|
|
1498
|
+
border-radius: 18px;
|
|
1499
|
+
background: var(--kr-chatbot-primary);
|
|
1500
|
+
color: white;
|
|
1501
|
+
border: none;
|
|
1502
|
+
cursor: pointer;
|
|
1503
|
+
display: flex;
|
|
1504
|
+
align-items: center;
|
|
1505
|
+
justify-content: center;
|
|
1506
|
+
box-shadow: 0 4px 24px rgba(22, 48, 82, 0.4);
|
|
1507
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.chatbot__toggle:hover {
|
|
1511
|
+
transform: scale(1.05);
|
|
1512
|
+
box-shadow: 0 6px 32px rgba(22, 48, 82, 0.5);
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
.chatbot__toggle--hidden {
|
|
1516
|
+
transform: scale(0);
|
|
1517
|
+
opacity: 0;
|
|
1518
|
+
pointer-events: none;
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
.chatbot__toggle-icon {
|
|
1522
|
+
width: 26px;
|
|
1523
|
+
height: 26px;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
/* Panel */
|
|
1527
|
+
.chatbot__panel {
|
|
1528
|
+
display: none;
|
|
1529
|
+
flex-direction: column;
|
|
1530
|
+
background: var(--kr-chatbot-bg);
|
|
1531
|
+
overflow: hidden;
|
|
1532
|
+
position: absolute;
|
|
1533
|
+
bottom: 0;
|
|
1534
|
+
right: 0;
|
|
1535
|
+
width: var(--kr-chatbot-panel-width);
|
|
1536
|
+
height: var(--kr-chatbot-panel-height);
|
|
1537
|
+
max-height: calc(100vh - 72px);
|
|
1538
|
+
border-radius: 16px;
|
|
1539
|
+
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
1540
|
+
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
1541
|
+
animation: chatbot-panel-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1542
|
+
transform-origin: bottom right;
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
.chatbot__panel--opened {
|
|
1546
|
+
display: flex;
|
|
1547
|
+
}
|
|
1548
|
+
|
|
1549
|
+
@keyframes chatbot-panel-in {
|
|
1550
|
+
from {
|
|
1551
|
+
opacity: 0;
|
|
1552
|
+
transform: scale(0.92) translateY(20px);
|
|
1553
|
+
}
|
|
1554
|
+
to {
|
|
1555
|
+
opacity: 1;
|
|
1556
|
+
transform: scale(1) translateY(0);
|
|
1557
|
+
}
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
/* Header */
|
|
1561
|
+
.chatbot__header {
|
|
1562
|
+
padding: 10px 16px;
|
|
1563
|
+
background: var(--kr-chatbot-primary);
|
|
1564
|
+
color: white;
|
|
1565
|
+
display: flex;
|
|
1566
|
+
align-items: center;
|
|
1567
|
+
justify-content: space-between;
|
|
1568
|
+
flex-shrink: 0;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.chatbot__header-left {
|
|
1572
|
+
display: flex;
|
|
1573
|
+
align-items: center;
|
|
1574
|
+
gap: 10px;
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
.chatbot__header-drag-hint {
|
|
1578
|
+
display: flex;
|
|
1579
|
+
flex-direction: column;
|
|
1580
|
+
gap: 2px;
|
|
1581
|
+
opacity: 0.35;
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
.chatbot__header-drag-hint span {
|
|
1585
|
+
display: block;
|
|
1586
|
+
width: 14px;
|
|
1587
|
+
height: 2px;
|
|
1588
|
+
background: white;
|
|
1589
|
+
border-radius: 1px;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.chatbot__header-info {
|
|
1593
|
+
display: flex;
|
|
1594
|
+
flex-direction: column;
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.chatbot__header-title {
|
|
1598
|
+
font-size: 13px;
|
|
1599
|
+
font-weight: 600;
|
|
1600
|
+
letter-spacing: -0.2px;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
.chatbot__header-subtitle {
|
|
1604
|
+
color: rgba(255, 255, 255, 0.5);
|
|
1605
|
+
font-size: 11px;
|
|
1606
|
+
display: flex;
|
|
1607
|
+
align-items: center;
|
|
1608
|
+
gap: 4px;
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.chatbot__header-subtitle::before {
|
|
1612
|
+
content: '';
|
|
1613
|
+
width: 5px;
|
|
1614
|
+
height: 5px;
|
|
1615
|
+
background: var(--kr-chatbot-success);
|
|
1616
|
+
border-radius: 50%;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.chatbot__header-actions {
|
|
1620
|
+
display: flex;
|
|
1621
|
+
align-items: center;
|
|
1622
|
+
gap: 4px;
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
.chatbot__header-action {
|
|
1626
|
+
width: 28px;
|
|
1627
|
+
height: 28px;
|
|
1628
|
+
background: transparent;
|
|
1629
|
+
border: none;
|
|
1630
|
+
color: rgba(255, 255, 255, 0.6);
|
|
1631
|
+
border-radius: 8px;
|
|
1632
|
+
cursor: pointer;
|
|
1633
|
+
display: flex;
|
|
1634
|
+
align-items: center;
|
|
1635
|
+
justify-content: center;
|
|
1636
|
+
transition: all 0.15s;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
.chatbot__header-action:hover {
|
|
1640
|
+
background: rgba(255, 255, 255, 0.1);
|
|
1641
|
+
color: white;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.chatbot__header-action-icon {
|
|
1645
|
+
width: 16px;
|
|
1646
|
+
height: 16px;
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
/* Messages */
|
|
1650
|
+
.chatbot__messages {
|
|
1651
|
+
flex: 1;
|
|
1652
|
+
overflow-y: auto;
|
|
1653
|
+
padding: 32px;
|
|
1654
|
+
display: flex;
|
|
1655
|
+
flex-direction: column;
|
|
1656
|
+
gap: 24px;
|
|
1657
|
+
scroll-behavior: smooth;
|
|
1658
|
+
background: white;
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.chatbot__messages::-webkit-scrollbar {
|
|
1662
|
+
width: 4px;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.chatbot__messages::-webkit-scrollbar-track {
|
|
1666
|
+
background: transparent;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.chatbot__messages::-webkit-scrollbar-thumb {
|
|
1670
|
+
background: rgba(0, 0, 0, 0.08);
|
|
1671
|
+
border-radius: 2px;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
.chatbot__empty {
|
|
1675
|
+
flex: 1;
|
|
1676
|
+
display: flex;
|
|
1677
|
+
flex-direction: column;
|
|
1678
|
+
align-items: center;
|
|
1679
|
+
justify-content: center;
|
|
1680
|
+
color: var(--kr-chatbot-text-secondary);
|
|
1681
|
+
gap: 8px;
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
.chatbot__empty-icon {
|
|
1685
|
+
width: 40px;
|
|
1686
|
+
height: 40px;
|
|
1687
|
+
opacity: 0.4;
|
|
1688
|
+
}
|
|
1689
|
+
|
|
1690
|
+
.chatbot__empty-text {
|
|
1691
|
+
font-size: 13px;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
.chatbot__message {
|
|
1695
|
+
display: flex;
|
|
1696
|
+
flex-direction: column;
|
|
1697
|
+
max-width: 100%;
|
|
1698
|
+
animation: chatbot-msg-in 0.3s ease-out;
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
@keyframes chatbot-msg-in {
|
|
1702
|
+
from {
|
|
1703
|
+
opacity: 0;
|
|
1704
|
+
transform: translateY(6px);
|
|
1705
|
+
}
|
|
1706
|
+
to {
|
|
1707
|
+
opacity: 1;
|
|
1708
|
+
transform: translateY(0);
|
|
1709
|
+
}
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
.chatbot__message--user {
|
|
1713
|
+
align-self: flex-end;
|
|
1714
|
+
align-items: flex-end;
|
|
1715
|
+
max-width: 85%;
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
.chatbot__message--assistant {
|
|
1719
|
+
align-self: flex-start;
|
|
1720
|
+
}
|
|
1721
|
+
|
|
1722
|
+
.chatbot__message-content {
|
|
1723
|
+
line-height: 1.7;
|
|
1724
|
+
word-wrap: break-word;
|
|
1725
|
+
overflow-wrap: break-word;
|
|
1726
|
+
}
|
|
1727
|
+
|
|
1728
|
+
.chatbot__message--user .chatbot__message-content {
|
|
1729
|
+
display: inline-block;
|
|
1730
|
+
background: var(--kr-chatbot-user-bg);
|
|
1731
|
+
color: var(--kr-chatbot-user-text);
|
|
1732
|
+
padding: 10px 16px;
|
|
1733
|
+
border-radius: 20px;
|
|
1734
|
+
border-bottom-right-radius: 6px;
|
|
1735
|
+
font-size: 14px;
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
.chatbot__message--assistant .chatbot__message-content {
|
|
1739
|
+
background: transparent;
|
|
1740
|
+
color: var(--kr-chatbot-text);
|
|
1741
|
+
padding: 0;
|
|
1742
|
+
font-size: 14px;
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
.chatbot__message--assistant .chatbot__message-content pre {
|
|
1746
|
+
background: #1e1e1e;
|
|
1747
|
+
color: #d4d4d4;
|
|
1748
|
+
padding: 12px;
|
|
1749
|
+
border-radius: 6px;
|
|
1750
|
+
overflow-x: auto;
|
|
1751
|
+
margin: 8px 0;
|
|
1752
|
+
font-size: 13px;
|
|
1753
|
+
line-height: 1.4;
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
.chatbot__message--assistant .chatbot__message-content code {
|
|
1757
|
+
font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
|
|
1758
|
+
font-size: 13px;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.chatbot__message--assistant .chatbot__message-content :not(pre) > code {
|
|
1762
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1763
|
+
padding: 2px 5px;
|
|
1764
|
+
border-radius: 3px;
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1767
|
+
.chatbot__message--assistant .chatbot__message-content strong {
|
|
1768
|
+
font-weight: 600;
|
|
1769
|
+
}
|
|
1770
|
+
|
|
1771
|
+
.chatbot__message--assistant .chatbot__message-content p {
|
|
1772
|
+
margin: 0 0 8px 0;
|
|
1773
|
+
}
|
|
1774
|
+
|
|
1775
|
+
.chatbot__message--assistant .chatbot__message-content p:last-child {
|
|
1776
|
+
margin-bottom: 0;
|
|
1777
|
+
}
|
|
1778
|
+
|
|
1779
|
+
/* Reasoning */
|
|
1780
|
+
.chatbot__reasoning {
|
|
1781
|
+
margin-bottom: 8px;
|
|
1782
|
+
border-radius: 6px;
|
|
1783
|
+
background: rgba(0, 0, 0, 0.03);
|
|
1784
|
+
font-size: 12px;
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
.chatbot__reasoning summary {
|
|
1788
|
+
cursor: pointer;
|
|
1789
|
+
padding: 6px 10px;
|
|
1790
|
+
color: var(--kr-chatbot-text-secondary);
|
|
1791
|
+
font-style: italic;
|
|
1792
|
+
user-select: none;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
.chatbot__reasoning-content {
|
|
1796
|
+
padding: 6px 10px 10px;
|
|
1797
|
+
color: var(--kr-chatbot-text-secondary);
|
|
1798
|
+
line-height: 1.5;
|
|
1799
|
+
white-space: pre-wrap;
|
|
1800
|
+
word-wrap: break-word;
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1803
|
+
/* Status */
|
|
1804
|
+
.chatbot__status {
|
|
1805
|
+
font-size: 13px;
|
|
1806
|
+
color: var(--kr-chatbot-text-secondary);
|
|
1807
|
+
font-style: italic;
|
|
1808
|
+
}
|
|
1809
|
+
|
|
1810
|
+
.chatbot__typing {
|
|
1811
|
+
display: flex;
|
|
1812
|
+
gap: 4px;
|
|
1813
|
+
padding: 4px 0;
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.chatbot__typing span {
|
|
1817
|
+
width: 6px;
|
|
1818
|
+
height: 6px;
|
|
1819
|
+
background: var(--kr-chatbot-text-secondary);
|
|
1820
|
+
border-radius: 50%;
|
|
1821
|
+
animation: chatbot-typing 1.4s infinite;
|
|
1822
|
+
opacity: 0.4;
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
.chatbot__typing span:nth-child(2) {
|
|
1826
|
+
animation-delay: 0.2s;
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
.chatbot__typing span:nth-child(3) {
|
|
1830
|
+
animation-delay: 0.4s;
|
|
1831
|
+
}
|
|
1832
|
+
|
|
1833
|
+
@keyframes chatbot-typing {
|
|
1834
|
+
0%, 60%, 100% {
|
|
1835
|
+
opacity: 0.4;
|
|
1836
|
+
transform: translateY(0);
|
|
1837
|
+
}
|
|
1838
|
+
30% {
|
|
1839
|
+
opacity: 1;
|
|
1840
|
+
transform: translateY(-4px);
|
|
1841
|
+
}
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
/* Error */
|
|
1845
|
+
.chatbot__error {
|
|
1846
|
+
padding: 8px 16px;
|
|
1847
|
+
background: var(--kr-chatbot-error-bg);
|
|
1848
|
+
color: var(--kr-chatbot-error-text);
|
|
1849
|
+
font-size: 13px;
|
|
1850
|
+
display: flex;
|
|
1851
|
+
align-items: center;
|
|
1852
|
+
justify-content: space-between;
|
|
1853
|
+
gap: 8px;
|
|
1854
|
+
flex-shrink: 0;
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
.chatbot__error-dismiss {
|
|
1858
|
+
background: none;
|
|
1859
|
+
border: none;
|
|
1860
|
+
color: var(--kr-chatbot-error-text);
|
|
1861
|
+
cursor: pointer;
|
|
1862
|
+
padding: 2px;
|
|
1863
|
+
display: flex;
|
|
1864
|
+
align-items: center;
|
|
1865
|
+
flex-shrink: 0;
|
|
1866
|
+
}
|
|
1867
|
+
|
|
1868
|
+
.chatbot__error-dismiss-icon {
|
|
1869
|
+
width: 14px;
|
|
1870
|
+
height: 14px;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
/* Footer / Input */
|
|
1874
|
+
.chatbot__footer {
|
|
1875
|
+
padding: 12px 16px 16px;
|
|
1876
|
+
flex-shrink: 0;
|
|
1877
|
+
background: white;
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
.chatbot__input-wrapper {
|
|
1881
|
+
display: flex;
|
|
1882
|
+
align-items: center;
|
|
1883
|
+
gap: 4px;
|
|
1884
|
+
background: white;
|
|
1885
|
+
border: 1px solid var(--kr-chatbot-border);
|
|
1886
|
+
border-radius: 26px;
|
|
1887
|
+
padding: 6px;
|
|
1888
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
1889
|
+
}
|
|
1890
|
+
|
|
1891
|
+
.chatbot__input-wrapper:focus-within {
|
|
1892
|
+
border-color: #b0b0b0;
|
|
1893
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
1894
|
+
}
|
|
1895
|
+
|
|
1896
|
+
.chatbot__input-plus {
|
|
1897
|
+
width: 34px;
|
|
1898
|
+
height: 34px;
|
|
1899
|
+
border: none;
|
|
1900
|
+
background: transparent;
|
|
1901
|
+
color: var(--kr-chatbot-text);
|
|
1902
|
+
border-radius: 50%;
|
|
1903
|
+
cursor: pointer;
|
|
1904
|
+
display: flex;
|
|
1905
|
+
align-items: center;
|
|
1906
|
+
justify-content: center;
|
|
1907
|
+
flex-shrink: 0;
|
|
1908
|
+
font-size: 20px;
|
|
1909
|
+
font-weight: 300;
|
|
1910
|
+
transition: background 0.15s;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
.chatbot__input-plus:hover {
|
|
1914
|
+
background: #f8f9fc;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
.chatbot__input {
|
|
1918
|
+
flex: 1;
|
|
1919
|
+
border: none;
|
|
1920
|
+
outline: none;
|
|
1921
|
+
resize: none;
|
|
1922
|
+
font-family: inherit;
|
|
1923
|
+
font-size: 15px;
|
|
1924
|
+
line-height: 1.5;
|
|
1925
|
+
padding: 4px 0;
|
|
1926
|
+
min-height: 26px;
|
|
1927
|
+
max-height: 120px;
|
|
1928
|
+
background: transparent;
|
|
1929
|
+
color: var(--kr-chatbot-text);
|
|
1930
|
+
}
|
|
1931
|
+
|
|
1932
|
+
.chatbot__input::placeholder {
|
|
1933
|
+
color: #b0b0b0;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
.chatbot__send {
|
|
1937
|
+
width: 34px;
|
|
1938
|
+
height: 34px;
|
|
1939
|
+
border-radius: 50%;
|
|
1940
|
+
background: var(--kr-chatbot-primary);
|
|
1941
|
+
color: white;
|
|
1942
|
+
border: none;
|
|
1943
|
+
cursor: pointer;
|
|
1944
|
+
display: flex;
|
|
1945
|
+
align-items: center;
|
|
1946
|
+
justify-content: center;
|
|
1947
|
+
flex-shrink: 0;
|
|
1948
|
+
transition: all 0.15s;
|
|
1949
|
+
}
|
|
1950
|
+
|
|
1951
|
+
.chatbot__send:hover {
|
|
1952
|
+
background: var(--kr-chatbot-primary-hover);
|
|
1953
|
+
}
|
|
1954
|
+
|
|
1955
|
+
.chatbot__send--disabled {
|
|
1956
|
+
opacity: 0.4;
|
|
1957
|
+
cursor: default;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1960
|
+
.chatbot__send--disabled:hover {
|
|
1961
|
+
background: var(--kr-chatbot-primary);
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1964
|
+
.chatbot__send-icon {
|
|
1965
|
+
width: 16px;
|
|
1966
|
+
height: 16px;
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
.chatbot__stop {
|
|
1970
|
+
width: 34px;
|
|
1971
|
+
height: 34px;
|
|
1972
|
+
border-radius: 50%;
|
|
1973
|
+
background: var(--kr-chatbot-error-text);
|
|
1974
|
+
color: white;
|
|
1975
|
+
border: none;
|
|
1976
|
+
cursor: pointer;
|
|
1977
|
+
display: flex;
|
|
1978
|
+
align-items: center;
|
|
1979
|
+
justify-content: center;
|
|
1980
|
+
flex-shrink: 0;
|
|
1981
|
+
transition: all 0.15s;
|
|
1982
|
+
}
|
|
1983
|
+
|
|
1984
|
+
.chatbot__stop:hover {
|
|
1985
|
+
background: #b91c1c;
|
|
1986
|
+
}
|
|
1987
|
+
|
|
1988
|
+
.chatbot__stop-icon {
|
|
1989
|
+
width: 14px;
|
|
1990
|
+
height: 14px;
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
/* Header drag cursor */
|
|
1994
|
+
.chatbot__header {
|
|
1995
|
+
cursor: grab;
|
|
1996
|
+
user-select: none;
|
|
1997
|
+
}
|
|
1998
|
+
|
|
1999
|
+
.chatbot__header:active {
|
|
2000
|
+
cursor: grabbing;
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
/* Drag / Resize states */
|
|
2004
|
+
.chatbot__panel--dragging,
|
|
2005
|
+
.chatbot__panel--resizing {
|
|
2006
|
+
transition: none;
|
|
2007
|
+
user-select: none;
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
.chatbot__panel--dragging {
|
|
2011
|
+
box-shadow: 0 32px 96px rgba(0, 0, 0, 0.18), 0 12px 40px rgba(0, 0, 0, 0.1);
|
|
2012
|
+
}
|
|
2013
|
+
|
|
2014
|
+
/* Resize handles */
|
|
2015
|
+
.chatbot__resize {
|
|
2016
|
+
position: absolute;
|
|
2017
|
+
z-index: 10;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
.chatbot__resize--n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
|
|
2021
|
+
.chatbot__resize--s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
|
|
2022
|
+
.chatbot__resize--w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
|
|
2023
|
+
.chatbot__resize--e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
|
|
2024
|
+
.chatbot__resize--nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
|
|
2025
|
+
.chatbot__resize--ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
|
|
2026
|
+
.chatbot__resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
|
|
2027
|
+
.chatbot__resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
|
|
2028
|
+
|
|
2029
|
+
.chatbot__resize--se::after {
|
|
2030
|
+
content: '';
|
|
2031
|
+
position: absolute;
|
|
2032
|
+
bottom: 7px;
|
|
2033
|
+
right: 7px;
|
|
2034
|
+
width: 10px;
|
|
2035
|
+
height: 10px;
|
|
2036
|
+
border-right: 2px solid rgba(0, 0, 0, 0.12);
|
|
2037
|
+
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
|
|
2038
|
+
border-radius: 0 0 3px 0;
|
|
2039
|
+
}
|
|
2040
|
+
`,Rt([ut({attribute:!1})],Ut.prototype,"send",void 0),Rt([ut({attribute:!1})],Ut.prototype,"clear",void 0),Rt([ut({attribute:!1})],Ut.prototype,"messages",void 0),Rt([ut({type:String})],Ut.prototype,"title",void 0),Rt([ut({type:String})],Ut.prototype,"subtitle",void 0),Rt([ut({type:String})],Ut.prototype,"placeholder",void 0),Rt([ut({type:Boolean,reflect:!0})],Ut.prototype,"opened",void 0),Rt([gt()],Ut.prototype,"_inputValue",void 0),Rt([gt()],Ut.prototype,"_isStreaming",void 0),Rt([gt()],Ut.prototype,"_statusText",void 0),Rt([gt()],Ut.prototype,"_error",void 0),Rt([vt(".chatbot__panel")],Ut.prototype,"_panelEl",void 0),Rt([vt(".chatbot__messages")],Ut.prototype,"_messagesEl",void 0),Rt([vt(".chatbot__input")],Ut.prototype,"_inputEl",void 0),Ut=Rt([ct("kr-chatbot")],Ut);export{Ut as KRChatbot,Pt as KRRouter,Tt as KRRouterOutlet,It as KRScaffold,Nt as KRScreenDetail,At as KRScreenNav,Dt as KRSubbar};
|
|
1322
2041
|
//# sourceMappingURL=krubble-app.bundled.min.js.map
|