npm - zignal-stencil-library - Versions diffs - 1.0.0 - Mend

zignal-stencil-library 1.0.0

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.

Files changed (294) hide show

package/dist/components/p-CkqA8kPB.js ADDED Viewed

@@ -0,0 +1,210 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-CQZRPVaY.js';
+import { s as selectedChatStore, m as messagesStore, a as chatsStore } from './p-N-wb2wDd.js';
+import { u as useTranslation } from './p-B8jcXcXq.js';
+import { I as Icon } from './p-BaEi6GXz.js';
+import { r as readMessage, g as getChatMessages } from './p-Bf89k6bd.js';
+import { i as initSocket, j as joinRoom, l as leaveRoom } from './p-LCZ_Vyoy.js';
+import { d as defineCustomElement$6 } from './p-CS8eN-II.js';
+import { d as defineCustomElement$5 } from './p-BcC6bTqM.js';
+import { d as defineCustomElement$4 } from './p-CUmphmPD.js';
+import { d as defineCustomElement$3 } from './p-BZ_KFdA7.js';
+import { d as defineCustomElement$2 } from './p-DFjLV5Vy.js';
+import { d as defineCustomElement$1 } from './p-C9EokLnL.js';
+const messageBoxCss = "@layer base{*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-drop-shadow-alpha:100%;--tw-space-y-reverse:0;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-ring-offset-width:0px;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:host,:root{--container-lg:32rem;--font-weight-bold:700;--container-xl:36rem;--radius-md:.375rem;--color-yellow-300:oklch(90.5% .182 98.111);--color-red-500:oklch(63.7% .237 25.331);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--color-gray-600:oklch(44.6% .03 256.802);--text-xs:.75rem;--text-xs--line-height:1.33333;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:1.42857;--default-font-family:\"Kanit\",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-primary-dark:#b50f30;--color-secondary-dark:#fff;--color-background-dark:#23292d}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:currentColor;color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size=\"1\"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E\")}[type=radio]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.z-\\[99\\]{z-index:99}.flex{display:flex}.w-full{width:100%}.min-w-\\[280px\\]{min-width:280px}.flex-1{flex:1}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.text-\\[10px\\]{font-size:10px}.text-\\[gray\\]{color:gray}.opacity-10{opacity:.1}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.scroll-container::-webkit-scrollbar{background:0 0;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0000001a}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.z-text-light{color:var(--color-black)}.z-text-dark{color:var(--color-white)}.z-text-primary-light{color:var(--color-primary)}.z-text-primary-dark{color:var(--color-primary-dark)}.z-text-gray-light{color:var(--color-gray-500)}.z-text-gray-dark{color:var(--color-gray-300)}.z-border-light{border-color:var(--color-black)}.z-border-dark{border-color:var(--color-white)}.z-border-primary-light{border-color:var(--color-primary)}.z-border-primary-dark{border-color:var(--color-primary-dark)}.z-border-divider-light{border-color:var(--color-gray-400)}.z-border-divider-dark{border-color:var(--color-gray-300)}.z-search-input-background-light{background-color:var(--color-gray-200)}.z-search-input-background-dark{background-color:var(--color-gray-500)}.z-chat-input-background-light{background-color:var(--color-white)}.z-chat-input-background-dark{background-color:var(--color-gray-700)}.z-placeholder-light::placeholder{color:var(--color-gray-500)}.z-placeholder-dark::placeholder{color:var(--color-gray-200)}.z-background-light{background-color:var(--color-background)}.z-background-dark{background-color:var(--color-background-dark)}.z-paper-light{background-color:var(--color-gray-100)}.z-paper-dark{background-color:var(--color-gray-700)}.z-width-100{width:100%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{.my-auto{margin-block:auto}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.h-4{height:calc(var(--spacing)*4)}.h-\\[60px\\]{height:60px}.w-4{width:calc(var(--spacing)*4)}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.rounded-full{border-radius:3.40282e+38px}.object-cover{object-fit:cover}.px-2{padding-inline:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-auto{margin-bottom:auto}.ml-2{margin-left:calc(var(--spacing)*2)}.border-none{--tw-border-style:none;border-style:none}.bg-pink-100{background-color:var(--color-pink-100)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-primary{--tw-ring-color:var(--color-primary)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.max-h-\\[80vh\\]{max-height:80vh}.w-xl{width:var(--container-xl)}.gap-2{gap:calc(var(--spacing)*2)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded-lg{border-radius:var(--radius-lg)}.p-6{padding:calc(var(--spacing)*6)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.top-0\\.5{top:calc(var(--spacing)*.5)}.right-0\\.5{right:calc(var(--spacing)*.5)}.m-auto{margin:auto}.w-lg{width:var(--container-lg)}.justify-center{justify-content:center}.object-contain{object-fit:contain}.pt-8{padding-top:calc(var(--spacing)*8)}.mx-auto{margin-inline:auto}.mb-10{margin-bottom:calc(var(--spacing)*10)}.grid{display:grid}.h-18{height:calc(var(--spacing)*18)}.w-18{width:calc(var(--spacing)*18)}.place-content-center{place-content:center}.p-4{padding:calc(var(--spacing)*4)}.text-center{text-align:center}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.right-0{right:calc(var(--spacing)*0)}.bottom-\\[40px\\]{bottom:40px}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing)*2)}.w-32{width:calc(var(--spacing)*32)}.cursor-pointer{cursor:pointer}.rounded-md{border-radius:var(--radius-md)}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-br-\\[0\\]{border-bottom-right-radius:0}.rounded-bl-\\[0\\]{border-bottom-left-radius:0}.bg-black\\/40{background-color:#0006}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-black\\/40{background-color:color-mix(in srgb,#00040%,transparent);background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-gray-200{background-color:var(--color-gray-200)}.bg-primary{background-color:var(--color-primary)}.p-2{padding:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.pt-2{padding-top:calc(var(--spacing)*2)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.text-white{color:var(--color-white)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-\\[-0\\.75rem\\]{margin-bottom:-.75rem}.h-6{height:calc(var(--spacing)*6)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.text-left{text-align:left}.text-right{text-align:right}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.mr-1{margin-right:calc(var(--spacing)*1)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.min-h-20{min-height:calc(var(--spacing)*20)}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-baseline-last{align-items:last baseline}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.pt-0{padding-top:calc(var(--spacing)*0)}.whitespace-pre-line{white-space:pre-line}.capitalize{text-transform:capitalize}.top-1\\/2{top:50%}.right-1\\.25{right:calc(var(--spacing)*1.25)}.max-w-xl{max-width:var(--container-xl)}.-translate-y-1\\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mt-auto{margin-top:auto}.hidden{display:none}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{} /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.py-4{padding-block:calc(var(--spacing)*4)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.w-52{width:calc(var(--spacing)*52)}.top-0{top:calc(var(--spacing)*0)}.col-span-4{grid-column:span 4/span 4}.mx-2{margin-inline:calc(var(--spacing)*2)}.my-1{margin-block:calc(var(--spacing)*1)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.h-0{height:calc(var(--spacing)*0)}.h-5{height:calc(var(--spacing)*5)}.w-0{width:calc(var(--spacing)*0)}.w-5{width:calc(var(--spacing)*5)}.cursor-not-allowed{cursor:not-allowed}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.items-start{align-items:flex-start}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.border{border-style:var(--tw-border-style);border-width:1px}.border-t-\\[14px\\]{border-top-style:var(--tw-border-style);border-top-width:14px}.border-l-\\[14px\\]{border-left-style:var(--tw-border-style);border-left-width:14px}.border-primary{border-color:var(--color-primary)}.border-t-red-500{border-top-color:var(--color-red-500)}.border-l-transparent{border-left-color:#0000}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.text-nowrap{text-wrap:nowrap}.text-gray-600{color:var(--color-gray-600)}.text-red-500{color:var(--color-red-500)}.opacity-50{opacity:.5}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.focus\\:border-primary:focus{border-color:var(--color-primary)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}:host{display:block}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked{appearance:auto}}@media (hover:hover){.hover\\:opacity-100:hover{opacity:1}.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}";
+const MessageBox = /*@__PURE__*/ proxyCustomElement(class MessageBox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.focusRequested = createEvent(this, "focusRequested");
+    }
+    disposeListener;
+    focusRequested;
+    prevKey;
+    nextKey;
+    isLoading = false;
+    hasMore = true;
+    pageLimit = 16;
+    scrollContainer;
+    prevSelectedChat = null;
+    componentDidLoad() {
+        this.scrollToBottom();
+    }
+    scrollToBottom() {
+        if (this.scrollContainer) {
+            setTimeout(() => {
+                this.scrollContainer.scrollTo({
+                    top: this.scrollContainer.scrollHeight,
+                    behavior: 'instant'
+                });
+            }, 100);
+        }
+    }
+    async componentWillLoad() {
+        this.disposeListener = selectedChatStore.onChange('selectedChat', async (newChat) => {
+            if (!newChat) {
+                messagesStore.reset();
+                this.nextKey = undefined;
+                this.hasMore = true;
+                return;
+            }
+            messagesStore.reset();
+            this.nextKey = undefined;
+            this.hasMore = true;
+            if (newChat !== this.prevSelectedChat) {
+                if (newChat.unread_count > 0) {
+                    await readMessage({ sessionId: newChat.id });
+                }
+                await this.loadMessages(newChat.id);
+                this.scrollToBottom();
+                this.prevSelectedChat = newChat;
+                this.focusRequested.emit();
+            }
+            const socket = initSocket();
+            const selectedChat = selectedChatStore.get('selectedChat');
+            joinRoom(selectedChat.id);
+            socket.on('message', (message) => {
+                try {
+                    let existChat = messagesStore.get('messages').find((item) => item.id === message.id);
+                    if (existChat)
+                        return;
+                    messagesStore.set('messages', [
+                        ...messagesStore.get('messages'),
+                        message,
+                    ]);
+                    this.scrollToBottom();
+                }
+                catch (error) {
+                    console.error('Failed to get message from socket', error);
+                }
+            });
+            socket.on('read', async (chatRead) => {
+                try {
+                    if (chatRead) {
+                        const readChats = chatsStore.get('chats').map((chat) => {
+                            if (chat.id === chatRead.id) {
+                                return {
+                                    ...chat,
+                                    unread_count: 0,
+                                    last_message_at: chatRead.read_at
+                                };
+                            }
+                            return chat;
+                        });
+                        chatsStore.set('chats', readChats);
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to read message', error);
+                }
+            });
+        });
+    }
+    disconnectedCallback() {
+        this.disposeListener?.();
+        const selectedChat = selectedChatStore.get('selectedChat');
+        if (selectedChat) {
+            leaveRoom(selectedChat.id);
+        }
+    }
+    async loadMessages(sessionId) {
+        if (!this.hasMore)
+            return;
+        try {
+            this.isLoading = true;
+            const { messages, next } = await getChatMessages({
+                sessionId,
+                limit: this.pageLimit,
+                start: this.nextKey
+            });
+            messagesStore.set('messages', [
+                ...messages.reverse(),
+                ...messagesStore.get('messages'),
+            ]);
+            this.prevKey = this.nextKey;
+            this.hasMore = !!next;
+            this.nextKey = next;
+        }
+        catch (error) {
+            console.error('Failed to load Chat Messages', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    handleScroll = async () => {
+        const el = this.scrollContainer;
+        if (!el)
+            return;
+        const threshold = 200;
+        if (el.scrollTop <= threshold && !this.isLoading) {
+            await this.loadMessages(selectedChatStore.get('selectedChat').id);
+        }
+    };
+    render() {
+        const t = useTranslation();
+        const messages = messagesStore.get('messages');
+        const selectedChat = selectedChatStore.get('selectedChat');
+        return (h(Host, { key: 'b049138daddb8d8e8b0e940fd1a7ebac3e1df386' }, h("slot", { key: '23f53729cf18be0c80da0cc8f11c7e57659cf600' }, selectedChat === null
+            ? h("div", { class: "flex flex-col z-max-height" }, h("div", { class: "grid place-content-center my-auto text-primary" }, h("div", { class: "mx-auto" }, h(Icon, { name: "MessageSquareText", addClass: 'w-18 h-18' })), t('chat_tab.please_choose_chat_to_reply')))
+            : h("div", { class: "flex flex-col z-max-height" }, h("chat-header", null), h("div", { class: "flex-1 overflow-y-auto scroll-smooth scroll-container p-4 space-y-2", id: selectedChat.id, ref: el => (this.scrollContainer = el), onScroll: this.handleScroll }, this.hasMore &&
+                h("div", { class: "text-center text-gray-400 text-sm mb-10" }, "..."), messages.map((item) => h("message-item", { item: item }))), h("chat-input", null)))));
+    }
+    static get style() { return messageBoxCss; }
+}, [260, "message-box", {
+        "prevKey": [32],
+        "nextKey": [32],
+        "isLoading": [32],
+        "hasMore": [32],
+        "pageLimit": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["message-box", "chat-header", "chat-input", "dialog-preview-media", "menu-list", "message-content", "message-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "message-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MessageBox);
+            }
+            break;
+        case "chat-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "chat-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dialog-preview-media":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "menu-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "message-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "message-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { MessageBox as M, defineCustomElement as d };
+//# sourceMappingURL=p-CkqA8kPB.js.map
+//# sourceMappingURL=p-CkqA8kPB.js.map

package/dist/components/p-CkqA8kPB.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CkqA8kPB.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/message-box/message-box.css?tag=message-box","src/components/message-box/message-box.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, State, h, Event, EventEmitter } from '@stencil/core';\nimport { chatsStore, messagesStore, selectedChatStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { getChatMessages, readMessage } from '../../api';\nimport { initSocket, joinRoom, leaveRoom } from '../../utils/socket';\n\n@Component({\n tag: 'message-box',\n styleUrl: 'message-box.css',\n})\nexport class MessageBox {\n private disposeListener: () => void;\n\n @Event({ bubbles: true, composed: true }) focusRequested!: EventEmitter;\n\n @State() prevKey?: string;\n @State() nextKey?: string;\n @State() isLoading = false;\n @State() hasMore = true;\n @State() pageLimit = 16;\n private scrollContainer?: HTMLDivElement;\n private prevSelectedChat: ChatItem | null = null;\n\n componentDidLoad() {\n this.scrollToBottom();\n }\n\n private scrollToBottom() {\n if (this.scrollContainer) {\n setTimeout(() => {\n this.scrollContainer.scrollTo({\n top: this.scrollContainer.scrollHeight,\n behavior: 'instant'\n });\n }, 100);\n }\n }\n\n async componentWillLoad() {\n this.disposeListener = selectedChatStore.onChange('selectedChat', async (newChat) => {\n if (!newChat) {\n messagesStore.reset();\n this.nextKey = undefined;\n this.hasMore = true;\n return;\n }\n\n messagesStore.reset();\n this.nextKey = undefined;\n this.hasMore = true;\n\n if (newChat !== this.prevSelectedChat) {\n if (newChat.unread_count > 0) {\n await readMessage({ sessionId: newChat.id });\n }\n\n await this.loadMessages(newChat.id);\n\n this.scrollToBottom();\n this.prevSelectedChat = newChat;\n this.focusRequested.emit();\n }\n\n const socket = initSocket();\n const selectedChat = selectedChatStore.get('selectedChat');\n joinRoom(selectedChat.id);\n\n socket.on('message', (message: ChatMessageItem) => {\n try {\n let existChat = messagesStore.get('messages').find((item) => item.id === message.id);\n if (existChat) return;\n\n messagesStore.set('messages', [\n ...messagesStore.get('messages'),\n message,\n ]);\n\n this.scrollToBottom();\n } catch (error) {\n console.error('Failed to get message from socket', error);\n }\n });\n\n socket.on('read', async (chatRead: ChatRead) => {\n try {\n if (chatRead) {\n const readChats = chatsStore.get('chats').map((chat) => {\n if (chat.id === chatRead.id) {\n return {\n ...chat,\n unread_count: 0,\n last_message_at: chatRead.read_at\n };\n }\n return chat;\n })\n\n chatsStore.set('chats', readChats);\n }\n } catch (error) {\n console.error('Failed to read message', error);\n }\n });\n });\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat) {\n leaveRoom(selectedChat.id);\n }\n }\n\n private async loadMessages(sessionId: string) {\n if (!this.hasMore) return;\n\n try {\n this.isLoading = true;\n const { messages, next } = await getChatMessages({\n sessionId,\n limit: this.pageLimit,\n start: this.nextKey\n });\n\n messagesStore.set('messages',\n [\n ...messages.reverse(),\n ...messagesStore.get('messages'),\n ]\n );\n\n this.prevKey = this.nextKey;\n this.hasMore = !!next;\n this.nextKey = next;\n } catch (error) {\n console.error('Failed to load Chat Messages', error);\n } finally {\n this.isLoading = false;\n }\n }\n\n private handleScroll = async () => {\n const el = this.scrollContainer;\n if (!el) return;\n\n const threshold = 200;\n if (el.scrollTop <= threshold && !this.isLoading) {\n await this.loadMessages(selectedChatStore.get('selectedChat').id);\n }\n };\n\n render() {\n const t = useTranslation();\n const messages = messagesStore.get('messages');\n const selectedChat = selectedChatStore.get('selectedChat');\n return (\n <Host>\n <slot>\n {selectedChat === null\n ? <div class=\"flex flex-col z-max-height\">\n <div class=\"grid place-content-center my-auto text-primary\">\n <div class=\"mx-auto\">\n <Icon name=\"MessageSquareText\" addClass='w-18 h-18' />\n </div>\n {t('chat_tab.please_choose_chat_to_reply')}\n </div>\n </div>\n : <div class=\"flex flex-col z-max-height\">\n <chat-header />\n <div\n class=\"flex-1 overflow-y-auto scroll-smooth scroll-container p-4 space-y-2\"\n id={selectedChat.id}\n ref={el => (this.scrollContainer = el)}\n onScroll={this.handleScroll}\n >\n {this.hasMore &&\n <div class=\"text-center text-gray-400 text-sm mb-10\">\n ...\n </div>\n }\n {messages.map((item) => <message-item item={item} />)}\n </div>\n <chat-input />\n </div>\n }\n </slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-CmWIRJ5t.js ADDED Viewed

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-CQZRPVaY.js';
+import { c as configStore } from './p-N-wb2wDd.js';
+const autocompleteSelectCss = "@layer base{*,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-drop-shadow-alpha:100%;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0}}}@layer theme{:host,:root{--color-red-500:oklch(63.7% .237 25.331);--color-gray-600:oklch(44.6% .03 256.802);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--container-lg:32rem;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-bold:700;--radius-lg:.5rem;--color-yellow-300:oklch(90.5% .182 98.111);--container-xl:36rem;--radius-xl:.75rem;--text-xs:.75rem;--text-xs--line-height:1.33333;--text-base:1rem;--text-base--line-height:1.5;--font-weight-medium:500;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:1.42857;--font-weight-semibold:600;--radius-sm:.25rem;--radius-md:.375rem;--default-font-family:\"Kanit\",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-primary-dark:#b50f30;--color-secondary-dark:#fff;--color-background-dark:#23292d}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:currentColor;color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size=\"1\"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E\")}[type=radio]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.inline-block{display:inline-block}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.max-h-60{max-height:calc(var(--spacing)*60)}.w-full{width:100%}.cursor-pointer{cursor:pointer}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e+38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-primary{--tw-ring-color:var(--color-primary)}.focus\\:border-primary:focus{border-color:var(--color-primary)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}}.scroll-container::-webkit-scrollbar{background:0 0;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0000001a}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.z-text-light{color:var(--color-black)}.z-text-dark{color:var(--color-white)}.z-text-primary-light{color:var(--color-primary)}.z-text-primary-dark{color:var(--color-primary-dark)}.z-text-gray-light{color:var(--color-gray-500)}.z-text-gray-dark{color:var(--color-gray-300)}.z-border-light{border-color:var(--color-black)}.z-border-dark{border-color:var(--color-white)}.z-border-primary-light{border-color:var(--color-primary)}.z-border-primary-dark{border-color:var(--color-primary-dark)}.z-border-divider-light{border-color:var(--color-gray-400)}.z-border-divider-dark{border-color:var(--color-gray-300)}.z-search-input-background-light{background-color:var(--color-gray-200)}.z-search-input-background-dark{background-color:var(--color-gray-500)}.z-chat-input-background-light{background-color:var(--color-white)}.z-chat-input-background-dark{background-color:var(--color-gray-700)}.z-placeholder-light::placeholder{color:var(--color-gray-500)}.z-placeholder-dark::placeholder{color:var(--color-gray-200)}.z-background-light{background-color:var(--color-background)}.z-background-dark{background-color:var(--color-background-dark)}.z-paper-light{background-color:var(--color-gray-100)}.z-paper-dark{background-color:var(--color-gray-700)}.z-width-100{width:100%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.z-\\[99\\]{z-index:99}.flex{display:flex}.min-w-\\[280px\\]{min-width:280px}.flex-1{flex:1}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.text-\\[10px\\]{font-size:10px}.text-\\[gray\\]{color:gray}.opacity-10{opacity:.1}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.my-auto{margin-block:auto}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.h-4{height:calc(var(--spacing)*4)}.h-\\[60px\\]{height:60px}.w-4{width:calc(var(--spacing)*4)}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.object-cover{object-fit:cover}.px-2{padding-inline:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-auto{margin-bottom:auto}.ml-2{margin-left:calc(var(--spacing)*2)}.border-none{--tw-border-style:none;border-style:none}.bg-pink-100{background-color:var(--color-pink-100)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.max-h-\\[80vh\\]{max-height:80vh}.w-xl{width:var(--container-xl)}.gap-2{gap:calc(var(--spacing)*2)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded-lg{border-radius:var(--radius-lg)}.p-6{padding:calc(var(--spacing)*6)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.top-0\\.5{top:calc(var(--spacing)*.5)}.right-0\\.5{right:calc(var(--spacing)*.5)}.m-auto{margin:auto}.w-lg{width:var(--container-lg)}.justify-center{justify-content:center}.object-contain{object-fit:contain}.pt-8{padding-top:calc(var(--spacing)*8)}.mx-auto{margin-inline:auto}.mb-10{margin-bottom:calc(var(--spacing)*10)}.grid{display:grid}.h-18{height:calc(var(--spacing)*18)}.w-18{width:calc(var(--spacing)*18)}.place-content-center{place-content:center}.p-4{padding:calc(var(--spacing)*4)}.text-center{text-align:center}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.right-0{right:calc(var(--spacing)*0)}.bottom-\\[40px\\]{bottom:40px}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing)*2)}.w-32{width:calc(var(--spacing)*32)}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-br-\\[0\\]{border-bottom-right-radius:0}.rounded-bl-\\[0\\]{border-bottom-left-radius:0}.bg-black\\/40{background-color:#0006}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-black\\/40{background-color:color-mix(in srgb,#00040%,transparent);background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-gray-200{background-color:var(--color-gray-200)}.bg-primary{background-color:var(--color-primary)}.p-2{padding:calc(var(--spacing)*2)}.pt-2{padding-top:calc(var(--spacing)*2)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.text-white{color:var(--color-white)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mb-\\[-0\\.75rem\\]{margin-bottom:-.75rem}.h-6{height:calc(var(--spacing)*6)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.text-left{text-align:left}.text-right{text-align:right}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.mr-1{margin-right:calc(var(--spacing)*1)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.min-h-20{min-height:calc(var(--spacing)*20)}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-baseline-last{align-items:last baseline}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.pt-0{padding-top:calc(var(--spacing)*0)}.whitespace-pre-line{white-space:pre-line}.capitalize{text-transform:capitalize}.top-1\\/2{top:50%}.right-1\\.25{right:calc(var(--spacing)*1.25)}.max-w-xl{max-width:var(--container-xl)}.-translate-y-1\\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mt-auto{margin-top:auto}.hidden{display:none}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{} /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.py-4{padding-block:calc(var(--spacing)*4)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.w-52{width:calc(var(--spacing)*52)}.top-0{top:calc(var(--spacing)*0)}.col-span-4{grid-column:span 4/span 4}.mx-2{margin-inline:calc(var(--spacing)*2)}.my-1{margin-block:calc(var(--spacing)*1)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.block{display:block}.inline-flex{display:inline-flex}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.h-0{height:calc(var(--spacing)*0)}.h-5{height:calc(var(--spacing)*5)}.w-0{width:calc(var(--spacing)*0)}.w-5{width:calc(var(--spacing)*5)}.cursor-not-allowed{cursor:not-allowed}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.items-start{align-items:flex-start}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.border-t-\\[14px\\]{border-top-style:var(--tw-border-style);border-top-width:14px}.border-l-\\[14px\\]{border-left-style:var(--tw-border-style);border-left-width:14px}.border-primary{border-color:var(--color-primary)}.border-t-red-500{border-top-color:var(--color-red-500)}.border-l-transparent{border-left-color:#0000}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.text-nowrap{text-wrap:nowrap}.text-gray-600{color:var(--color-gray-600)}.text-red-500{color:var(--color-red-500)}.opacity-50{opacity:.5}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}:host{display:block}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked{appearance:auto}}@media (hover:hover){.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.hover\\:opacity-100:hover{opacity:1}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}";
+const AutocompleteSelect = /*@__PURE__*/ proxyCustomElement(class AutocompleteSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.selecting = createEvent(this, "selecting");
+        this.create = createEvent(this, "create");
+    }
+    type = 'status';
+    value;
+    fetchItems;
+    createItem;
+    selectedIds;
+    selecting;
+    create;
+    allItems = [];
+    inputValue = '';
+    showDropdown = false;
+    loading = true;
+    async componentWillLoad() {
+        this.inputValue = this.value;
+        this.allItems = await this.fetchItems();
+        this.loading = false;
+    }
+    onInput = (e) => {
+        const value = e.target.value;
+        this.inputValue = value;
+        this.showDropdown = true;
+    };
+    onSelectItem = (item) => {
+        if (this.type === 'status') {
+            this.inputValue = item.name;
+        }
+        else {
+            this.inputValue = '';
+        }
+        this.showDropdown = false;
+        this.selecting.emit(item);
+    };
+    async onCreateItem() {
+        const newItem = await this.createItem(this.inputValue);
+        this.allItems = [...this.allItems, newItem];
+        this.inputValue = newItem.name;
+        this.showDropdown = false;
+        this.create.emit(newItem);
+        this.onSelectItem(newItem);
+    }
+    render() {
+        const theme = configStore.get('theme');
+        const noMatch = this.inputValue &&
+            !this.allItems.some(i => i.name.toLowerCase() === this.inputValue.toLowerCase());
+        return (h(Host, { key: '0aa4dfa0dbff536c296e394cdb912fd58a53ecbd' }, h("slot", { key: '9e942cfd1ef02d1c13bd5ee78eaca2ef55f37d17' }, h("div", { key: '0c97d4a81883c7ff97237d6c546f7f15444259a8', class: "relative w-full" }, h("input", { key: '7a2f4eba980a24de91cf6cf3e840f8ed0451411a', class: `w-full border z-border-${theme} text-sm px-4 py-2 rounded-md ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`, value: this.inputValue, onInput: this.onInput, onFocus: () => (this.showDropdown = true), onKeyDown: e => e.key === 'Enter' && this.showDropdown && this.onCreateItem(), autoFocus: true }), this.showDropdown && (h("ul", { key: 'f3c26d59a68487338d2be67130fc000a046a6bfb', class: `absolute z-paper-${theme} z-text-${theme} rounded-sm text-sm border w-full mt-1 z-10 max-h-60 overflow-y-auto shadow-lg` }, noMatch && (h("li", { key: '388f84dfbc4abc5b064dad4e1d754f2741b4463f', class: "px-3 py-2 hover:brightness-110 cursor-pointer", onClick: () => this.onCreateItem() }, h("span", { key: 'e7e7257fe986444d6c082f280d0c14d89c9f5076', class: `font-semibold z-text-primary-${theme}` }, "\u0E43\u0E2B\u0E21\u0E48\u00A0:\u00A0"), "\u00A0", h("strong", { key: '41ffe0f81ad9a30b8ec45ad7e21d03cbfbb06709' }, this.inputValue), "\u00A0", h("span", { key: '4bce26f393e269087375e9e2393d61039c27b447', class: `font-semibold z-text-gray-${theme}` }, "Enter \u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2A\u0E23\u0E49\u0E32\u0E07"))), this.allItems.map(item => {
+            const isSelected = this.type === 'tag' ? this.selectedIds?.includes(item.id) : item.name?.toLowerCase() === this.inputValue?.toLowerCase();
+            return (h("li", { class: `px-3 py-2 ${isSelected ? '' : 'hover:brightness-110'} cursor-pointer ${isSelected ? `z-background-${theme}` : ''}`, onClick: () => isSelected ? null : this.onSelectItem(item) }, h("span", { class: "inline-block size-3 mr-2 rounded-full", style: { backgroundColor: item.color } }), item.name, isSelected && h("span", { class: `font-semibold z-text-primary-${theme}` }, "\u00A0(\u0E21\u0E35\u0E41\u0E25\u0E49\u0E27)")));
+        })))))));
+    }
+    static get style() { return autocompleteSelectCss; }
+}, [260, "autocomplete-select", {
+        "type": [1],
+        "value": [1],
+        "fetchItems": [16, "fetch-items"],
+        "createItem": [16, "create-item"],
+        "selectedIds": [16, "selected-ids"],
+        "allItems": [32],
+        "inputValue": [32],
+        "showDropdown": [32],
+        "loading": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["autocomplete-select"];
+    components.forEach(tagName => { switch (tagName) {
+        case "autocomplete-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AutocompleteSelect);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { AutocompleteSelect as A, defineCustomElement as d };
+//# sourceMappingURL=p-CmWIRJ5t.js.map
+//# sourceMappingURL=p-CmWIRJ5t.js.map

package/dist/components/p-CmWIRJ5t.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CmWIRJ5t.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/autocomplete-select/autocomplete-select.css?tag=autocomplete-select","src/components/autocomplete-select/autocomplete-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, State, h, Event, EventEmitter } from '@stencil/core';\nimport { configStore } from '../../store/store';\n\n@Component({\n tag: 'autocomplete-select',\n styleUrl: 'autocomplete-select.css',\n})\nexport class AutocompleteSelect {\n @Prop() type?: 'tag' | 'status' = 'status'\n @Prop() value?: string\n @Prop() fetchItems!: () => Promise<TagOrStatusItem[]>\n @Prop() createItem!: (name: string) => Promise<TagOrStatusItem>\n @Prop() selectedIds?: string[]\n\n @Event() selecting: EventEmitter<TagOrStatusItem>\n @Event() create: EventEmitter<TagOrStatusItem>\n\n @State() allItems: TagOrStatusItem[] = []\n @State() inputValue = ''\n @State() showDropdown = false\n @State() loading = true\n\n async componentWillLoad() {\n this.inputValue = this.value\n this.allItems = await this.fetchItems()\n this.loading = false\n }\n\n onInput = (e: InputEvent) => {\n const value = (e.target as HTMLInputElement).value\n this.inputValue = value\n this.showDropdown = true\n }\n\n onSelectItem = (item: TagOrStatusItem) => {\n if (this.type === 'status') {\n this.inputValue = item.name\n } else {\n this.inputValue = ''\n }\n this.showDropdown = false\n this.selecting.emit(item)\n }\n\n async onCreateItem() {\n const newItem = await this.createItem(this.inputValue)\n this.allItems = [...this.allItems, newItem]\n this.inputValue = newItem.name\n this.showDropdown = false\n this.create.emit(newItem)\n this.onSelectItem(newItem)\n }\n\n render() {\n const theme = configStore.get('theme');\n const noMatch = this.inputValue &&\n !this.allItems.some(i => i.name.toLowerCase() === this.inputValue.toLowerCase())\n\n return (\n <Host>\n <slot>\n <div class=\"relative w-full\">\n <input\n class={`w-full border z-border-${theme} text-sm px-4 py-2 rounded-md ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`}\n value={this.inputValue}\n onInput={this.onInput}\n onFocus={() => (this.showDropdown = true)}\n onKeyDown={e => e.key === 'Enter' && this.showDropdown && this.onCreateItem()}\n autoFocus\n />\n\n {this.showDropdown && (\n <ul class={`absolute z-paper-${theme} z-text-${theme} rounded-sm text-sm border w-full mt-1 z-10 max-h-60 overflow-y-auto shadow-lg`}>\n {noMatch && (\n <li\n class=\"px-3 py-2 hover:brightness-110 cursor-pointer\"\n onClick={() => this.onCreateItem()}\n >\n <span class={`font-semibold z-text-primary-${theme}`}>ใหม่ : </span>\n  <strong>{this.inputValue}</strong>\n  <span class={`font-semibold z-text-gray-${theme}`}>Enter เพื่อสร้าง</span>\n </li>\n )}\n\n {this.allItems.map(item => {\n const isSelected = this.type === 'tag' ? this.selectedIds?.includes(item.id) : item.name?.toLowerCase() === this.inputValue?.toLowerCase()\n return (\n <li\n class={`px-3 py-2 ${isSelected ? '' : 'hover:brightness-110'} cursor-pointer ${isSelected ? `z-background-${theme}` : ''}`}\n onClick={() => isSelected ? null : this.onSelectItem(item)}\n >\n <span class=\"inline-block size-3 mr-2 rounded-full\" style={{ backgroundColor: item.color }}></span>\n {item.name}\n {isSelected && <span class={`font-semibold z-text-primary-${theme}`}> (มีแล้ว)</span>}\n </li>\n )\n })}\n </ul>\n )}\n </div>\n </slot>\n </Host>\n );\n }\n}\n"],"version":3}