@logosphere-ui/core 0.0.0-alpha.40 → 0.0.0-alpha.42
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 +18 -62
- package/dist/AGENTS.md +18 -62
- package/dist/atoms/Checkbox/checkbox.d.ts +2 -11
- package/dist/atoms/FormField/formfield.d.ts +0 -2
- package/dist/{badge-B0Bj-HAT.js → badge-DsDxWEHx.js} +20 -20
- package/dist/{badge-DWkKpZTX.cjs → badge-DvaKpUHe.cjs} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/breadcrumb-BB61Xt0s.js +41 -0
- package/dist/breadcrumb-Cop-B1J7.cjs +12 -0
- package/dist/breadcrumb.cjs +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-DRZ4sG4T.cjs +10 -0
- package/dist/button-Uu9oaieg.js +58 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-DcDT4o-U.cjs → calendar-CIgyrv3U.cjs} +1 -1
- package/dist/{calendar-DsriSHZ4.js → calendar-CZ_IN2TF.js} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/card-BOCW7gad.cjs +43 -0
- package/dist/{card-R_cKrdHK.js → card-MDwFGplY.js} +3 -3
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-B-NiZIYK.cjs +183 -0
- package/dist/{chatbot-yup4Nz00.js → chatbot-CHgiUY4h.js} +13 -13
- 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/{chip-group-CC5RBhN_.js → chip-group-BUL2H8rr.js} +1 -1
- package/dist/{chip-group-BqYKZKmu.cjs → chip-group-CpcjGoRm.cjs} +1 -1
- package/dist/chip-group.cjs +1 -1
- package/dist/chip-group.js +1 -1
- package/dist/combobox-BmIFPk8X.cjs +113 -0
- package/dist/{combobox-Nxhk75IH.js → combobox-jak7Ac1m.js} +8 -31
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-BExZseRQ.js → datepicker-BgysIOZI.js} +51 -58
- package/dist/datepicker-DOBmbxlo.cjs +85 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-DBrOkz0z.cjs → drawer-3nyjAkcS.cjs} +2 -2
- package/dist/{drawer-DHsESNFL.js → drawer-CE9zzllI.js} +3 -3
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.js +1 -1
- package/dist/formfield-CRcyUMvQ.cjs +33 -0
- package/dist/{formfield-ss2mFweu.js → formfield-O327HYt0.js} +52 -59
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/index.cjs +7 -7
- package/dist/index.d.ts +0 -1
- package/dist/index.js +59 -60
- package/dist/index.umd.js +145 -146
- package/dist/input-CQS0LzF-.cjs +59 -0
- package/dist/input-CeF3YJk-.js +257 -0
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/left-menu.cjs +1 -1
- package/dist/left-menu.js +1 -1
- package/dist/{leftmenu-CMx2K5Ws.js → leftmenu-CmWvnA6L.js} +4 -4
- package/dist/{leftmenu-DCfTelzi.cjs → leftmenu-p9aR2QTy.cjs} +1 -1
- package/dist/{modal-DNjURVZy.js → modal-DUIv_yoo.js} +4 -4
- package/dist/modal-dUnnHe8u.cjs +84 -0
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Input/input.d.ts +0 -17
- package/dist/organisms/Combobox/combobox.d.ts +0 -9
- package/dist/organisms/DatePicker/datepicker.d.ts +0 -2
- package/dist/{pagination-B91sZD5E.js → pagination-B7jknoOz.js} +61 -61
- package/dist/pagination-BkqbWBOn.cjs +169 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/popover-CYDoeLKp.cjs +30 -0
- package/dist/{popover-CSgoaROl.js → popover-DDaG8MSj.js} +28 -28
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/{switch-Do6SCkPJ.cjs → switch-8RGGesy5.cjs} +2 -2
- package/dist/{switch-uYVuohJ-.js → switch-DNqPqH-R.js} +21 -25
- package/dist/switch.cjs +1 -1
- package/dist/switch.js +1 -1
- package/dist/tab-CDMcFHvP.cjs +41 -0
- package/dist/{tab-Byh4UgFB.js → tab-CuBCFGoO.js} +1 -1
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/dist/{text-area-CHkrGi3S.js → text-area-C73JxnqH.js} +12 -16
- package/dist/text-area-Cprb-azV.cjs +51 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{timepicker-Co7lW5Rp.cjs → timepicker-CLJKWWGm.cjs} +1 -1
- package/dist/{timepicker-CAat7fcK.js → timepicker-DMzGYd0p.js} +2 -6
- package/dist/timepicker.cjs +1 -1
- package/dist/timepicker.js +1 -1
- package/dist/toast-container-6t6yEP9Y.cjs +64 -0
- package/dist/{toast-container-DxFwLT5S.js → toast-container-B5v74b_5.js} +4 -4
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +1 -1
- package/dist/{tree-menu-Psek8QB9.js → tree-menu-CkOPxr-W.js} +2 -2
- package/dist/tree-menu-WNwZMreD.cjs +47 -0
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/{ui-icon-Ckljc9hg.js → ui-icon-BMJNdIOq.js} +0 -3
- package/dist/{ui-icon-Cd5YhUeQ.cjs → ui-icon-DIucAQC_.cjs} +3 -3
- package/package.json +1 -6
- package/dist/breadcrumb-BOuCLUJh.cjs +0 -12
- package/dist/breadcrumb-BeJqq-5C.js +0 -41
- package/dist/button-MBxtvVqn.cjs +0 -10
- package/dist/button-QWCkFTeJ.js +0 -58
- package/dist/card-BUWvno93.cjs +0 -43
- package/dist/chatbot-BPVC2wqM.cjs +0 -183
- package/dist/checkbox-BAbPDN6x.cjs +0 -53
- package/dist/checkbox-CTfbav6M.js +0 -152
- package/dist/combobox-Bah9Akr-.cjs +0 -113
- package/dist/datepicker-BOQ13sIm.cjs +0 -85
- package/dist/formfield-JXiv9mvJ.cjs +0 -33
- package/dist/icon.cjs +0 -1
- package/dist/icon.js +0 -4
- package/dist/input-D9lFcDHU.js +0 -278
- package/dist/input-Dg-jos9u.cjs +0 -60
- package/dist/modal-BJNCTlBX.cjs +0 -84
- package/dist/pagination-Cnh-o-Nq.cjs +0 -169
- package/dist/popover-DwDyLpQq.cjs +0 -30
- package/dist/shared/icons/index.d.ts +0 -1
- package/dist/tab-BvRVHpWs.cjs +0 -41
- package/dist/text-area-DvOiCcKP.cjs +0 -51
- package/dist/toast-container-aY1lGjRi.cjs +0 -64
- package/dist/tree-menu-Dqy14_m2.cjs +0 -47
|
@@ -1,11 +1,11 @@
|
|
|
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-
|
|
5
|
-
import "./button-
|
|
6
|
-
import "./input-
|
|
7
|
-
import "./ui-icon-
|
|
8
|
-
const I = ":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(--
|
|
4
|
+
import "./combobox-jak7Ac1m.js";
|
|
5
|
+
import "./button-Uu9oaieg.js";
|
|
6
|
+
import "./input-CeF3YJk-.js";
|
|
7
|
+
import "./ui-icon-BMJNdIOq.js";
|
|
8
|
+
const I = ":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}";
|
|
9
9
|
var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
|
|
10
10
|
for (var o = i > 1 ? void 0 : i ? P(e, r) : e, c = t.length - 1, h; c >= 0; c--)
|
|
11
11
|
(h = t[c]) && (o = (i ? h(e, r, o) : h(o)) || o);
|
|
@@ -217,24 +217,24 @@ let s = class extends C {
|
|
|
217
217
|
let c = !1;
|
|
218
218
|
const h = () => {
|
|
219
219
|
c && (i += "</li>", c = !1);
|
|
220
|
-
},
|
|
220
|
+
}, v = (u) => {
|
|
221
221
|
for (; o.length > 0 && o[o.length - 1].indent >= u; )
|
|
222
222
|
h(), i += `</${o.pop().type}>`, o.length > 0 && (c = !0);
|
|
223
|
-
},
|
|
223
|
+
}, m = () => v(-1);
|
|
224
224
|
for (const u of r) {
|
|
225
|
-
const g = u.match(/^(\s*)\d+\.\s+(.*)/),
|
|
226
|
-
if (g ||
|
|
227
|
-
const p = (g ? g[1] :
|
|
225
|
+
const g = u.match(/^(\s*)\d+\.\s+(.*)/), f = u.match(/^(\s*)[-*]\s+(.*)/);
|
|
226
|
+
if (g || f) {
|
|
227
|
+
const p = (g ? g[1] : f[1]).length, b = g ? "ol" : "ul", w = g ? g[2] : f[2];
|
|
228
228
|
if (o.length === 0)
|
|
229
229
|
i += `<${b}>`, o.push({ type: b, indent: p });
|
|
230
230
|
else {
|
|
231
231
|
const _ = o[o.length - 1];
|
|
232
|
-
p > _.indent ? (i += `<${b}>`, o.push({ type: b, indent: p })) : p === _.indent ? h() : (
|
|
232
|
+
p > _.indent ? (i += `<${b}>`, o.push({ type: b, indent: p })) : p === _.indent ? h() : (v(p + 1), o.length > 0 && o[o.length - 1].indent === p ? h() : (m(), i += `<${b}>`, o.push({ type: b, indent: p })));
|
|
233
233
|
}
|
|
234
234
|
i += `<li>${w}`, c = !0;
|
|
235
|
-
} else u.trim() === "" ? o.length === 0 && (i += "<br>") : (
|
|
235
|
+
} else u.trim() === "" ? o.length === 0 && (i += "<br>") : (m(), i += `<p>${u}</p>`);
|
|
236
236
|
}
|
|
237
|
-
return
|
|
237
|
+
return m(), i.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/\*(.*?)\*/g, "<em>$1</em>").replace(
|
|
238
238
|
/\[([^\]]+)\]\(([^)]+)\)/g,
|
|
239
239
|
'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
|
|
240
240
|
);
|
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-B-NiZIYK.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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { unsafeCSS as h, css as u, LitElement as d, html as a } from "lit";
|
|
2
2
|
import { property as s, customElement as g } from "lit/decorators.js";
|
|
3
|
-
import "./ui-icon-
|
|
3
|
+
import "./ui-icon-BMJNdIOq.js";
|
|
4
4
|
const _ = ":host{display:block}.chip-group{display:flex;flex-wrap:wrap;align-items:center}.chip-group__chip{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px var(--spacing-3);border-radius:1000px;border:1px solid var(--color-border);background-color:var(--color-body-bg);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing),color var(--transition-speed-base) var(--transition-timing)}.chip-group__chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.chip-group__chip:hover:not(.chip-group__chip--disabled):not(.chip-group__chip--selected){background-color:var(--color-light)}.chip-group__chip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:inherit}.chip-group__chip-label{color:inherit}.chip-group__chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.chip-group__chip--selected{border-color:transparent;color:#fff}.chip-group__chip--default.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--primary.chip-group__chip--selected{background-color:var(--color-primary)}.chip-group__chip--secondary.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--purple.chip-group__chip--selected{background-color:#543985}.chip-group__chip--success.chip-group__chip--selected{background-color:var(--color-success)}.chip-group__chip--danger.chip-group__chip--selected{background-color:var(--color-danger)}.chip-group__chip--info.chip-group__chip--selected{background-color:var(--color-info)}.chip-group__chip--warning.chip-group__chip--selected{background-color:var(--color-warning);color:var(--color-body-text)}";
|
|
5
5
|
var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (e, r, o, i) => {
|
|
6
6
|
for (var c = i > 1 ? void 0 : i ? v(r, o) : r, l = e.length - 1, n; l >= 0; l--)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const p=require("lit"),c=require("lit/decorators.js");require("./ui-icon-
|
|
1
|
+
"use strict";const p=require("lit"),c=require("lit/decorators.js");require("./ui-icon-DIucAQC_.cjs");const n=":host{display:block}.chip-group{display:flex;flex-wrap:wrap;align-items:center}.chip-group__chip{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px var(--spacing-3);border-radius:1000px;border:1px solid var(--color-border);background-color:var(--color-body-bg);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing),color var(--transition-speed-base) var(--transition-timing)}.chip-group__chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.chip-group__chip:hover:not(.chip-group__chip--disabled):not(.chip-group__chip--selected){background-color:var(--color-light)}.chip-group__chip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:inherit}.chip-group__chip-label{color:inherit}.chip-group__chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.chip-group__chip--selected{border-color:transparent;color:#fff}.chip-group__chip--default.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--primary.chip-group__chip--selected{background-color:var(--color-primary)}.chip-group__chip--secondary.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--purple.chip-group__chip--selected{background-color:#543985}.chip-group__chip--success.chip-group__chip--selected{background-color:var(--color-success)}.chip-group__chip--danger.chip-group__chip--selected{background-color:var(--color-danger)}.chip-group__chip--info.chip-group__chip--selected{background-color:var(--color-info)}.chip-group__chip--warning.chip-group__chip--selected{background-color:var(--color-warning);color:var(--color-body-text)}";var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,t=(s,e,r,o)=>{for(var i=o>1?void 0:o?u(e,r):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(i=(o?a(e,r,i):a(i))||i);return o&&i&&h(e,r,i),i};exports.ChipGroup=class extends p.LitElement{constructor(){super(...arguments),this.items=[],this.value=[],this.theme="default",this.gap="var(--spacing-2)"}_isSelected(e){return this.value.includes(e)}_handleChipClick(e){if(e.disabled)return;const r=this._isSelected(e.value),o=r?this.value.filter(i=>i!==e.value):[...this.value,e.value];this.value=o,this.dispatchEvent(new CustomEvent("chip-group-change",{detail:{value:o,item:e,selected:!r},bubbles:!0,composed:!0}))}_onChipKeydown(e,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleChipClick(r))}_renderChip(e){const r=this._isSelected(e.value),o=["chip-group__chip",`chip-group__chip--${this.theme}`,r?"chip-group__chip--selected":"",e.disabled?"chip-group__chip--disabled":""].filter(Boolean).join(" ");return p.html`
|
|
2
2
|
<button
|
|
3
3
|
class=${o}
|
|
4
4
|
type="button"
|
package/dist/chip-group.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./chip-group-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./chip-group-CpcjGoRm.cjs");Object.defineProperty(exports,"ChipGroup",{enumerable:!0,get:()=>e.ChipGroup});
|
package/dist/chip-group.js
CHANGED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";const r=require("lit"),t=require("lit/decorators.js"),b=require("@popperjs/core");require("./badge-DvaKpUHe.cjs");require("./checkbox-DpbKHANK.cjs");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-DIucAQC_.cjs");const m='.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing);position:absolute;right:var(--spacing-3)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-light);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0 12px 0 0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input:disabled{cursor:not-allowed}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var u=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(d,e,o,s)=>{for(var n=s>1?void 0:s?_(e,o):e,l=d.length-1,c;l>=0;l--)(c=d[l])&&(n=(s?c(e,o,n):c(n))||n);return s&&n&&u(e,o,n),n};exports.Combobox=class extends r.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.helper="",this.error="",this.placeholder="Seçim yapınız",this.required=!1,this.disabled=!1,this.readOnly=!1,this.variant="default",this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.clearable=!0,this.selected=[],this.inputValue="",this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._filteredGroups=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!(this.readOnly||this.disabled))switch(e.key){case"ArrowDown":e.preventDefault(),this.isOpen?this.focusedIndex=Math.min(this.focusedIndex+1,this._filteredItems.length-1):(this.isOpen=!0,this.focusedIndex=0),this._scrollFocusedIntoView();break;case"ArrowUp":e.preventDefault(),this.isOpen&&(this.focusedIndex=Math.max(this.focusedIndex-1,0),this._scrollFocusedIntoView());break;case"Enter":e.preventDefault(),this.isOpen?this.focusedIndex>=0&&this.focusedIndex<this._filteredItems.length&&this._selectItem(this._filteredItems[this.focusedIndex],e):(this.isOpen=!0,this.focusedIndex=0);break;case"Escape":e.preventDefault(),this._closeDropdown();break}},this._removeTag=(e,o)=>{o.stopPropagation(),this.setSelected(this.selected.filter(s=>s[this.optionValue]!==e[this.optionValue]))},this._clearSelection=e=>{e.stopPropagation(),this.setSelected([]),this.inputValue=""},this._onFilterFocus=()=>{this.readOnly||this.disabled||(this.inputValue="",this.isOpen=!0,this.focusedIndex=0)},this._onFilterInput=e=>{this.readOnly||this.disabled||(this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0))},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||this.disabled||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)},this._onFieldClick=e=>{if(this.readOnly||this.disabled)return;const o=e.composedPath();if(!(o.some(l=>{const c=l?.classList;return c?.contains("combobox__trigger")||c?.contains("combobox__chevron")})||o.some(l=>l?.classList?.contains("combobox__dropdown")))){if(this.filterable&&!this.multiple){this.isOpen=!0,this._focusFilterInput();return}this.isOpen=!this.isOpen}},this._onChevronClick=()=>{if(!(this.readOnly||this.disabled)){if(this.isOpen){this._closeDropdown();return}this.isOpen=!0,this.filterable&&!this.multiple&&this._focusFilterInput()}}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const o=this.inputValue.toLocaleLowerCase(),s=a=>a.filter(p=>String(p[this.optionLabel]??"").toLocaleLowerCase().includes(o)),n=[];let l=[];const c=()=>{const a=s(l);a.length&&n.push({label:"",items:a}),l=[]};this.items.forEach(a=>{const p=this._getGroupItems(a);if(!p){l=[...l,a];return}c();const h=s(p);h.length&&n.push({label:this._getGroupLabel(a),items:h})}),c(),this._filteredGroups=n,this._filteredItems=this._filteredGroups.flatMap(a=>a.items)}}updated(e){if(e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus(),e.has("isOpen")){this.isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper());return}this.isOpen&&this._updatePopper()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}_closeDropdown(){this.isOpen=!1,this.focusedIndex=-1,this.filterable&&(this.inputValue="")}get _filterDisplayValue(){return this.isOpen?this.inputValue:!this.multiple&&this.selected.length?String(this.selected[0][this.optionLabel]):""}_focusFilterInput(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".combobox__filter-input")?.focus()})}_scrollFocusedIntoView(){this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({block:"nearest"})})}_getGroupItems(e){if(Array.isArray(e.options))return e.options;if(Array.isArray(e.items))return e.items}_getGroupLabel(e){return String(e.label??e.title??e.name??e[this.optionLabel]??"")}selectedItems(){return this.selected}isSelected(e){return this.selected.some(o=>o[this.optionValue]===e[this.optionValue])}_selectItem(e,o){o.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(n=>n[this.optionValue]!==e[this.optionValue]):[...this.selected,e]:(s=[e],this.isOpen=!1,this.filterable&&(this.inputValue="")),this.setSelected(s)}setSelected(e){this.selected=e,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}_renderTagList(){return r.html`
|
|
2
|
+
<div class="combobox__tags">
|
|
3
|
+
${this.selected.map(e=>r.html`
|
|
4
|
+
<logosphere-badge
|
|
5
|
+
variant="default"
|
|
6
|
+
text=${String(e[this.optionLabel])}
|
|
7
|
+
?closeable=${!this.readOnly}
|
|
8
|
+
@close=${o=>this._removeTag(e,o)}
|
|
9
|
+
></logosphere-badge>
|
|
10
|
+
`)}
|
|
11
|
+
</div>
|
|
12
|
+
`}_renderItemContent(e,o){return this.itemRenderer?this.itemRenderer(e,{index:o,selected:this.isSelected(e),focused:o===this.focusedIndex,multiple:this.multiple}):e[this.optionLabel]}_renderTriggerContent(){return this.filterable&&!this.multiple?r.html`
|
|
13
|
+
<input
|
|
14
|
+
class="combobox__filter-input"
|
|
15
|
+
type="text"
|
|
16
|
+
.value=${this._filterDisplayValue}
|
|
17
|
+
placeholder=${this.placeholder}
|
|
18
|
+
?disabled=${this.readOnly||this.disabled}
|
|
19
|
+
@focus=${this._onFilterFocus}
|
|
20
|
+
@input=${this._onFilterInput}
|
|
21
|
+
@keydown=${this._handleKeydown}
|
|
22
|
+
@click=${this._stopPropagation}
|
|
23
|
+
/>
|
|
24
|
+
${this.clearable&&!this.readOnly&&this.selected.length?r.html`
|
|
25
|
+
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
26
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
27
|
+
</button>
|
|
28
|
+
`:r.nothing}
|
|
29
|
+
`:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?r.html`
|
|
30
|
+
<span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
|
|
31
|
+
${this.clearable&&!this.readOnly?r.html`
|
|
32
|
+
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
33
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
34
|
+
</button>
|
|
35
|
+
`:r.nothing}
|
|
36
|
+
`:r.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){let e=0;return r.html`
|
|
37
|
+
<div data-combobox-popper popover="manual" class="combobox__dropdown">
|
|
38
|
+
${this.filterable&&this.multiple?r.html`
|
|
39
|
+
<input
|
|
40
|
+
class="combobox__search"
|
|
41
|
+
type="text"
|
|
42
|
+
placeholder=${this.placeholder}
|
|
43
|
+
.value=${this.inputValue}
|
|
44
|
+
@input=${this._onFilterInput}
|
|
45
|
+
@keydown=${this._handleKeydown}
|
|
46
|
+
@click=${this._stopPropagation}
|
|
47
|
+
/>
|
|
48
|
+
`:r.nothing}
|
|
49
|
+
|
|
50
|
+
<div class="combobox__list">
|
|
51
|
+
${this._filteredItems.length===0?r.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredGroups.map(o=>r.html`
|
|
52
|
+
<div class="combobox__group ${o.label?"combobox__group--titled":""}">
|
|
53
|
+
${o.label?r.html`<div class="combobox__group-title">${o.label}</div>`:r.nothing}
|
|
54
|
+
${o.items.map(s=>{const n=e++;return r.html`
|
|
55
|
+
<div
|
|
56
|
+
class="combobox__item
|
|
57
|
+
${!this.multiple&&this.isSelected(s)?"combobox__item--selected":""}
|
|
58
|
+
${n===this.focusedIndex?"combobox__item--focused":""}"
|
|
59
|
+
@click=${l=>this._selectItem(s,l)}
|
|
60
|
+
@mouseenter=${()=>{this.focusedIndex=n}}
|
|
61
|
+
>
|
|
62
|
+
${this.multiple?r.html`
|
|
63
|
+
<logosphere-checkbox
|
|
64
|
+
.checked=${this.isSelected(s)}
|
|
65
|
+
.value=${s[this.optionValue]}
|
|
66
|
+
@click=${this._stopPropagation}
|
|
67
|
+
></logosphere-checkbox>
|
|
68
|
+
`:r.nothing}
|
|
69
|
+
${this._renderItemContent(s,n)}
|
|
70
|
+
</div>
|
|
71
|
+
`})}
|
|
72
|
+
</div>
|
|
73
|
+
`)}
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
`}_getPopperModifiers(){return[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8,fallbackPlacements:["top-start","right-start","left-start","bottom-end","top-end"]}}]}_getPopperReferenceElement(){return this._formFieldElement?.shadowRoot?.querySelector(".formfield__container")??this._referenceElement}_updatePopper(){const e=this._getPopperReferenceElement(),o=this._dropdownElement;if(!this.isOpen||!e||!o||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(o.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=b.createPopper(e,o,{placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()})}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_showPopover(){this._dropdownElement?.showPopover?.()}_hidePopover(){const e=this._dropdownElement;try{e?.hidePopover?.()}catch{}}render(){const e=["combobox__trigger",`combobox__trigger--${this.size}`,this.disabled?"combobox__trigger--disabled":"",this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&!this.disabled&&this.isOpen?"combobox__trigger--open":"",this.clearable?"":"combobox__trigger--not-clearable"].filter(Boolean).join(" ");return r.html`
|
|
77
|
+
<div class="combobox">
|
|
78
|
+
<logosphere-formfield
|
|
79
|
+
.label=${this.label}
|
|
80
|
+
.helper=${this.helper}
|
|
81
|
+
.error=${this.error}
|
|
82
|
+
cursor="pointer"
|
|
83
|
+
.required=${this.required}
|
|
84
|
+
.disabled=${this.disabled}
|
|
85
|
+
.readonly=${this.readOnly}
|
|
86
|
+
.size=${this.size}
|
|
87
|
+
.variant=${this.variant}
|
|
88
|
+
.forceFocused=${this.isOpen}
|
|
89
|
+
@click=${this._onFieldClick}
|
|
90
|
+
>
|
|
91
|
+
<div class="combobox__wrapper">
|
|
92
|
+
<div
|
|
93
|
+
class="${e}"
|
|
94
|
+
tabindex="${this.readOnly||this.filterable||this.disabled?-1:0}"
|
|
95
|
+
@click=${this._onTriggerClick}
|
|
96
|
+
@keydown=${this.filterable?r.nothing:this._handleKeydown}
|
|
97
|
+
>
|
|
98
|
+
${this._renderTriggerContent()}
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
${this._renderDropdown()}
|
|
102
|
+
</div>
|
|
103
|
+
<span
|
|
104
|
+
class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}"
|
|
105
|
+
@click=${this._onChevronClick}
|
|
106
|
+
>
|
|
107
|
+
<ui-icon name="uil-angle-down" size="16"></ui-icon>
|
|
108
|
+
</span>
|
|
109
|
+
</logosphere-formfield>
|
|
110
|
+
</div>
|
|
111
|
+
`}};exports.Combobox.styles=[r.css`
|
|
112
|
+
${r.unsafeCSS(m)}
|
|
113
|
+
`];i([t.property({type:String})],exports.Combobox.prototype,"label",2);i([t.property({type:String})],exports.Combobox.prototype,"helper",2);i([t.property({type:String})],exports.Combobox.prototype,"error",2);i([t.property({type:String})],exports.Combobox.prototype,"placeholder",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"required",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"disabled",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);i([t.property({type:String})],exports.Combobox.prototype,"variant",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);i([t.property({type:String})],exports.Combobox.prototype,"optionLabel",2);i([t.property({type:String})],exports.Combobox.prototype,"optionValue",2);i([t.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);i([t.property({type:Array})],exports.Combobox.prototype,"items",2);i([t.property({attribute:!1})],exports.Combobox.prototype,"itemRenderer",2);i([t.property({type:String})],exports.Combobox.prototype,"size",2);i([t.property({type:Boolean})],exports.Combobox.prototype,"clearable",2);i([t.state()],exports.Combobox.prototype,"selected",2);i([t.state()],exports.Combobox.prototype,"inputValue",2);i([t.state()],exports.Combobox.prototype,"isOpen",2);i([t.state()],exports.Combobox.prototype,"focusedIndex",2);i([t.query(".combobox__wrapper")],exports.Combobox.prototype,"_referenceElement",2);i([t.query("logosphere-formfield")],exports.Combobox.prototype,"_formFieldElement",2);i([t.query("[data-combobox-popper]")],exports.Combobox.prototype,"_dropdownElement",2);exports.Combobox=i([t.customElement("logosphere-combobox")],exports.Combobox);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { unsafeCSS as _, css as f, LitElement as g, html as a, nothing as d } from "lit";
|
|
2
2
|
import { property as n, state as b, query as u, customElement as x } from "lit/decorators.js";
|
|
3
3
|
import { createPopper as v } from "@popperjs/core";
|
|
4
|
-
import "./badge-
|
|
5
|
-
import "./checkbox-
|
|
6
|
-
import "./formfield-
|
|
7
|
-
import "./ui-icon-
|
|
8
|
-
const y = '
|
|
4
|
+
import "./badge-DsDxWEHx.js";
|
|
5
|
+
import "./checkbox-CX0LgsWP.js";
|
|
6
|
+
import "./formfield-O327HYt0.js";
|
|
7
|
+
import "./ui-icon-BMJNdIOq.js";
|
|
8
|
+
const y = '.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing);position:absolute;right:var(--spacing-3)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-light);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0 12px 0 0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input:disabled{cursor:not-allowed}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
|
|
9
9
|
var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
|
|
10
10
|
for (var s = l > 1 ? void 0 : l ? $(t, r) : t, p = e.length - 1, c; p >= 0; p--)
|
|
11
11
|
(c = e[p]) && (s = (l ? c(t, r, s) : c(s)) || s);
|
|
@@ -13,7 +13,7 @@ var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, r
|
|
|
13
13
|
};
|
|
14
14
|
let o = class extends g {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.helper = "", this.error = "", this.placeholder = "Seçim yapınız", this.required = !1, this.disabled = !1, this.readOnly = !1, this.variant = "default", this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.clearable = !0, this.selected = [], this.inputValue = "", this.
|
|
16
|
+
super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.helper = "", this.error = "", this.placeholder = "Seçim yapınız", this.required = !1, this.disabled = !1, this.readOnly = !1, this.variant = "default", this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.clearable = !0, this.selected = [], this.inputValue = "", this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._filteredGroups = [], this._handleOutsideClick = (e) => {
|
|
17
17
|
e.composedPath().includes(this) || this._closeDropdown();
|
|
18
18
|
}, this._handleKeydown = (e) => {
|
|
19
19
|
if (!(this.readOnly || this.disabled))
|
|
@@ -68,20 +68,9 @@ let o = class extends g {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
}
|
|
71
|
-
get value() {
|
|
72
|
-
return this.multiple ? this.selected.map((e) => e[this.optionValue]) : this.selected[0]?.[this.optionValue];
|
|
73
|
-
}
|
|
74
|
-
set value(e) {
|
|
75
|
-
this._pendingValue = e, this._applyPendingValue(), this.requestUpdate();
|
|
76
|
-
}
|
|
77
|
-
_applyPendingValue() {
|
|
78
|
-
if (this._pendingValue === void 0 || !this.items.length) return;
|
|
79
|
-
const e = this.multiple ? Array.isArray(this._pendingValue) ? this._pendingValue : [this._pendingValue] : [this._pendingValue];
|
|
80
|
-
this.selected = this.items.filter((t) => e.includes(t[this.optionValue])), this._pendingValue = void 0;
|
|
81
|
-
}
|
|
82
71
|
// ==================== LIFECYCLE ====================
|
|
83
72
|
willUpdate(e) {
|
|
84
|
-
if (e.has("items")
|
|
73
|
+
if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
|
|
85
74
|
const t = this.inputValue.toLocaleLowerCase(), r = (c) => c.filter(
|
|
86
75
|
(h) => String(h[this.optionLabel] ?? "").toLocaleLowerCase().includes(t)
|
|
87
76
|
), l = [];
|
|
@@ -157,19 +146,10 @@ let o = class extends g {
|
|
|
157
146
|
this.multiple ? r = this.isSelected(e) ? this.selected.filter((l) => l[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (r = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(r);
|
|
158
147
|
}
|
|
159
148
|
setSelected(e) {
|
|
160
|
-
this.selected = e, this.
|
|
149
|
+
this.selected = e, this.dispatchEvent(
|
|
161
150
|
new CustomEvent("selected", { detail: { selected: e }, bubbles: !0, composed: !0 })
|
|
162
151
|
), this.dispatchEvent(
|
|
163
152
|
new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 })
|
|
164
|
-
), this.dispatchEvent(
|
|
165
|
-
new CustomEvent("lgsChange", {
|
|
166
|
-
bubbles: !0,
|
|
167
|
-
composed: !0,
|
|
168
|
-
detail: {
|
|
169
|
-
value: this.multiple ? e.map((t) => t[this.optionValue]) : e[0]?.[this.optionValue],
|
|
170
|
-
selected: e
|
|
171
|
-
}
|
|
172
|
-
})
|
|
173
153
|
);
|
|
174
154
|
}
|
|
175
155
|
// ==================== RENDER PARTS ====================
|
|
@@ -434,9 +414,6 @@ i([
|
|
|
434
414
|
i([
|
|
435
415
|
b()
|
|
436
416
|
], o.prototype, "inputValue", 2);
|
|
437
|
-
i([
|
|
438
|
-
n({ attribute: !1 })
|
|
439
|
-
], o.prototype, "value", 1);
|
|
440
417
|
i([
|
|
441
418
|
b()
|
|
442
419
|
], o.prototype, "isOpen", 2);
|
package/dist/combobox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-BmIFPk8X.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});
|
package/dist/combobox.js
CHANGED