@a.nemreen/dga-ui 0.3.13 → 0.3.14

package/fesm2022/a.nemreen-dga-ui-chatbot.mjs

@@ -0,0 +1,295 @@
+import*as e from"@angular/core";import{inject as d,DestroyRef as f,Injector as h,viewChild as c,input as t,booleanAttribute as s,numberAttribute as y,output as r,signal as l,computed as n,afterNextRender as g,ChangeDetectionStrategy as v,Component as x}from"@angular/core";import{dgaIsArabic as N,dgaCx as b,DgaButton as m,DgaIcon as u}from"@a.nemreen/dga-ui";class i{destroyRef=d(f);injector=d(h);composerRef=c("composer",...ngDevMode?[{debugName:"composerRef"}]:[]);logRef=c("log",...ngDevMode?[{debugName:"logRef"}]:[]);position=t("end",...ngDevMode?[{debugName:"position"}]:[]);animation=t("slide",...ngDevMode?[{debugName:"animation"}]:[]);size=t("md",...ngDevMode?[{debugName:"size"}]:[]);title=t("",...ngDevMode?[{debugName:"title"}]:[]);subtitle=t("",...ngDevMode?[{debugName:"subtitle"}]:[]);fabLabel=t("",...ngDevMode?[{debugName:"fabLabel"}]:[]);placeholder=t("",...ngDevMode?[{debugName:"placeholder"}]:[]);fabIcon=t("message",...ngDevMode?[{debugName:"fabIcon"}]:[]);sendIcon=t("arrowNext",...ngDevMode?[{debugName:"sendIcon"}]:[]);agentIcon=t("message",...ngDevMode?[{debugName:"agentIcon"}]:[]);fabTone=t("primary",...ngDevMode?[{debugName:"fabTone"}]:[]);overlay=t(!0,{...ngDevMode?{debugName:"overlay"}:{},transform:s});overlayClose=t(!0,{...ngDevMode?{debugName:"overlayClose"}:{},transform:s});online=t(!0,{...ngDevMode?{debugName:"online"}:{},transform:s});hideFabWhenOpen=t(!0,{...ngDevMode?{debugName:"hideFabWhenOpen"}:{},transform:s});stack=t(1,{...ngDevMode?{debugName:"stack"}:{},transform:y});clearFab=t(!0,{...ngDevMode?{debugName:"clearFab"}:{},transform:s});embedded=t(!1,{...ngDevMode?{debugName:"embedded"}:{},transform:s});initialMessages=t([],...ngDevMode?[{debugName:"initialMessages"}]:[]);sent=r();opened=r();closed=r();open=l(!1,...ngDevMode?[{debugName:"open"}]:[]);draft=l("",...ngDevMode?[{debugName:"draft"}]:[]);messages=l([],...ngDevMode?[{debugName:"messages"}]:[]);seq=Math.random().toString(36).slice(2,8);panelId=`dga-chatbot-panel-${this.seq}`;msgSeq=0;seeded=!1;prevOverflow="";copy=n(()=>{const a=N();return{title:a?"المساعد الذكي":"Help assistant",subtitle:a?"عادةً نرد خلال دقائق":"We typically reply within minutes",open:a?"فتح المحادثة":"Open chat",close:a?"إغلاق":"Close",send:a?"إرسال":"Send",input:a?"رسالتك":"Your message",placeholder:a?"اكتب رسالتك…":"Type your message…",panelLabel:a?"نافذة المحادثة":"Chat panel",welcome:a?"مرحبًا! كيف يمكننا مساعدتك اليوم؟":"Hello! How can we help you today?"}},...ngDevMode?[{debugName:"copy"}]:[]);fabBottom=n(()=>this.embedded()?"var(--dga-fab-edge, 0.75rem)":`calc(var(--dga-fab-edge, 2rem) + ${Math.max(0,this.stack())} * var(--dga-fab-stack-step, 4.25rem))`,...ngDevMode?[{debugName:"fabBottom"}]:[]);fabClasses=n(()=>b("dga-chatbot-fab",this.embedded()?"absolute":"fixed","z-toast inline-flex size-[var(--dga-fab-size,3.5rem)] items-center justify-center","cursor-pointer rounded-full border border-transparent text-on-color","shadow-lg transition-[box-shadow,background-color,transform] duration-200","hover:opacity-90 hover:shadow-xl active:scale-95","focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-focus",this.fabTone()==="primary"?"bg-primary":"bg-secondary"),...ngDevMode?[{debugName:"fabClasses"}]:[]);panelClasses=n(()=>{const a=this.size(),o=this.embedded();return b("dga-chatbot-panel absolute z-10",o?"bottom-[calc(var(--spacing-lg,0.75rem)+3.5rem+var(--spacing-sm))]":"bottom-[var(--dga-fab-edge,2rem)]","flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl",a==="sm"&&(o?"h-[min(18rem,100%)] w-[min(18rem,calc(100%-1rem))]":"h-[min(22rem,65dvh)] w-[min(20rem,calc(100vw-1.5rem))]"),a==="md"&&(o?"h-[min(22rem,100%)] w-[min(20rem,calc(100%-1rem))]":"h-[min(28rem,70dvh)] w-[min(24rem,calc(100vw-1.5rem))]"),a==="lg"&&(o?"h-[min(26rem,100%)] w-[min(22rem,calc(100%-1rem))]":"h-[min(34rem,78dvh)] w-[min(28rem,calc(100vw-1.5rem))]"))},...ngDevMode?[{debugName:"panelClasses"}]:[]);constructor(){this.destroyRef.onDestroy(()=>this.unlockScroll())}ensureSeed(){if(this.seeded)return;this.seeded=!0;const a=this.initialMessages();a.length?this.messages.set([...a]):this.messages.set([{id:"welcome",role:"bot",text:this.copy().welcome}])}toggle(){this.open()?this.close():this.show()}show(){this.ensureSeed(),this.open.set(!0),this.lockScroll(),this.opened.emit(),g(()=>{this.composerRef()?.nativeElement.focus(),this.scrollLogToEnd()},{injector:this.injector})}close(){this.open()&&(this.open.set(!1),this.unlockScroll(),this.closed.emit())}onBackdrop(){this.overlayClose()&&this.close()}onSubmit(a){a.preventDefault();const o=this.draft().trim();o&&(this.ensureSeed(),this.msgSeq+=1,this.messages.update(p=>[...p,{id:`u-${this.msgSeq}`,role:"user",text:o}]),this.draft.set(""),this.sent.emit(o),g(()=>{this.scrollLogToEnd(),this.composerRef()?.nativeElement.focus()},{injector:this.injector}))}scrollLogToEnd(){const a=this.logRef()?.nativeElement;a&&(a.scrollTop=a.scrollHeight)}lockScroll(){typeof document>"u"||this.embedded()||!this.overlay()||(this.prevOverflow=document.body.style.overflow,document.body.style.overflow="hidden")}unlockScroll(){typeof document>"u"||(document.body.style.overflow=this.prevOverflow)}static ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.5",ngImport:e,type:i,deps:[],target:e.ɵɵFactoryTarget.Component});static ɵcmp=e.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.5",type:i,isStandalone:!0,selector:"dga-chatbot",inputs:{position:{classPropertyName:"position",publicName:"position",isSignal:!0,isRequired:!1,transformFunction:null},animation:{classPropertyName:"animation",publicName:"animation",isSignal:!0,isRequired:!1,transformFunction:null},size:{classPropertyName:"size",publicName:"size",isSignal:!0,isRequired:!1,transformFunction:null},title:{classPropertyName:"title",publicName:"title",isSignal:!0,isRequired:!1,transformFunction:null},subtitle:{classPropertyName:"subtitle",publicName:"subtitle",isSignal:!0,isRequired:!1,transformFunction:null},fabLabel:{classPropertyName:"fabLabel",publicName:"fabLabel",isSignal:!0,isRequired:!1,transformFunction:null},placeholder:{classPropertyName:"placeholder",publicName:"placeholder",isSignal:!0,isRequired:!1,transformFunction:null},fabIcon:{classPropertyName:"fabIcon",publicName:"fabIcon",isSignal:!0,isRequired:!1,transformFunction:null},sendIcon:{classPropertyName:"sendIcon",publicName:"sendIcon",isSignal:!0,isRequired:!1,transformFunction:null},agentIcon:{classPropertyName:"agentIcon",publicName:"agentIcon",isSignal:!0,isRequired:!1,transformFunction:null},fabTone:{classPropertyName:"fabTone",publicName:"fabTone",isSignal:!0,isRequired:!1,transformFunction:null},overlay:{classPropertyName:"overlay",publicName:"overlay",isSignal:!0,isRequired:!1,transformFunction:null},overlayClose:{classPropertyName:"overlayClose",publicName:"overlayClose",isSignal:!0,isRequired:!1,transformFunction:null},online:{classPropertyName:"online",publicName:"online",isSignal:!0,isRequired:!1,transformFunction:null},hideFabWhenOpen:{classPropertyName:"hideFabWhenOpen",publicName:"hideFabWhenOpen",isSignal:!0,isRequired:!1,transformFunction:null},stack:{classPropertyName:"stack",publicName:"stack",isSignal:!0,isRequired:!1,transformFunction:null},clearFab:{classPropertyName:"clearFab",publicName:"clearFab",isSignal:!0,isRequired:!1,transformFunction:null},embedded:{classPropertyName:"embedded",publicName:"embedded",isSignal:!0,isRequired:!1,transformFunction:null},initialMessages:{classPropertyName:"initialMessages",publicName:"initialMessages",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{sent:"sent",opened:"opened",closed:"closed"},host:{properties:{"class.contents":"!embedded()","attr.data-position":"position()","attr.data-animation":"animation()","attr.data-embedded":"embedded() || null"}},viewQueries:[{propertyName:"composerRef",first:!0,predicate:["composer"],descendants:!0,isSignal:!0},{propertyName:"logRef",first:!0,predicate:["log"],descendants:!0,isSignal:!0}],ngImport:e,template:`
+    @if (open()) {
+      <div
+        class="dga-chatbot-layer inset-0 z-urgent"
+        [class.fixed]="!embedded()"
+        [class.absolute]="embedded()"
+        role="presentation"
+        [attr.data-animation]="animation()"
+        [attr.data-edge]="position()"
+      >
+        @if (overlay()) {
+          <div
+            class="dga-chatbot-backdrop absolute inset-0 bg-overlay/25"
+            aria-hidden="true"
+            (click)="onBackdrop()"
+          ></div>
+        }
+        <aside
+          #panel
+          [id]="panelId"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="copy().panelLabel"
+          [class]="panelClasses()"
+          [attr.data-animation]="animation()"
+          [attr.data-edge]="position()"
+          [attr.data-size]="size()"
+        >
+          <div
+            class="flex shrink-0 items-center gap-md border-b border-border bg-surface/80
+                   px-lg py-md backdrop-blur-sm sm:px-xl sm:py-lg"
+          >
+            <span
+              class="relative inline-flex size-5xl shrink-0 items-center justify-center
+                     rounded-full bg-primary-faint text-fg-primary"
+              aria-hidden="true"
+            >
+              <dga-icon [name]="agentIcon()" size="lg" tone="primary" />
+              @if (online()) {
+                <span
+                  class="absolute end-0 bottom-0 size-md rounded-full border-2 border-card
+                         bg-success"
+                ></span>
+              }
+            </span>
+            <div class="min-w-0 flex-1">
+              <h2 class="m-0 truncate text-body-md font-bold text-display sm:text-body-lg">
+                {{ title() || copy().title }}
+              </h2>
+              @if (subtitle() || copy().subtitle) {
+                <p class="m-0 mt-xxs truncate text-body-xs text-muted">
+                  {{ subtitle() || copy().subtitle }}
+                </p>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-4xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors
+                     hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              [attr.aria-label]="copy().close"
+              (click)="close()"
+            >
+              <dga-icon name="close" size="md" tone="current" />
+            </button>
+          </div>
+
+          <div
+            #log
+            class="flex min-h-0 flex-1 flex-col gap-md overflow-y-auto px-lg py-lg sm:px-xl"
+            role="log"
+            aria-live="polite"
+          >
+            @for (msg of messages(); track msg.id) {
+              <div
+                class="dga-chatbot-bubble max-w-[85%] rounded-2xl px-lg py-md text-body-sm
+                       leading-relaxed"
+                [class.ms-auto]="msg.role === 'user'"
+                [class.bg-primary]="msg.role === 'user'"
+                [class.text-on-color]="msg.role === 'user'"
+                [class.bg-sunken]="msg.role === 'bot'"
+                [class.text-paragraph]="msg.role === 'bot'"
+                [attr.data-role]="msg.role"
+              >
+                {{ msg.text }}
+              </div>
+            }
+          </div>
+
+          <form
+            class="flex shrink-0 items-end gap-sm border-t border-border bg-surface/60
+                   px-lg py-md sm:gap-md sm:px-xl sm:py-lg"
+            (submit)="onSubmit($event)"
+          >
+            <input
+              #composer
+              type="text"
+              class="min-w-0 flex-1 rounded-full border border-border bg-card px-xl py-md
+                     text-body-md text-fg shadow-xs placeholder:text-muted
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-0 focus-visible:outline-focus"
+              [attr.aria-label]="copy().input"
+              [placeholder]="placeholder() || copy().placeholder"
+              [value]="draft()"
+              (input)="draft.set($any($event.target).value)"
+              name="chat-draft"
+              autocomplete="off"
+            />
+            <button
+              dgaButton
+              type="submit"
+              variant="primary"
+              iconOnly
+              class="dga-chatbot-send shrink-0"
+              [disabled]="!draft().trim()"
+              [attr.aria-label]="copy().send"
+            >
+              <dga-icon [name]="sendIcon()" size="md" />
+            </button>
+          </form>
+        </aside>
+      </div>
+    }
+
+    @if (!open() || !hideFabWhenOpen()) {
+      <button
+        type="button"
+        [class]="fabClasses()"
+        [style.bottom]="fabBottom()"
+        [attr.data-edge]="position()"
+        [attr.data-tone]="fabTone()"
+        [attr.data-stack]="stack()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="panelId"
+        [attr.aria-label]="open() ? copy().close : fabLabel() || copy().open"
+        (click)="toggle()"
+      >
+        <dga-icon
+          [name]="open() ? 'close' : fabIcon()"
+          size="xl"
+          tone="current"
+          aria-hidden="true"
+        />
+      </button>
+    }
+  `,isInline:!0,styles:[":host[data-embedded]{display:block;position:absolute;inset:0;pointer-events:none}:host[data-embedded] .dga-chatbot-fab,:host[data-embedded] .dga-chatbot-layer{pointer-events:auto}:host[data-embedded] .dga-chatbot-fab{--dga-local-fab-edge: var(--spacing-lg, .75rem)}:host .dga-chatbot-fab[data-edge=end]{inset-inline-end:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-start:auto}:host .dga-chatbot-fab[data-edge=start]{inset-inline-start:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-end:auto}:host .dga-chatbot-fab[data-edge=left]{left:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));right:auto}:host .dga-chatbot-fab[data-edge=right]{right:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));left:auto}:host .dga-chatbot-panel[data-edge=end]{inset-inline-end:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-start:auto}:host .dga-chatbot-panel[data-edge=start]{inset-inline-start:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-end:auto}:host .dga-chatbot-panel[data-edge=left]{left:var(--dga-fab-edge, var(--spacing-4xl, 2rem));right:auto}:host .dga-chatbot-panel[data-edge=right]{right:var(--dga-fab-edge, var(--spacing-4xl, 2rem));left:auto}:host[data-embedded] .dga-chatbot-panel[data-edge=end],:host[data-embedded] .dga-chatbot-panel[data-edge=start],:host[data-embedded] .dga-chatbot-panel[data-edge=left],:host[data-embedded] .dga-chatbot-panel[data-edge=right]{inset-inline-end:var(--spacing-lg, .75rem);inset-inline-start:auto}@keyframes dga-chatbot-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chatbot-slide-in{0%{opacity:0;transform:translateY(.75rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-scale-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-bubble-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-chatbot-backdrop-in{0%{opacity:0}to{opacity:1}}:host .dga-chatbot-backdrop{animation:dga-chatbot-backdrop-in .18s ease-out both}:host .dga-chatbot-panel[data-animation=fade]{animation:dga-chatbot-fade-in .2s ease-out both}:host .dga-chatbot-panel[data-animation=slide]{animation:dga-chatbot-slide-in .24s cubic-bezier(.16,1,.3,1) both}:host .dga-chatbot-panel[data-animation=scale]{animation:dga-chatbot-scale-in .22s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom var(--dga-chatbot-origin, end)}:host .dga-chatbot-panel[data-animation=scale][data-edge=start],:host .dga-chatbot-panel[data-animation=scale][data-edge=left]{transform-origin:bottom start}:host .dga-chatbot-panel[data-animation=scale][data-edge=end],:host .dga-chatbot-panel[data-animation=scale][data-edge=right]{transform-origin:bottom end}:host .dga-chatbot-bubble{animation:dga-chatbot-bubble-in .18s ease-out both}:host .dga-chatbot-send{border-radius:9999px}@media(prefers-reduced-motion:reduce){:host .dga-chatbot-backdrop,:host .dga-chatbot-panel,:host .dga-chatbot-bubble{animation:none!important}}\n"],dependencies:[{kind:"directive",type:m,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","iconOnly","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:u,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})}e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:e,type:i,decorators:[{type:x,args:[{selector:"dga-chatbot",standalone:!0,imports:[m,u],template:`
+    @if (open()) {
+      <div
+        class="dga-chatbot-layer inset-0 z-urgent"
+        [class.fixed]="!embedded()"
+        [class.absolute]="embedded()"
+        role="presentation"
+        [attr.data-animation]="animation()"
+        [attr.data-edge]="position()"
+      >
+        @if (overlay()) {
+          <div
+            class="dga-chatbot-backdrop absolute inset-0 bg-overlay/25"
+            aria-hidden="true"
+            (click)="onBackdrop()"
+          ></div>
+        }
+        <aside
+          #panel
+          [id]="panelId"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="copy().panelLabel"
+          [class]="panelClasses()"
+          [attr.data-animation]="animation()"
+          [attr.data-edge]="position()"
+          [attr.data-size]="size()"
+        >
+          <div
+            class="flex shrink-0 items-center gap-md border-b border-border bg-surface/80
+                   px-lg py-md backdrop-blur-sm sm:px-xl sm:py-lg"
+          >
+            <span
+              class="relative inline-flex size-5xl shrink-0 items-center justify-center
+                     rounded-full bg-primary-faint text-fg-primary"
+              aria-hidden="true"
+            >
+              <dga-icon [name]="agentIcon()" size="lg" tone="primary" />
+              @if (online()) {
+                <span
+                  class="absolute end-0 bottom-0 size-md rounded-full border-2 border-card
+                         bg-success"
+                ></span>
+              }
+            </span>
+            <div class="min-w-0 flex-1">
+              <h2 class="m-0 truncate text-body-md font-bold text-display sm:text-body-lg">
+                {{ title() || copy().title }}
+              </h2>
+              @if (subtitle() || copy().subtitle) {
+                <p class="m-0 mt-xxs truncate text-body-xs text-muted">
+                  {{ subtitle() || copy().subtitle }}
+                </p>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-4xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors
+                     hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              [attr.aria-label]="copy().close"
+              (click)="close()"
+            >
+              <dga-icon name="close" size="md" tone="current" />
+            </button>
+          </div>
+
+          <div
+            #log
+            class="flex min-h-0 flex-1 flex-col gap-md overflow-y-auto px-lg py-lg sm:px-xl"
+            role="log"
+            aria-live="polite"
+          >
+            @for (msg of messages(); track msg.id) {
+              <div
+                class="dga-chatbot-bubble max-w-[85%] rounded-2xl px-lg py-md text-body-sm
+                       leading-relaxed"
+                [class.ms-auto]="msg.role === 'user'"
+                [class.bg-primary]="msg.role === 'user'"
+                [class.text-on-color]="msg.role === 'user'"
+                [class.bg-sunken]="msg.role === 'bot'"
+                [class.text-paragraph]="msg.role === 'bot'"
+                [attr.data-role]="msg.role"
+              >
+                {{ msg.text }}
+              </div>
+            }
+          </div>
+
+          <form
+            class="flex shrink-0 items-end gap-sm border-t border-border bg-surface/60
+                   px-lg py-md sm:gap-md sm:px-xl sm:py-lg"
+            (submit)="onSubmit($event)"
+          >
+            <input
+              #composer
+              type="text"
+              class="min-w-0 flex-1 rounded-full border border-border bg-card px-xl py-md
+                     text-body-md text-fg shadow-xs placeholder:text-muted
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-0 focus-visible:outline-focus"
+              [attr.aria-label]="copy().input"
+              [placeholder]="placeholder() || copy().placeholder"
+              [value]="draft()"
+              (input)="draft.set($any($event.target).value)"
+              name="chat-draft"
+              autocomplete="off"
+            />
+            <button
+              dgaButton
+              type="submit"
+              variant="primary"
+              iconOnly
+              class="dga-chatbot-send shrink-0"
+              [disabled]="!draft().trim()"
+              [attr.aria-label]="copy().send"
+            >
+              <dga-icon [name]="sendIcon()" size="md" />
+            </button>
+          </form>
+        </aside>
+      </div>
+    }
+
+    @if (!open() || !hideFabWhenOpen()) {
+      <button
+        type="button"
+        [class]="fabClasses()"
+        [style.bottom]="fabBottom()"
+        [attr.data-edge]="position()"
+        [attr.data-tone]="fabTone()"
+        [attr.data-stack]="stack()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="panelId"
+        [attr.aria-label]="open() ? copy().close : fabLabel() || copy().open"
+        (click)="toggle()"
+      >
+        <dga-icon
+          [name]="open() ? 'close' : fabIcon()"
+          size="xl"
+          tone="current"
+          aria-hidden="true"
+        />
+      </button>
+    }
+  `,changeDetection:v.OnPush,host:{"[class.contents]":"!embedded()","[attr.data-position]":"position()","[attr.data-animation]":"animation()","[attr.data-embedded]":"embedded() || null"},styles:[":host[data-embedded]{display:block;position:absolute;inset:0;pointer-events:none}:host[data-embedded] .dga-chatbot-fab,:host[data-embedded] .dga-chatbot-layer{pointer-events:auto}:host[data-embedded] .dga-chatbot-fab{--dga-local-fab-edge: var(--spacing-lg, .75rem)}:host .dga-chatbot-fab[data-edge=end]{inset-inline-end:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-start:auto}:host .dga-chatbot-fab[data-edge=start]{inset-inline-start:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-end:auto}:host .dga-chatbot-fab[data-edge=left]{left:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));right:auto}:host .dga-chatbot-fab[data-edge=right]{right:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));left:auto}:host .dga-chatbot-panel[data-edge=end]{inset-inline-end:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-start:auto}:host .dga-chatbot-panel[data-edge=start]{inset-inline-start:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-end:auto}:host .dga-chatbot-panel[data-edge=left]{left:var(--dga-fab-edge, var(--spacing-4xl, 2rem));right:auto}:host .dga-chatbot-panel[data-edge=right]{right:var(--dga-fab-edge, var(--spacing-4xl, 2rem));left:auto}:host[data-embedded] .dga-chatbot-panel[data-edge=end],:host[data-embedded] .dga-chatbot-panel[data-edge=start],:host[data-embedded] .dga-chatbot-panel[data-edge=left],:host[data-embedded] .dga-chatbot-panel[data-edge=right]{inset-inline-end:var(--spacing-lg, .75rem);inset-inline-start:auto}@keyframes dga-chatbot-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chatbot-slide-in{0%{opacity:0;transform:translateY(.75rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-scale-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-bubble-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-chatbot-backdrop-in{0%{opacity:0}to{opacity:1}}:host .dga-chatbot-backdrop{animation:dga-chatbot-backdrop-in .18s ease-out both}:host .dga-chatbot-panel[data-animation=fade]{animation:dga-chatbot-fade-in .2s ease-out both}:host .dga-chatbot-panel[data-animation=slide]{animation:dga-chatbot-slide-in .24s cubic-bezier(.16,1,.3,1) both}:host .dga-chatbot-panel[data-animation=scale]{animation:dga-chatbot-scale-in .22s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom var(--dga-chatbot-origin, end)}:host .dga-chatbot-panel[data-animation=scale][data-edge=start],:host .dga-chatbot-panel[data-animation=scale][data-edge=left]{transform-origin:bottom start}:host .dga-chatbot-panel[data-animation=scale][data-edge=end],:host .dga-chatbot-panel[data-animation=scale][data-edge=right]{transform-origin:bottom end}:host .dga-chatbot-bubble{animation:dga-chatbot-bubble-in .18s ease-out both}:host .dga-chatbot-send{border-radius:9999px}@media(prefers-reduced-motion:reduce){:host .dga-chatbot-backdrop,:host .dga-chatbot-panel,:host .dga-chatbot-bubble{animation:none!important}}\n"]}]}],ctorParameters:()=>[],propDecorators:{composerRef:[{type:e.ViewChild,args:["composer",{isSignal:!0}]}],logRef:[{type:e.ViewChild,args:["log",{isSignal:!0}]}],position:[{type:e.Input,args:[{isSignal:!0,alias:"position",required:!1}]}],animation:[{type:e.Input,args:[{isSignal:!0,alias:"animation",required:!1}]}],size:[{type:e.Input,args:[{isSignal:!0,alias:"size",required:!1}]}],title:[{type:e.Input,args:[{isSignal:!0,alias:"title",required:!1}]}],subtitle:[{type:e.Input,args:[{isSignal:!0,alias:"subtitle",required:!1}]}],fabLabel:[{type:e.Input,args:[{isSignal:!0,alias:"fabLabel",required:!1}]}],placeholder:[{type:e.Input,args:[{isSignal:!0,alias:"placeholder",required:!1}]}],fabIcon:[{type:e.Input,args:[{isSignal:!0,alias:"fabIcon",required:!1}]}],sendIcon:[{type:e.Input,args:[{isSignal:!0,alias:"sendIcon",required:!1}]}],agentIcon:[{type:e.Input,args:[{isSignal:!0,alias:"agentIcon",required:!1}]}],fabTone:[{type:e.Input,args:[{isSignal:!0,alias:"fabTone",required:!1}]}],overlay:[{type:e.Input,args:[{isSignal:!0,alias:"overlay",required:!1}]}],overlayClose:[{type:e.Input,args:[{isSignal:!0,alias:"overlayClose",required:!1}]}],online:[{type:e.Input,args:[{isSignal:!0,alias:"online",required:!1}]}],hideFabWhenOpen:[{type:e.Input,args:[{isSignal:!0,alias:"hideFabWhenOpen",required:!1}]}],stack:[{type:e.Input,args:[{isSignal:!0,alias:"stack",required:!1}]}],clearFab:[{type:e.Input,args:[{isSignal:!0,alias:"clearFab",required:!1}]}],embedded:[{type:e.Input,args:[{isSignal:!0,alias:"embedded",required:!1}]}],initialMessages:[{type:e.Input,args:[{isSignal:!0,alias:"initialMessages",required:!1}]}],sent:[{type:e.Output,args:["sent"]}],opened:[{type:e.Output,args:["opened"]}],closed:[{type:e.Output,args:["closed"]}]}});export{i as DgaChatbot};