@logosphere-ui/core 0.0.0-alpha.35 → 0.0.0-alpha.38
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/AGENTS.md +7 -2
- package/dist/AGENTS.md +7 -2
- package/dist/atoms/Checkbox/checkbox.d.ts +2 -1
- package/dist/{chatbot-p4CmxSdZ.js → chatbot-Cr6iOO7s.js} +1 -1
- package/dist/{chatbot-8etAVHNx.cjs → chatbot-Dl6P98Jq.cjs} +1 -1
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-CX0LgsWP.js +148 -0
- package/dist/checkbox-DpbKHANK.cjs +53 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{combobox-CTqEZUg6.js → combobox-CFF30L-n.js} +67 -61
- package/dist/{combobox-BV4AKTqp.cjs → combobox-s7NFPAd3.cjs} +3 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/index.cjs +11 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.js +179 -117
- package/dist/index.umd.js +80 -58
- package/dist/molecules/InputGroup/index.d.ts +1 -0
- package/dist/molecules/InputGroup/input-group.d.ts +40 -0
- package/dist/organisms/Tab/tab.d.ts +13 -1
- package/dist/{pagination-BLNrwUSO.js → pagination-DG56TV5n.js} +1 -1
- package/dist/{pagination-AclB9qi1.cjs → pagination-HyX0EAZr.cjs} +1 -1
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/tab-CDMcFHvP.cjs +41 -0
- package/dist/tab-CuBCFGoO.js +204 -0
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/package.json +6 -1
- package/dist/checkbox-CdDTRdKV.cjs +0 -37
- package/dist/checkbox-g6kl2jGR.js +0 -119
- package/dist/tab-BmrITzOL.cjs +0 -40
- package/dist/tab-Ca_OyNqQ.js +0 -176
package/AGENTS.md
CHANGED
|
@@ -112,7 +112,7 @@ Etiket/chip bileşeni; kapatılabilir veya yuvarlak.
|
|
|
112
112
|
|
|
113
113
|
### `<logosphere-checkbox>`
|
|
114
114
|
|
|
115
|
-
Onay kutusu veya
|
|
115
|
+
Onay kutusu, toggle switch veya radio buton.
|
|
116
116
|
|
|
117
117
|
**Properties**
|
|
118
118
|
|
|
@@ -121,7 +121,7 @@ Onay kutusu veya toggle switch.
|
|
|
121
121
|
| `label` | `string` | `""` | Etiket metni |
|
|
122
122
|
| `value` | `string` | `""` | Form değeri |
|
|
123
123
|
| `checked` | `boolean` | `false` | İşaretli mi |
|
|
124
|
-
| `type` | `"checkbox" \| "switch"` | `"checkbox"` | Görünüm tipi |
|
|
124
|
+
| `type` | `"checkbox" \| "switch" \| "radio"` | `"checkbox"` | Görünüm tipi |
|
|
125
125
|
| `disabled` | `boolean` | `false` | Devre dışı |
|
|
126
126
|
| `indeterminate` | `boolean` | `false` | Belirsiz durum |
|
|
127
127
|
|
|
@@ -133,6 +133,11 @@ Onay kutusu veya toggle switch.
|
|
|
133
133
|
<!-- Switch görünümü -->
|
|
134
134
|
<logosphere-checkbox type="switch" label="Bildirimleri etkinleştir" checked></logosphere-checkbox>
|
|
135
135
|
|
|
136
|
+
<!-- Radio görünümü: tıklanınca işaretlenir, tekrar tıklamayla kapanmaz.
|
|
137
|
+
Grup davranışı consumer'da yönetilir (lgsChange ile diğerlerinin checked'i kapatılır) -->
|
|
138
|
+
<logosphere-checkbox type="radio" label="Seçenek 1" value="1" checked></logosphere-checkbox>
|
|
139
|
+
<logosphere-checkbox type="radio" label="Seçenek 2" value="2"></logosphere-checkbox>
|
|
140
|
+
|
|
136
141
|
<!-- Event dinleme -->
|
|
137
142
|
<script>
|
|
138
143
|
document.querySelector("logosphere-checkbox")
|
package/dist/AGENTS.md
CHANGED
|
@@ -112,7 +112,7 @@ Etiket/chip bileşeni; kapatılabilir veya yuvarlak.
|
|
|
112
112
|
|
|
113
113
|
### `<logosphere-checkbox>`
|
|
114
114
|
|
|
115
|
-
Onay kutusu veya
|
|
115
|
+
Onay kutusu, toggle switch veya radio buton.
|
|
116
116
|
|
|
117
117
|
**Properties**
|
|
118
118
|
|
|
@@ -121,7 +121,7 @@ Onay kutusu veya toggle switch.
|
|
|
121
121
|
| `label` | `string` | `""` | Etiket metni |
|
|
122
122
|
| `value` | `string` | `""` | Form değeri |
|
|
123
123
|
| `checked` | `boolean` | `false` | İşaretli mi |
|
|
124
|
-
| `type` | `"checkbox" \| "switch"` | `"checkbox"` | Görünüm tipi |
|
|
124
|
+
| `type` | `"checkbox" \| "switch" \| "radio"` | `"checkbox"` | Görünüm tipi |
|
|
125
125
|
| `disabled` | `boolean` | `false` | Devre dışı |
|
|
126
126
|
| `indeterminate` | `boolean` | `false` | Belirsiz durum |
|
|
127
127
|
|
|
@@ -133,6 +133,11 @@ Onay kutusu veya toggle switch.
|
|
|
133
133
|
<!-- Switch görünümü -->
|
|
134
134
|
<logosphere-checkbox type="switch" label="Bildirimleri etkinleştir" checked></logosphere-checkbox>
|
|
135
135
|
|
|
136
|
+
<!-- Radio görünümü: tıklanınca işaretlenir, tekrar tıklamayla kapanmaz.
|
|
137
|
+
Grup davranışı consumer'da yönetilir (lgsChange ile diğerlerinin checked'i kapatılır) -->
|
|
138
|
+
<logosphere-checkbox type="radio" label="Seçenek 1" value="1" checked></logosphere-checkbox>
|
|
139
|
+
<logosphere-checkbox type="radio" label="Seçenek 2" value="2"></logosphere-checkbox>
|
|
140
|
+
|
|
136
141
|
<!-- Event dinleme -->
|
|
137
142
|
<script>
|
|
138
143
|
document.querySelector("logosphere-checkbox")
|
|
@@ -4,7 +4,7 @@ export declare class Checkbox extends LitElement {
|
|
|
4
4
|
label: string;
|
|
5
5
|
value: string;
|
|
6
6
|
checked: boolean;
|
|
7
|
-
type: "checkbox" | "switch";
|
|
7
|
+
type: "checkbox" | "switch" | "radio";
|
|
8
8
|
disabled: boolean;
|
|
9
9
|
indeterminate: boolean;
|
|
10
10
|
private internalChecked;
|
|
@@ -15,6 +15,7 @@ export declare class Checkbox extends LitElement {
|
|
|
15
15
|
private setIndeterminate;
|
|
16
16
|
private toggleChecked;
|
|
17
17
|
private renderCheckbox;
|
|
18
|
+
private renderRadio;
|
|
18
19
|
private renderSwitch;
|
|
19
20
|
render(): import("lit-html").TemplateResult<1>;
|
|
20
21
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS as x, css as z, LitElement as C, isServer as k, html as a } from "lit";
|
|
2
2
|
import { property as d, state as l, query as y, customElement as $ } from "lit/decorators.js";
|
|
3
3
|
import { unsafeHTML as D } from "lit/directives/unsafe-html.js";
|
|
4
|
-
import "./combobox-
|
|
4
|
+
import "./combobox-CFF30L-n.js";
|
|
5
5
|
import "./button-Uu9oaieg.js";
|
|
6
6
|
import "./input-BUX_2G5m.js";
|
|
7
7
|
import "./ui-icon-Ctn4nGFa.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const n=require("lit"),r=require("lit/decorators.js"),y=require("lit/directives/unsafe-html.js");require("./combobox-BV4AKTqp.cjs");require("./button-DRZ4sG4T.cjs");require("./input-Tkm7VBBl.cjs");require("./ui-icon-jKyMV1zp.cjs");const w=":host{display:block;z-index:9999}.chatbot{font-family:var(--font-family-base)}.chatbot__overlay{position:fixed;inset:0;background-color:#0003;z-index:var(--z-index-modal-backdrop)}.chatbot__launcher{position:fixed;z-index:var(--z-index-modal);display:flex;align-items:center;gap:var(--spacing-4);padding-left:var(--spacing-4);padding-right:var(--spacing-4);height:66px;color:#fff;border-radius:var(--radius-xl);cursor:pointer;box-shadow:var(--shadow-md);background-color:var(--color-body-bg);overflow:hidden;transition:box-shadow var(--transition-speed-fast) var(--transition-timing)}.chatbot__launcher:hover{box-shadow:var(--shadow-md)}.chatbot__launcher--draggable{cursor:move}.chatbot__launcher--hidden{visibility:hidden;width:72px;height:66px;justify-content:center;padding:0}.chatbot__launcher-icon{width:40px;height:34px;flex-shrink:0}.chatbot__launcher-text{display:flex;flex-direction:column}.chatbot__launcher-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;white-space:nowrap;color:var(--color-body-color)}.chatbot__launcher-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;white-space:nowrap;color:var(--color-tertiary)}.chatbot__window{position:fixed;z-index:var(--z-index-modal);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-body-bg)}.chatbot__window--hidden{display:none}.chatbot__window--fullscreen{inset:80px 50px;width:auto;height:auto}.chatbot__resize-top{position:absolute;top:0;left:0;right:0;height:8px;cursor:ns-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-top:hover{background-color:#0000000d}.chatbot__resize-side{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-side:hover{background-color:#0000000d}.chatbot__resize-side--left{left:0}.chatbot__resize-side--right{right:0}.chatbot__resize-corner{position:absolute;top:0;width:16px;height:16px;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-corner:hover{background-color:#0000001a}.chatbot__resize-corner--nwse{left:0;cursor:nwse-resize}.chatbot__resize-corner--nesw{right:0;cursor:nesw-resize}.chatbot__header{height:74px;display:flex;align-items:center;justify-content:space-between;padding-left:var(--spacing-5);padding-right:var(--spacing-4);gap:var(--spacing-4);flex-shrink:0;background-color:var(--color-body-bg);border-bottom:1px solid var(--color-border)}.chatbot__header-info{display:flex;align-items:center;gap:var(--spacing-4)}.chatbot__header-logo{width:50px;height:41px}.chatbot__header-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;color:var(--color-body-text)}.chatbot__header-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;color:var(--color-tertiary)}.chatbot__header-actions{display:flex;align-items:center;gap:var(--spacing-2)}.chatbot__body{flex:1;display:flex;flex-direction:column;background-color:var(--color-body-bg);position:relative;overflow:hidden}.chatbot__product{padding:var(--spacing-3);padding-bottom:0;flex-shrink:0;margin:0 var(--spacing-3)}.chatbot__messages{flex:1;display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-4);padding:var(--spacing-4);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.chatbot__messages::-webkit-scrollbar{display:none}.chatbot__messages-wrapper{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}.chatbot__scroll-down{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:36px;height:36px;border-radius:var(--radius-full);background-color:var(--color-body-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-body-text);z-index:10;transition:background-color var(--transition-speed-fast) var(--transition-timing),box-shadow var(--transition-speed-fast) var(--transition-timing);padding:0}.chatbot__scroll-down:hover{background-color:var(--color-light);box-shadow:var(--shadow-lg)}.chatbot__message{display:flex}.chatbot__message--user{justify-content:flex-end}.chatbot__message--assistant{display:block}.chatbot__message--system{justify-content:flex-start}.chatbot__bubble{position:relative;color:var(--color-body-text);max-width:85%;border-radius:var(--radius-md);padding:var(--spacing-4);font-size:var(--font-size-sm);line-height:20px;font-weight:var(--font-weight-medium)}.chatbot__bubble--user{background-color:var(--color-primary);color:#fff;border-bottom-right-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.chatbot__bubble--user a{color:#ffffffe6}.chatbot__bubble--assistant,.chatbot__bubble--system{background-color:var(--color-light);border-bottom-left-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}.chatbot__message-content p{margin:0}.chatbot__message-content ol{list-style-type:decimal;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content ul{list-style-type:disc;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content li>ol,.chatbot__message-content li>ul{margin-top:var(--spacing-1);margin-bottom:var(--spacing-1)}.chatbot__message-content ol ol{list-style-type:lower-alpha}.chatbot__message-content ol ol ol{list-style-type:lower-roman}.chatbot__message-content ul ul{list-style-type:circle}.chatbot__message-content ul ul ul{list-style-type:square}.chatbot__message-content li{padding-left:var(--spacing-1)}.chatbot__message-content a{color:var(--color-primary);text-decoration:underline;transition:color var(--transition-speed-fast) var(--transition-timing)}.chatbot__message-content a:hover{color:var(--color-primary-hover)}.chatbot__feedback{display:flex;align-items:center;gap:var(--spacing-2);padding-top:var(--spacing-2)}.chatbot__typing-wrapper{display:flex;justify-content:flex-start}.chatbot__typing{background-color:var(--color-light);padding:var(--spacing-3);border-radius:var(--radius-xl);border-bottom-left-radius:0;display:inline-flex;align-items:center;gap:2px}.chatbot__typing-dot{display:inline-block;width:6px;height:6px;background-color:var(--color-gray-300);border-radius:var(--radius-full);animation:chatbot-typing 1.4s infinite ease-in-out both;margin:0 2px}.chatbot__typing-dot:nth-child(1){animation-delay:-.32s}.chatbot__typing-dot:nth-child(2){animation-delay:-.16s}@keyframes chatbot-typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chatbot__input-area{padding:var(--spacing-4);padding-top:var(--spacing-2);padding-bottom:var(--spacing-1);background-color:var(--color-body-bg)}.chatbot__input-wrapper{position:relative;display:flex;align-items:center;gap:var(--spacing-2);background-color:var(--color-light);border-radius:var(--radius-md);padding:var(--spacing-2);border:1px solid transparent;transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__input-wrapper:focus-within{background-color:var(--color-body-bg);border-color:var(--color-border)}.chatbot__input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-body-text)}.chatbot__input::placeholder{color:var(--color-tertiary)}.chatbot__input:disabled{opacity:.5;cursor:not-allowed}.chatbot__footer{display:flex;align-items:center;justify-content:center;padding-bottom:var(--spacing-2)}.chatbot__footer-text{margin:0;padding:0;color:var(--color-secondary);font-size:var(--font-size-xs);font-family:var(--font-family-base)}.chatbot__product-selector{padding:var(--spacing-3) var(--spacing-3) 0;flex-shrink:0}.chatbot__product-input{display:block;width:100%;height:24px;padding-left:var(--spacing-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-body-color);font-size:var(--font-size-md);outline:none}";var x=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(h,t,e,i)=>{for(var o=i>1?void 0:i?C(t,e):t,s=h.length-1,l;s>=0;s--)(l=h[s])&&(o=(i?l(t,e,o):l(o))||o);return i&&o&&x(t,e,o),o};exports.LogosphereChatBot=class extends n.LitElement{constructor(){super(...arguments),this.returnUri="",this.questionPrompt="",this.minimizedIconOnly=!1,this.draggable=!1,this.resizable=!1,this.products=[],this.openInitially=!1,this.showFeedbackButtons=!1,this.open=!1,this.fullscreen=!1,this.messages=[],this.isLoading=!1,this.inputText="",this.selectedProductId="",this.windowWidth=440,this.windowHeight=700,this.position={right:20,bottom:20},this.isDragging=!1,this.screenWidth=1024,this.userAtBottom=!0,this.showScrollDown=!1,this.dragStartPos={x:0,y:0},this.initialPosition={right:0,bottom:0},this.isResizing=!1,this.resizeDirection="horizontal",this.resizeStartWidth=0,this.resizeStartHeight=0,this.onWindowResize=()=>{this.screenWidth=window.innerWidth;const t=window.innerHeight-40;this.windowHeight>t&&(this.windowHeight=t)},this.onToggle=()=>{this.open=!this.open,this.open&&this.scrollToBottom(!0)},this.onClose=()=>{this.open=!1,this.fullscreen=!1},this.onToggleFullscreen=()=>{this.fullscreen=!this.fullscreen},this.onMouseMove=t=>{if(this.isDragging){const e=this.dragStartPos.x-t.clientX,i=this.dragStartPos.y-t.clientY,s=this.shadowRoot?.querySelector(".chatbot__launcher")?.getBoundingClientRect(),l=s?.width||72,g=s?.height||66;this.position={right:Math.max(0,Math.min(window.innerWidth-l,this.initialPosition.right+e)),bottom:Math.max(0,Math.min(window.innerHeight-g,this.initialPosition.bottom+i))}}else if(this.isResizing){const e=this.dragStartPos.x-t.clientX,i=this.dragStartPos.y-t.clientY;if(this.resizeDirection==="horizontal"||this.resizeDirection==="both"){const o=this.position.right<this.screenWidth/2;this.windowWidth=Math.max(300,this.resizeStartWidth+(o?e:-e))}(this.resizeDirection==="vertical"||this.resizeDirection==="both")&&(this.windowHeight=Math.max(400,this.resizeStartHeight+i))}},this.onMouseUp=t=>{this.isDragging?(this.isDragging=!1,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),Math.hypot(t.clientX-this.dragStartPos.x,t.clientY-this.dragStartPos.y)<5&&this.onToggle()):this.isResizing&&(this.isResizing=!1,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp))},this.handleKeyDown=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this.sendMessage())},this.onInput=t=>{const e=t.target;this.inputText=e?e.value:t.detail},this.onChatScroll=()=>{const t=this.isNearBottom();this.userAtBottom=t,t&&(this.showScrollDown=!1)},this.onScrollToBottomClick=()=>{this.scrollToBottom(!0)},this.onRate=async(t,e)=>{if(!(!t.eventId||t.rating===e))try{await this.rateMessage(t.eventId,e),this.messages=this.messages.map(i=>i===t?{...i,rating:e}:i)}catch{}},this.onCopyMessage=t=>{navigator.clipboard.writeText(t)}}connectedCallback(){super.connectedCallback(),!n.isServer&&(this.screenWidth=window.innerWidth,this.windowHeight=Math.min(700,window.innerHeight-40),window.addEventListener("resize",this.onWindowResize))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.onWindowResize),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp)}async firstUpdated(){this.selectedProductId=this._resolveInitialProduct(),this.open=this.openInitially,this.open&&await this.initConversation()}updated(t){t.has("products")&&this.handleProductUpdate(),t.has("messages")&&this.scrollToBottom(),t.has("open")&&this.open&&!this.conversationId&&this.initConversation()}_resolveInitialProduct(){if(!this.products.length)return"";const t=this.products.find(e=>e.selected);return t?t.id:this.products.length===1?this.products[0].id:""}handleProductUpdate(){if(!this.products.length)return;const t=this.products.find(i=>i.selected),e=this.products.some(i=>i.id===this.selectedProductId);t&&t.id!==this.selectedProductId?(this.selectedProductId=t.id,this.messages=[],this.conversationId=void 0,this.open&&this.initConversation()):e||(this.selectedProductId=this._resolveInitialProduct(),this.messages=[],this.conversationId=void 0,this.open&&this.initConversation()),requestAnimationFrame(()=>this.updateComboboxItems())}updateComboboxItems(){const t=this.productEl;if(!t||this.products?.length<=1)return;const e=this.products.map(o=>({value:o.id,label:o.name}));if(t.items=e,(t.selectedItems?.()||[])[0]?.value!==this.selectedProductId){const o=e.find(s=>s.value===this.selectedProductId);t.setSelected&&t.setSelected(o?[o]:[])}}async onProductChange(t){const e=t.detail?.selected?.[0]?.value;e&&e!==this.selectedProductId&&(this.selectedProductId=e)}onMouseDown(t){this.draggable&&(t.preventDefault(),this.isDragging=!0,this.dragStartPos={x:t.clientX,y:t.clientY},this.initialPosition={...this.position},window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))}startResize(t,e){this.resizable&&(t.preventDefault(),t.stopPropagation(),this.isResizing=!0,this.resizeDirection=e,this.dragStartPos={x:t.clientX,y:t.clientY},this.resizeStartWidth=this.windowWidth,this.resizeStartHeight=this.windowHeight,window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))}async ensureToken(t=!1){const e="logosphere_chatbot_token";if(t&&(this.assertionToken=void 0,localStorage.removeItem(e)),!t){const s=localStorage.getItem(e);if(s){this.assertionToken=s;return}}const o=await(await fetch(`${this.returnUri}/api/chat/start`)).json();if(!o.Success||!o.Data?.Token)throw new Error("Token alınamadı");this.assertionToken=o.Data.Token,localStorage.setItem(e,this.assertionToken)}async postChat(t){await this.ensureToken();const e=`${this.returnUri}/api/chat/completions`,i=()=>fetch(e,{method:"POST",headers:{"Content-Type":"application/json",client_assertion:this.assertionToken,client_assertion_type:"urn:ietf:params:oauth:client-assertion-type:jwt-bearer"},body:JSON.stringify(t)});let o=await i();if(o.status===401&&(await this.ensureToken(!0),o=await i()),!o.ok)throw new Error(`HTTP ${o.status}`);return o.json()}async initConversation(){if(!this.isLoading){this.isLoading=!0;try{await this.ensureToken();const t=await this.postChat({ChatCompletionType:"NewConversation",Context:this.selectedProductId,QuestionPrompt:this.questionPrompt});this.conversationId=t.Data.ConversationId;const e=t.Data.Choices?.[0]?.Message?.Content;e&&this.addMessage(e,"assistant",void 0,!0)}catch{this.addMessage("Bir hata oluştu, lütfen tekrar deneyiniz.","system")}finally{this.isLoading=!1}}}async sendMessage(){const t=this.inputText.trim();if(!(!t||!this.conversationId||this.isLoading)){if(!this.selectedProductId){this.addMessage("Lütfen önce bir ürün seçiniz.","system");return}this.addMessage(t,"user"),this.inputText="",this.scrollToBottom(),this.isLoading=!0;try{const e=await this.postChat({ChatCompletionType:"ConversationUpdate",Content:t,Context:this.selectedProductId,ConversationId:this.conversationId,QuestionPrompt:this.questionPrompt}),i=e.Data?.Choices?.[0]?.Message?.Content,o=e.Data?.EventId;this.addMessage(i||"Cevap alınamadı.","assistant",o)}catch{this.addMessage("Bağlantı hatası.","system")}finally{this.isLoading=!1}}}addMessage(t,e,i,o=!1){this.messages=[...this.messages,{content:t,role:e,timestamp:Date.now(),eventId:i,isWelcome:o}]}isNearBottom(t=50){const e=this.chatContainer;return e?e.scrollHeight-e.scrollTop-e.clientHeight<=t:!0}scrollToBottom(t=!1){if(!t&&!this.userAtBottom){this.showScrollDown=!0;return}setTimeout(()=>{this.chatContainer&&(this.chatContainer.scrollTop=this.chatContainer.scrollHeight,this.showScrollDown=!1,this.userAtBottom=!0)},0)}async rateMessage(t,e,i=null){await this.ensureToken();const o=`${this.returnUri}/api/chat/completion/rate`;await fetch(o,{method:"POST",headers:{"Content-Type":"application/json",client_assertion:this.assertionToken,client_assertion_type:"urn:ietf:params:oauth:client-assertion-type:jwt-bearer"},body:JSON.stringify({EventId:t,Rate:e,Comment:i})})}formatContent(t){if(!t)return"";const i=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").split(`
|
|
1
|
+
"use strict";const n=require("lit"),r=require("lit/decorators.js"),y=require("lit/directives/unsafe-html.js");require("./combobox-s7NFPAd3.cjs");require("./button-DRZ4sG4T.cjs");require("./input-Tkm7VBBl.cjs");require("./ui-icon-jKyMV1zp.cjs");const w=":host{display:block;z-index:9999}.chatbot{font-family:var(--font-family-base)}.chatbot__overlay{position:fixed;inset:0;background-color:#0003;z-index:var(--z-index-modal-backdrop)}.chatbot__launcher{position:fixed;z-index:var(--z-index-modal);display:flex;align-items:center;gap:var(--spacing-4);padding-left:var(--spacing-4);padding-right:var(--spacing-4);height:66px;color:#fff;border-radius:var(--radius-xl);cursor:pointer;box-shadow:var(--shadow-md);background-color:var(--color-body-bg);overflow:hidden;transition:box-shadow var(--transition-speed-fast) var(--transition-timing)}.chatbot__launcher:hover{box-shadow:var(--shadow-md)}.chatbot__launcher--draggable{cursor:move}.chatbot__launcher--hidden{visibility:hidden;width:72px;height:66px;justify-content:center;padding:0}.chatbot__launcher-icon{width:40px;height:34px;flex-shrink:0}.chatbot__launcher-text{display:flex;flex-direction:column}.chatbot__launcher-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;white-space:nowrap;color:var(--color-body-color)}.chatbot__launcher-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;white-space:nowrap;color:var(--color-tertiary)}.chatbot__window{position:fixed;z-index:var(--z-index-modal);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-body-bg)}.chatbot__window--hidden{display:none}.chatbot__window--fullscreen{inset:80px 50px;width:auto;height:auto}.chatbot__resize-top{position:absolute;top:0;left:0;right:0;height:8px;cursor:ns-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-top:hover{background-color:#0000000d}.chatbot__resize-side{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-side:hover{background-color:#0000000d}.chatbot__resize-side--left{left:0}.chatbot__resize-side--right{right:0}.chatbot__resize-corner{position:absolute;top:0;width:16px;height:16px;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-corner:hover{background-color:#0000001a}.chatbot__resize-corner--nwse{left:0;cursor:nwse-resize}.chatbot__resize-corner--nesw{right:0;cursor:nesw-resize}.chatbot__header{height:74px;display:flex;align-items:center;justify-content:space-between;padding-left:var(--spacing-5);padding-right:var(--spacing-4);gap:var(--spacing-4);flex-shrink:0;background-color:var(--color-body-bg);border-bottom:1px solid var(--color-border)}.chatbot__header-info{display:flex;align-items:center;gap:var(--spacing-4)}.chatbot__header-logo{width:50px;height:41px}.chatbot__header-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;color:var(--color-body-text)}.chatbot__header-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;color:var(--color-tertiary)}.chatbot__header-actions{display:flex;align-items:center;gap:var(--spacing-2)}.chatbot__body{flex:1;display:flex;flex-direction:column;background-color:var(--color-body-bg);position:relative;overflow:hidden}.chatbot__product{padding:var(--spacing-3);padding-bottom:0;flex-shrink:0;margin:0 var(--spacing-3)}.chatbot__messages{flex:1;display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-4);padding:var(--spacing-4);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.chatbot__messages::-webkit-scrollbar{display:none}.chatbot__messages-wrapper{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}.chatbot__scroll-down{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:36px;height:36px;border-radius:var(--radius-full);background-color:var(--color-body-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-body-text);z-index:10;transition:background-color var(--transition-speed-fast) var(--transition-timing),box-shadow var(--transition-speed-fast) var(--transition-timing);padding:0}.chatbot__scroll-down:hover{background-color:var(--color-light);box-shadow:var(--shadow-lg)}.chatbot__message{display:flex}.chatbot__message--user{justify-content:flex-end}.chatbot__message--assistant{display:block}.chatbot__message--system{justify-content:flex-start}.chatbot__bubble{position:relative;color:var(--color-body-text);max-width:85%;border-radius:var(--radius-md);padding:var(--spacing-4);font-size:var(--font-size-sm);line-height:20px;font-weight:var(--font-weight-medium)}.chatbot__bubble--user{background-color:var(--color-primary);color:#fff;border-bottom-right-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.chatbot__bubble--user a{color:#ffffffe6}.chatbot__bubble--assistant,.chatbot__bubble--system{background-color:var(--color-light);border-bottom-left-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}.chatbot__message-content p{margin:0}.chatbot__message-content ol{list-style-type:decimal;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content ul{list-style-type:disc;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content li>ol,.chatbot__message-content li>ul{margin-top:var(--spacing-1);margin-bottom:var(--spacing-1)}.chatbot__message-content ol ol{list-style-type:lower-alpha}.chatbot__message-content ol ol ol{list-style-type:lower-roman}.chatbot__message-content ul ul{list-style-type:circle}.chatbot__message-content ul ul ul{list-style-type:square}.chatbot__message-content li{padding-left:var(--spacing-1)}.chatbot__message-content a{color:var(--color-primary);text-decoration:underline;transition:color var(--transition-speed-fast) var(--transition-timing)}.chatbot__message-content a:hover{color:var(--color-primary-hover)}.chatbot__feedback{display:flex;align-items:center;gap:var(--spacing-2);padding-top:var(--spacing-2)}.chatbot__typing-wrapper{display:flex;justify-content:flex-start}.chatbot__typing{background-color:var(--color-light);padding:var(--spacing-3);border-radius:var(--radius-xl);border-bottom-left-radius:0;display:inline-flex;align-items:center;gap:2px}.chatbot__typing-dot{display:inline-block;width:6px;height:6px;background-color:var(--color-gray-300);border-radius:var(--radius-full);animation:chatbot-typing 1.4s infinite ease-in-out both;margin:0 2px}.chatbot__typing-dot:nth-child(1){animation-delay:-.32s}.chatbot__typing-dot:nth-child(2){animation-delay:-.16s}@keyframes chatbot-typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chatbot__input-area{padding:var(--spacing-4);padding-top:var(--spacing-2);padding-bottom:var(--spacing-1);background-color:var(--color-body-bg)}.chatbot__input-wrapper{position:relative;display:flex;align-items:center;gap:var(--spacing-2);background-color:var(--color-light);border-radius:var(--radius-md);padding:var(--spacing-2);border:1px solid transparent;transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__input-wrapper:focus-within{background-color:var(--color-body-bg);border-color:var(--color-border)}.chatbot__input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-body-text)}.chatbot__input::placeholder{color:var(--color-tertiary)}.chatbot__input:disabled{opacity:.5;cursor:not-allowed}.chatbot__footer{display:flex;align-items:center;justify-content:center;padding-bottom:var(--spacing-2)}.chatbot__footer-text{margin:0;padding:0;color:var(--color-secondary);font-size:var(--font-size-xs);font-family:var(--font-family-base)}.chatbot__product-selector{padding:var(--spacing-3) var(--spacing-3) 0;flex-shrink:0}.chatbot__product-input{display:block;width:100%;height:24px;padding-left:var(--spacing-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-body-color);font-size:var(--font-size-md);outline:none}";var x=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(h,t,e,i)=>{for(var o=i>1?void 0:i?C(t,e):t,s=h.length-1,l;s>=0;s--)(l=h[s])&&(o=(i?l(t,e,o):l(o))||o);return i&&o&&x(t,e,o),o};exports.LogosphereChatBot=class extends n.LitElement{constructor(){super(...arguments),this.returnUri="",this.questionPrompt="",this.minimizedIconOnly=!1,this.draggable=!1,this.resizable=!1,this.products=[],this.openInitially=!1,this.showFeedbackButtons=!1,this.open=!1,this.fullscreen=!1,this.messages=[],this.isLoading=!1,this.inputText="",this.selectedProductId="",this.windowWidth=440,this.windowHeight=700,this.position={right:20,bottom:20},this.isDragging=!1,this.screenWidth=1024,this.userAtBottom=!0,this.showScrollDown=!1,this.dragStartPos={x:0,y:0},this.initialPosition={right:0,bottom:0},this.isResizing=!1,this.resizeDirection="horizontal",this.resizeStartWidth=0,this.resizeStartHeight=0,this.onWindowResize=()=>{this.screenWidth=window.innerWidth;const t=window.innerHeight-40;this.windowHeight>t&&(this.windowHeight=t)},this.onToggle=()=>{this.open=!this.open,this.open&&this.scrollToBottom(!0)},this.onClose=()=>{this.open=!1,this.fullscreen=!1},this.onToggleFullscreen=()=>{this.fullscreen=!this.fullscreen},this.onMouseMove=t=>{if(this.isDragging){const e=this.dragStartPos.x-t.clientX,i=this.dragStartPos.y-t.clientY,s=this.shadowRoot?.querySelector(".chatbot__launcher")?.getBoundingClientRect(),l=s?.width||72,g=s?.height||66;this.position={right:Math.max(0,Math.min(window.innerWidth-l,this.initialPosition.right+e)),bottom:Math.max(0,Math.min(window.innerHeight-g,this.initialPosition.bottom+i))}}else if(this.isResizing){const e=this.dragStartPos.x-t.clientX,i=this.dragStartPos.y-t.clientY;if(this.resizeDirection==="horizontal"||this.resizeDirection==="both"){const o=this.position.right<this.screenWidth/2;this.windowWidth=Math.max(300,this.resizeStartWidth+(o?e:-e))}(this.resizeDirection==="vertical"||this.resizeDirection==="both")&&(this.windowHeight=Math.max(400,this.resizeStartHeight+i))}},this.onMouseUp=t=>{this.isDragging?(this.isDragging=!1,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),Math.hypot(t.clientX-this.dragStartPos.x,t.clientY-this.dragStartPos.y)<5&&this.onToggle()):this.isResizing&&(this.isResizing=!1,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp))},this.handleKeyDown=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this.sendMessage())},this.onInput=t=>{const e=t.target;this.inputText=e?e.value:t.detail},this.onChatScroll=()=>{const t=this.isNearBottom();this.userAtBottom=t,t&&(this.showScrollDown=!1)},this.onScrollToBottomClick=()=>{this.scrollToBottom(!0)},this.onRate=async(t,e)=>{if(!(!t.eventId||t.rating===e))try{await this.rateMessage(t.eventId,e),this.messages=this.messages.map(i=>i===t?{...i,rating:e}:i)}catch{}},this.onCopyMessage=t=>{navigator.clipboard.writeText(t)}}connectedCallback(){super.connectedCallback(),!n.isServer&&(this.screenWidth=window.innerWidth,this.windowHeight=Math.min(700,window.innerHeight-40),window.addEventListener("resize",this.onWindowResize))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.onWindowResize),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp)}async firstUpdated(){this.selectedProductId=this._resolveInitialProduct(),this.open=this.openInitially,this.open&&await this.initConversation()}updated(t){t.has("products")&&this.handleProductUpdate(),t.has("messages")&&this.scrollToBottom(),t.has("open")&&this.open&&!this.conversationId&&this.initConversation()}_resolveInitialProduct(){if(!this.products.length)return"";const t=this.products.find(e=>e.selected);return t?t.id:this.products.length===1?this.products[0].id:""}handleProductUpdate(){if(!this.products.length)return;const t=this.products.find(i=>i.selected),e=this.products.some(i=>i.id===this.selectedProductId);t&&t.id!==this.selectedProductId?(this.selectedProductId=t.id,this.messages=[],this.conversationId=void 0,this.open&&this.initConversation()):e||(this.selectedProductId=this._resolveInitialProduct(),this.messages=[],this.conversationId=void 0,this.open&&this.initConversation()),requestAnimationFrame(()=>this.updateComboboxItems())}updateComboboxItems(){const t=this.productEl;if(!t||this.products?.length<=1)return;const e=this.products.map(o=>({value:o.id,label:o.name}));if(t.items=e,(t.selectedItems?.()||[])[0]?.value!==this.selectedProductId){const o=e.find(s=>s.value===this.selectedProductId);t.setSelected&&t.setSelected(o?[o]:[])}}async onProductChange(t){const e=t.detail?.selected?.[0]?.value;e&&e!==this.selectedProductId&&(this.selectedProductId=e)}onMouseDown(t){this.draggable&&(t.preventDefault(),this.isDragging=!0,this.dragStartPos={x:t.clientX,y:t.clientY},this.initialPosition={...this.position},window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))}startResize(t,e){this.resizable&&(t.preventDefault(),t.stopPropagation(),this.isResizing=!0,this.resizeDirection=e,this.dragStartPos={x:t.clientX,y:t.clientY},this.resizeStartWidth=this.windowWidth,this.resizeStartHeight=this.windowHeight,window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))}async ensureToken(t=!1){const e="logosphere_chatbot_token";if(t&&(this.assertionToken=void 0,localStorage.removeItem(e)),!t){const s=localStorage.getItem(e);if(s){this.assertionToken=s;return}}const o=await(await fetch(`${this.returnUri}/api/chat/start`)).json();if(!o.Success||!o.Data?.Token)throw new Error("Token alınamadı");this.assertionToken=o.Data.Token,localStorage.setItem(e,this.assertionToken)}async postChat(t){await this.ensureToken();const e=`${this.returnUri}/api/chat/completions`,i=()=>fetch(e,{method:"POST",headers:{"Content-Type":"application/json",client_assertion:this.assertionToken,client_assertion_type:"urn:ietf:params:oauth:client-assertion-type:jwt-bearer"},body:JSON.stringify(t)});let o=await i();if(o.status===401&&(await this.ensureToken(!0),o=await i()),!o.ok)throw new Error(`HTTP ${o.status}`);return o.json()}async initConversation(){if(!this.isLoading){this.isLoading=!0;try{await this.ensureToken();const t=await this.postChat({ChatCompletionType:"NewConversation",Context:this.selectedProductId,QuestionPrompt:this.questionPrompt});this.conversationId=t.Data.ConversationId;const e=t.Data.Choices?.[0]?.Message?.Content;e&&this.addMessage(e,"assistant",void 0,!0)}catch{this.addMessage("Bir hata oluştu, lütfen tekrar deneyiniz.","system")}finally{this.isLoading=!1}}}async sendMessage(){const t=this.inputText.trim();if(!(!t||!this.conversationId||this.isLoading)){if(!this.selectedProductId){this.addMessage("Lütfen önce bir ürün seçiniz.","system");return}this.addMessage(t,"user"),this.inputText="",this.scrollToBottom(),this.isLoading=!0;try{const e=await this.postChat({ChatCompletionType:"ConversationUpdate",Content:t,Context:this.selectedProductId,ConversationId:this.conversationId,QuestionPrompt:this.questionPrompt}),i=e.Data?.Choices?.[0]?.Message?.Content,o=e.Data?.EventId;this.addMessage(i||"Cevap alınamadı.","assistant",o)}catch{this.addMessage("Bağlantı hatası.","system")}finally{this.isLoading=!1}}}addMessage(t,e,i,o=!1){this.messages=[...this.messages,{content:t,role:e,timestamp:Date.now(),eventId:i,isWelcome:o}]}isNearBottom(t=50){const e=this.chatContainer;return e?e.scrollHeight-e.scrollTop-e.clientHeight<=t:!0}scrollToBottom(t=!1){if(!t&&!this.userAtBottom){this.showScrollDown=!0;return}setTimeout(()=>{this.chatContainer&&(this.chatContainer.scrollTop=this.chatContainer.scrollHeight,this.showScrollDown=!1,this.userAtBottom=!0)},0)}async rateMessage(t,e,i=null){await this.ensureToken();const o=`${this.returnUri}/api/chat/completion/rate`;await fetch(o,{method:"POST",headers:{"Content-Type":"application/json",client_assertion:this.assertionToken,client_assertion_type:"urn:ietf:params:oauth:client-assertion-type:jwt-bearer"},body:JSON.stringify({EventId:t,Rate:e,Comment:i})})}formatContent(t){if(!t)return"";const i=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").split(`
|
|
2
2
|
`);let o="";const s=[];let l=!1;const g=()=>{l&&(o+="</li>",l=!1)},f=d=>{for(;s.length>0&&s[s.length-1].indent>=d;)g(),o+=`</${s.pop().type}>`,s.length>0&&(l=!0)},b=()=>f(-1);for(const d of i){const p=d.match(/^(\s*)\d+\.\s+(.*)/),m=d.match(/^(\s*)[-*]\s+(.*)/);if(p||m){const c=(p?p[1]:m[1]).length,u=p?"ol":"ul",_=p?p[2]:m[2];if(s.length===0)o+=`<${u}>`,s.push({type:u,indent:c});else{const v=s[s.length-1];c>v.indent?(o+=`<${u}>`,s.push({type:u,indent:c})):c===v.indent?g():(f(c+1),s.length>0&&s[s.length-1].indent===c?g():(b(),o+=`<${u}>`,s.push({type:u,indent:c})))}o+=`<li>${_}`,l=!0}else d.trim()===""?s.length===0&&(o+="<br>"):(b(),o+=`<p>${d}</p>`)}return b(),o.replace(/\*\*(.*?)\*\*/g,"<strong>$1</strong>").replace(/\*(.*?)\*/g,"<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')}render(){const t=this.position.right<this.screenWidth/2;return n.html`
|
|
3
3
|
<div class="chatbot">
|
|
4
4
|
${this.renderOverlay()}
|
package/dist/chatbot.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./chatbot-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./chatbot-Dl6P98Jq.cjs");Object.defineProperty(exports,"LogosphereChatBot",{enumerable:!0,get:()=>e.LogosphereChatBot});
|
package/dist/chatbot.js
CHANGED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { unsafeCSS as b, css as k, LitElement as u, nothing as h, html as a } from "lit";
|
|
2
|
+
import { property as n, state as f, customElement as v } from "lit/decorators.js";
|
|
3
|
+
import { ref as p } from "lit/directives/ref.js";
|
|
4
|
+
const m = '.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
|
|
5
|
+
var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, c, s) => {
|
|
6
|
+
for (var i = s > 1 ? void 0 : s ? g(t, c) : t, l = e.length - 1, d; l >= 0; l--)
|
|
7
|
+
(d = e[l]) && (i = (s ? d(t, c, i) : d(i)) || i);
|
|
8
|
+
return s && i && x(t, c, i), i;
|
|
9
|
+
};
|
|
10
|
+
let r = class extends u {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.label = "", this.value = "", this.checked = !1, this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1;
|
|
13
|
+
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
super.connectedCallback(), this.internalChecked = this.checked;
|
|
16
|
+
}
|
|
17
|
+
firstUpdated() {
|
|
18
|
+
this.setIndeterminate();
|
|
19
|
+
}
|
|
20
|
+
updated(e) {
|
|
21
|
+
e.has("indeterminate") && this.setIndeterminate(), e.has("checked") && (this.internalChecked = this.checked);
|
|
22
|
+
}
|
|
23
|
+
setIndeterminate() {
|
|
24
|
+
this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
|
|
25
|
+
}
|
|
26
|
+
toggleChecked() {
|
|
27
|
+
if (!this.disabled) {
|
|
28
|
+
if (this.type === "radio") {
|
|
29
|
+
if (this.internalChecked) return;
|
|
30
|
+
this.internalChecked = !0;
|
|
31
|
+
} else this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked;
|
|
32
|
+
this.dispatchEvent(
|
|
33
|
+
new CustomEvent("lgsChange", {
|
|
34
|
+
detail: {
|
|
35
|
+
checked: this.internalChecked,
|
|
36
|
+
indeterminate: this.indeterminate,
|
|
37
|
+
value: this.value
|
|
38
|
+
},
|
|
39
|
+
bubbles: !0,
|
|
40
|
+
composed: !0
|
|
41
|
+
})
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
renderCheckbox() {
|
|
46
|
+
const e = [
|
|
47
|
+
"checkbox-control",
|
|
48
|
+
this.internalChecked ? "checkbox-control--checked" : "",
|
|
49
|
+
this.indeterminate ? "checkbox-control--indeterminate" : ""
|
|
50
|
+
].filter(Boolean).join(" ");
|
|
51
|
+
return a`
|
|
52
|
+
<div
|
|
53
|
+
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
54
|
+
@click=${this.toggleChecked}
|
|
55
|
+
>
|
|
56
|
+
<input
|
|
57
|
+
type="checkbox"
|
|
58
|
+
class="checkbox-input"
|
|
59
|
+
.checked=${this.internalChecked}
|
|
60
|
+
?disabled=${this.disabled}
|
|
61
|
+
.value=${this.value}
|
|
62
|
+
${p((t) => this.inputElement = t)}
|
|
63
|
+
/>
|
|
64
|
+
<span class="${e}"></span>
|
|
65
|
+
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
68
|
+
}
|
|
69
|
+
renderRadio() {
|
|
70
|
+
const e = [
|
|
71
|
+
"radio-control",
|
|
72
|
+
this.internalChecked ? "radio-control--checked" : ""
|
|
73
|
+
].filter(Boolean).join(" ");
|
|
74
|
+
return a`
|
|
75
|
+
<div
|
|
76
|
+
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
77
|
+
@click=${this.toggleChecked}
|
|
78
|
+
>
|
|
79
|
+
<input
|
|
80
|
+
type="radio"
|
|
81
|
+
class="checkbox-input"
|
|
82
|
+
.checked=${this.internalChecked}
|
|
83
|
+
?disabled=${this.disabled}
|
|
84
|
+
.value=${this.value}
|
|
85
|
+
${p((t) => this.inputElement = t)}
|
|
86
|
+
/>
|
|
87
|
+
<span class="${e}"></span>
|
|
88
|
+
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
89
|
+
</div>
|
|
90
|
+
`;
|
|
91
|
+
}
|
|
92
|
+
renderSwitch() {
|
|
93
|
+
return a`
|
|
94
|
+
<div
|
|
95
|
+
class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
|
|
96
|
+
@click=${this.toggleChecked}
|
|
97
|
+
>
|
|
98
|
+
<input
|
|
99
|
+
type="checkbox"
|
|
100
|
+
class="checkbox-input"
|
|
101
|
+
.checked=${this.internalChecked}
|
|
102
|
+
?disabled=${this.disabled}
|
|
103
|
+
.value=${this.value}
|
|
104
|
+
${p((e) => this.inputElement = e)}
|
|
105
|
+
/>
|
|
106
|
+
<div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
|
|
107
|
+
<div class="switch-thumb"></div>
|
|
108
|
+
</div>
|
|
109
|
+
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
110
|
+
</div>
|
|
111
|
+
`;
|
|
112
|
+
}
|
|
113
|
+
render() {
|
|
114
|
+
return this.type === "switch" ? this.renderSwitch() : this.type === "radio" ? this.renderRadio() : this.renderCheckbox();
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
r.styles = [
|
|
118
|
+
k`
|
|
119
|
+
${b(m)}
|
|
120
|
+
`
|
|
121
|
+
];
|
|
122
|
+
o([
|
|
123
|
+
n({ type: String })
|
|
124
|
+
], r.prototype, "label", 2);
|
|
125
|
+
o([
|
|
126
|
+
n({ type: String })
|
|
127
|
+
], r.prototype, "value", 2);
|
|
128
|
+
o([
|
|
129
|
+
n({ type: Boolean })
|
|
130
|
+
], r.prototype, "checked", 2);
|
|
131
|
+
o([
|
|
132
|
+
n({ type: String })
|
|
133
|
+
], r.prototype, "type", 2);
|
|
134
|
+
o([
|
|
135
|
+
n({ type: Boolean })
|
|
136
|
+
], r.prototype, "disabled", 2);
|
|
137
|
+
o([
|
|
138
|
+
n({ type: Boolean })
|
|
139
|
+
], r.prototype, "indeterminate", 2);
|
|
140
|
+
o([
|
|
141
|
+
f()
|
|
142
|
+
], r.prototype, "internalChecked", 2);
|
|
143
|
+
r = o([
|
|
144
|
+
v("logosphere-checkbox")
|
|
145
|
+
], r);
|
|
146
|
+
export {
|
|
147
|
+
r as C
|
|
148
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";const r=require("lit"),t=require("lit/decorators.js"),h=require("lit/directives/ref.js"),d='.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(n,e,i,c)=>{for(var a=c>1?void 0:c?b(e,i):e,s=n.length-1,l;s>=0;s--)(l=n[s])&&(a=(c?l(e,i,a):l(a))||a);return c&&a&&p(e,i,a),a};exports.Checkbox=class extends r.LitElement{constructor(){super(...arguments),this.label="",this.value="",this.checked=!1,this.type="checkbox",this.disabled=!1,this.indeterminate=!1,this.internalChecked=!1}connectedCallback(){super.connectedCallback(),this.internalChecked=this.checked}firstUpdated(){this.setIndeterminate()}updated(e){e.has("indeterminate")&&this.setIndeterminate(),e.has("checked")&&(this.internalChecked=this.checked)}setIndeterminate(){this.inputElement&&(this.inputElement.indeterminate=this.indeterminate)}toggleChecked(){if(!this.disabled){if(this.type==="radio"){if(this.internalChecked)return;this.internalChecked=!0}else this.indeterminate?(this.indeterminate=!1,this.internalChecked=!0):this.internalChecked=!this.internalChecked;this.dispatchEvent(new CustomEvent("lgsChange",{detail:{checked:this.internalChecked,indeterminate:this.indeterminate,value:this.value},bubbles:!0,composed:!0}))}}renderCheckbox(){const e=["checkbox-control",this.internalChecked?"checkbox-control--checked":"",this.indeterminate?"checkbox-control--indeterminate":""].filter(Boolean).join(" ");return r.html`
|
|
2
|
+
<div
|
|
3
|
+
class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
|
|
4
|
+
@click=${this.toggleChecked}
|
|
5
|
+
>
|
|
6
|
+
<input
|
|
7
|
+
type="checkbox"
|
|
8
|
+
class="checkbox-input"
|
|
9
|
+
.checked=${this.internalChecked}
|
|
10
|
+
?disabled=${this.disabled}
|
|
11
|
+
.value=${this.value}
|
|
12
|
+
${h.ref(i=>this.inputElement=i)}
|
|
13
|
+
/>
|
|
14
|
+
<span class="${e}"></span>
|
|
15
|
+
${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
|
|
16
|
+
</div>
|
|
17
|
+
`}renderRadio(){const e=["radio-control",this.internalChecked?"radio-control--checked":""].filter(Boolean).join(" ");return r.html`
|
|
18
|
+
<div
|
|
19
|
+
class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
|
|
20
|
+
@click=${this.toggleChecked}
|
|
21
|
+
>
|
|
22
|
+
<input
|
|
23
|
+
type="radio"
|
|
24
|
+
class="checkbox-input"
|
|
25
|
+
.checked=${this.internalChecked}
|
|
26
|
+
?disabled=${this.disabled}
|
|
27
|
+
.value=${this.value}
|
|
28
|
+
${h.ref(i=>this.inputElement=i)}
|
|
29
|
+
/>
|
|
30
|
+
<span class="${e}"></span>
|
|
31
|
+
${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
|
|
32
|
+
</div>
|
|
33
|
+
`}renderSwitch(){return r.html`
|
|
34
|
+
<div
|
|
35
|
+
class="switch-wrapper ${this.disabled?"switch-wrapper--disabled":""}"
|
|
36
|
+
@click=${this.toggleChecked}
|
|
37
|
+
>
|
|
38
|
+
<input
|
|
39
|
+
type="checkbox"
|
|
40
|
+
class="checkbox-input"
|
|
41
|
+
.checked=${this.internalChecked}
|
|
42
|
+
?disabled=${this.disabled}
|
|
43
|
+
.value=${this.value}
|
|
44
|
+
${h.ref(e=>this.inputElement=e)}
|
|
45
|
+
/>
|
|
46
|
+
<div class="switch-track ${this.internalChecked?"switch-track--checked":""}">
|
|
47
|
+
<div class="switch-thumb"></div>
|
|
48
|
+
</div>
|
|
49
|
+
${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
|
|
50
|
+
</div>
|
|
51
|
+
`}render(){return this.type==="switch"?this.renderSwitch():this.type==="radio"?this.renderRadio():this.renderCheckbox()}};exports.Checkbox.styles=[r.css`
|
|
52
|
+
${r.unsafeCSS(d)}
|
|
53
|
+
`];o([t.property({type:String})],exports.Checkbox.prototype,"label",2);o([t.property({type:String})],exports.Checkbox.prototype,"value",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"checked",2);o([t.property({type:String})],exports.Checkbox.prototype,"type",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"disabled",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"indeterminate",2);o([t.state()],exports.Checkbox.prototype,"internalChecked",2);exports.Checkbox=o([t.customElement("logosphere-checkbox")],exports.Checkbox);
|
package/dist/checkbox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./checkbox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./checkbox-DpbKHANK.cjs");Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>e.Checkbox});
|
package/dist/checkbox.js
CHANGED