@humandialog/forms.svelte 0.5.3 → 0.5.5

package/components/kanban/internal/kanban.column.svelte

@@ -1,24 +1,20 @@
 <script>import { getContext, afterUpdate, tick } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../../stores";
-import { getActive, activateItem } from "../../../utils.js";
+import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing } from "../../../utils.js";
 import Card from "./kanban.card.svelte";
 import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
 import Inserter from "./kanban.inserter.svelte";
-import { FaPlus } from "svelte-icons/fa";
-export let title = "";
-export let width = "w-[240px]";
-export let self = void 0;
-export let a = "";
-export let objects = void 0;
-export let context = "";
-export let key = "";
+import { FaPlus, FaCheck } from "svelte-icons/fa";
 export let currentColumnIdx;
-export let showMoveOperationsForItem = void 0;
-export let scrollViewToCard = void 0;
+export let onInsert;
 let column_element;
 export function getHeight() {
   return column_element.getBoundingClientRect().height;
 }
+let titleElement;
+export function editName(onFinish = void 0) {
+  startEditing(titleElement, onFinish);
+}
 export const SET_LEFT = 0;
 export const SET_RIGHT = 1;
 export const CLEAR_LEFT = 2;
@@ -40,58 +36,70 @@ export function setBorder(what_to_do) {
   }
 }
 let definition = getContext("rKanban-definition");
-let item = null;
-let items = void 0;
-let ctx = context ? context : getContext("ctx");
-let last_tick = -1;
-let item_key = "";
-let width_class = width ? `w-11/12 sm:${width}` : "w-11/12 sm:w-[240px]";
+let columnDef = definition.columns[currentColumnIdx];
+let column_items = void 0;
+let width_class = columnDef.width ? `w-11/12 sm:${columnDef.width}` : "w-11/12 sm:w-[240px]";
 $:
-  setup($data_tick_store, $contextItemsStore);
-function setup(...args) {
-  last_tick = $data_tick_store;
-  item = self ?? $contextItemsStore[ctx];
-  items = void 0;
-  if (objects) {
-    items = objects;
-  } else if (item && a)
-    items = item[a];
-  if (items == void 0)
-    items = [];
-  if (items.length > 0) {
-    let first_element = items[0];
-    let keys = Object.keys(first_element);
-    if (key)
-      item_key = key;
-    else if (keys.includes("Id"))
-      item_key = "Id";
-    else if (keys.includes("$ref"))
-      item_key = "$ref";
-    else if (keys.length > 0)
-      item_key = keys[0];
-    else
-      item_key = "";
-  }
+  setup_data();
+$:
+  is_row_active = calculate_active($contextItemsStore);
+$:
+  is_row_selected = selected($contextItemsStore);
+$:
+  selected_class = is_row_selected ? "!border-blue-300" : "";
+$:
+  focused_class = is_row_active ? "bg-stone-50 dark:bg-stone-700" : "";
+$:
+  force_rerender($data_tick_store, $contextItemsStore);
+export function reload() {
+  let allItems = definition.getItems();
+  if (definition.stateAttrib)
+    column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+}
+function setup_data(...args) {
+  reload();
+}
+function force_rerender(...args) {
+  column_items = [...column_items];
+}
+function calculate_active(...args) {
+  if (!!columnDef.operations)
+    return isActive("props", columnDef);
+  else
+    return false;
+}
+function selected(...args) {
+  if (!!columnDef.operations)
+    return isSelected(columnDef);
+  else
+    return false;
 }
 let cards = [];
-export function findCardByItem(item2) {
+export function findCardByItem(item) {
   if (!cards)
     return null;
-  const item_idx = items?.findIndex((i) => i == item2);
-  if (item_idx >= 0) {
-    return cards[item_idx];
+  const itemIdx = column_items?.findIndex((i) => i == item);
+  if (itemIdx >= 0) {
+    return cards[itemIdx];
   } else
     return null;
 }
+export function activateByItemId(id) {
+  const itemIdx = column_items?.findIndex((e) => e.Id == id);
+  if (itemIdx >= 0) {
+    const card = cards[itemIdx];
+    card.activate();
+  }
+}
 let inserter;
 const None = 0;
-let showInserterAfter = None;
+let showInserterAfterId = None;
 let activateAfterDomUpdate = null;
 let lastActivatedElement = null;
 export async function add(after = KanbanColumnTop) {
   if (!definition.onAdd)
     return;
-  showInserterAfter = after ?? KanbanColumnTop;
+  showInserterAfterId = after.Id ?? KanbanColumnTop;
   if (activateAfterDomUpdate)
     activateAfterDomUpdate = null;
   lastActivatedElement = getActive("props");
@@ -101,56 +109,92 @@ export async function add(after = KanbanColumnTop) {
   if (!inserter)
     return;
   inserter.run(async (detail) => {
-    showInserterAfter = None;
+    showInserterAfterId = None;
     if (detail.cancel)
       activateAfterDomUpdate = lastActivatedElement;
     else {
       if (detail.incremental) {
         let currentActive = activateAfterDomUpdate ?? getActive("props");
-        await add(currentActive);
+        if (currentActive)
+          await add(currentActive);
       }
     }
   });
 }
-async function insert(title2, after) {
-  let newElement = await definition.onAdd(title2, currentColumnIdx, after);
-  if (!newElement)
-    return;
-  activateAfterDomUpdate = newElement;
-}
 afterUpdate(() => {
   if (activateAfterDomUpdate) {
-    let activateAfterDomUpdateIdx = items.findIndex((e) => e == activateAfterDomUpdate);
+    let activateAfterDomUpdateIdx = column_items.findIndex((e) => e == activateAfterDomUpdate);
     activateAfterDomUpdate = null;
     if (activateAfterDomUpdateIdx >= 0) {
       cards[activateAfterDomUpdateIdx].activate();
     }
   }
 });
+function getItemKey(item) {
+  if (definition.key)
+    return item[definition.key];
+  else if (item.Id)
+    return item.Id;
+  else if (item.$ref)
+    return item.$ref;
+  else
+    return 0;
+}
+function onTitleChanged(text) {
+  if (columnDef.onTitleChanged)
+    columnDef.onTitleChanged(text);
+}
+let rootElement;
+export function activate(e) {
+  if (e)
+    e.stopPropagation();
+  if (!columnDef.operations)
+    return;
+  if (isActive("props", columnDef)) {
+    return;
+  }
+  activateItem("props", columnDef, columnDef.operations);
+  rootElement?.scrollIntoView();
+}
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<section class="flex-none sm:flex-1 sm:min-w-[180px] sm:max-w-[240px] {width_class}">
-    <header>
-        <h2 class="mb-2 text-lg sm:text-xs uppercase w-full text-center whitespace-nowrap relative">{title}
+<section class="snap-center sm:snap-align-none flex-none sm:flex-1 sm:min-w-[180px] sm:max-w-[240px] rounded-md border border-transparent  {width_class} {selected_class} {focused_class}"
+        bind:this={rootElement}>
+    <header class:cursor-pointer={!is_row_active && columnDef.operations}
+            use:selectable={columnDef}
+            on:click={activate}>
+        <h2 class="mt-2 mb-2 text-lg sm:text-xs uppercase w-full min-h-[1rem] text-center whitespace-nowrap relative">
+            <span 
+                use:editable={{
+                    action: (text) => onTitleChanged(text),
+                    active: false
+                }}
+                bind:this={titleElement}>
+                {columnDef.title}
+            </span>
+            
+            {#if columnDef.finishing}
+                <div class="inline-block text-green-600 h-3 w-3 ml-2">
+                    <FaCheck/>
+                </div>
+            {/if}
             <button class="absolute right-2 w-4 sm:w-2.5"
-                    on:click={(e) => add(KanbanColumnTop)}>
+                    on:click|stopPropagation={(e) => add(KanbanColumnTop)}>
                 <FaPlus/>
             </button>
         </h2>
     </header>
     <ul class="w-full border-stone-700" bind:this={column_element}>
-        {#if showInserterAfter === KanbanColumnTop}
-            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnTop)}}
+        {#if showInserterAfterId === KanbanColumnTop}
+            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnTop)}}
                         bind:this={inserter} />
         {/if}
 
-        {#if items && items.length > 0}
-            {#each items as element, item_idx (element[item_key])}
+        {#if column_items && column_items.length > 0}
+            {#each column_items as element, item_idx (getItemKey(element))}
                 <Card   item={element} 
-                        {showMoveOperationsForItem}
-                        {scrollViewToCard}
-                        runInserter={add}
                         bind:this={cards[item_idx]}>
                     <svelte:fragment slot="kanbanCardTopProps" let:element>
                         <slot name="kanbanCardTopProps" {element}/>
@@ -165,15 +209,15 @@ afterUpdate(() => {
                     </svelte:fragment>
                 </Card>
 
-                {#if showInserterAfter == element}
-                    <Inserter   onInsert={async (text) => {await insert(text, showInserterAfter)}}
+                {#if showInserterAfterId == element.Id}
+                    <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, showInserterAfterId)}}
                                 bind:this={inserter} />
                 {/if}
             {/each}
         {/if}
 
-        {#if showInserterAfter === KanbanColumnBottom}
-            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnBottom)}}
+        {#if showInserterAfterId === KanbanColumnBottom}
+            <Inserter   onInsert={async (text) => {await onInsert(currentColumnIdx, text, KanbanColumnBottom)}}
                         bind:this={inserter} />
         {/if}
 

package/components/kanban/internal/kanban.column.svelte.d.ts

@@ -1,24 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string | undefined;
-        width?: string | undefined;
-        self?: object | undefined;
-        a?: string | undefined;
-        objects?: object[] | undefined;
-        context?: string | undefined;
-        key?: string | undefined;
         currentColumnIdx: number;
-        showMoveOperationsForItem?: Function | undefined;
-        scrollViewToCard?: Function | undefined;
+        onInsert: Function;
         getHeight?: (() => number) | undefined;
+        editName?: ((onFinish?: Function | undefined) => void) | undefined;
         SET_LEFT?: 0 | undefined;
         SET_RIGHT?: 1 | undefined;
         CLEAR_LEFT?: 2 | undefined;
         CLEAR_RIGHT?: 3 | undefined;
         setBorder?: ((what_to_do: number) => void) | undefined;
+        reload?: (() => void) | undefined;
         findCardByItem?: ((item: object) => any) | undefined;
+        activateByItemId?: ((id: number) => void) | undefined;
         add?: ((after?: object | number) => Promise<void>) | undefined;
+        activate?: ((e: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -40,12 +36,16 @@ export type KanbanEvents = typeof __propDef.events;
 export type KanbanSlots = typeof __propDef.slots;
 export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
     get getHeight(): () => number;
+    get editName(): (onFinish?: Function | undefined) => void;
     get SET_LEFT(): 0;
     get SET_RIGHT(): 1;
     get CLEAR_LEFT(): 2;
     get CLEAR_RIGHT(): 3;
     get setBorder(): (what_to_do: number) => void;
+    get reload(): () => void;
     get findCardByItem(): (item: object) => any;
+    get activateByItemId(): (id: number) => void;
     get add(): (after?: number | object) => Promise<void>;
+    get activate(): (e: any) => void;
 }
 export {};

package/components/kanban/internal/kanban.inserter.svelte

@@ -16,7 +16,7 @@ let insertion_paragraph;
 
     <h3  class=" text-lg font-semibold min-h-[1.75rem]
                 sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                whitespace-nowrap overflow-clip w-full sm:flex-none "
                 use:editable={onInsert}
                 bind:this={insertion_paragraph}>
         

package/components/kanban/internal/kanban.move.menu.svelte

@@ -3,6 +3,9 @@ import { KanbanColumnTop, KanbanColumnBottom, rKanban_definition } from "../Kanb
 export let definition;
 export let item;
 export let afterActionOperation = void 0;
+export let onMoveUp;
+export let onMoveDown;
+export let onReplace;
 function replaceMenu() {
   if (afterActionOperation)
     setTimeout(() => {
@@ -21,7 +24,7 @@ function replaceMenu() {
                         bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
                         border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                         inline-flex items-center justify-center"
-                        on:click={(e) => { definition.onUp(item); replaceMenu()}}>
+                        on:click={(e) => { onMoveUp(item); replaceMenu()}}>
             <div class="w-3 h-3"><FaAngleUp/></div>
         </button>
 
@@ -30,7 +33,7 @@ function replaceMenu() {
                         bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
                         border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                         inline-flex items-center justify-center"
-                        on:click={(e) => { definition.onDown(item); replaceMenu()}}>
+                        on:click={(e) => { onMoveDown(item); replaceMenu()}}>
             <div class="w-3 h-3"><FaAngleDown/></div>
         </button>
     </section>
@@ -44,7 +47,7 @@ function replaceMenu() {
                             bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
                             border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"
-                            on:click={(e) => { definition.onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
+                            on:click={(e) => { onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
                 <div class="w-3 h-3"><FaAngleDoubleUp/></div>
             </button>
 
@@ -53,7 +56,7 @@ function replaceMenu() {
                             bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
                             border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"
-                            on:click={(e) => { definition.onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
+                            on:click={(e) => { onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
                 <div class="w-3 h-3"><FaAngleDoubleDown/></div>
             </button>
         </section>
@@ -70,7 +73,7 @@ function replaceMenu() {
                             m-0
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
-                            on:click={(e) => { definition.onUp(item); replaceMenu()}}>
+                            on:click={(e) => { onMoveUp(item); replaceMenu()}}>
                 <div class="    w-10 h-10
                                 text-white bg-zinc-500 hover:bg-zinc-500 
                                 font-medium rounded-full text-sm text-center shadow-md
@@ -87,7 +90,7 @@ function replaceMenu() {
                             m-0
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
-                            on:click={(e) => { definition.onDown(item); replaceMenu()}}>
+                            on:click={(e) => { onMoveDown(item); replaceMenu()}}>
                 <div class="    w-10 h-10
                                 text-white bg-zinc-500 hover:bg-zinc-500 
                                 font-medium rounded-full text-sm text-center shadow-md
@@ -111,7 +114,7 @@ function replaceMenu() {
                                 m-0
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom"
-                                on:click={(e) => { definition.onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
+                                on:click={(e) => { onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
                     <div class="    w-10 h-10
                                     text-white bg-zinc-500 hover:bg-zinc-500 
                                     font-medium rounded-full text-sm text-center shadow-md
@@ -128,7 +131,7 @@ function replaceMenu() {
                                 m-0
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom"
-                                on:click={(e) => { definition.onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
+                                on:click={(e) => { onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
                     <div class="    w-10 h-10
                                     text-white bg-zinc-500 hover:bg-zinc-500 
                                     font-medium rounded-full text-sm text-center shadow-md

package/components/kanban/internal/kanban.move.menu.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         definition: rKanban_definition;
         item: object;
         afterActionOperation?: Function | undefined;
+        onMoveUp: Function;
+        onMoveDown: Function;
+        onReplace: Function;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/kanban/internal/kanban.props.svelte

@@ -0,0 +1,140 @@
+<script>import { getContext, tick } from "svelte";
+import { rList_property_type } from "../../list/List";
+import Combo from "../../combo/combo.svelte";
+import DatePicker from "../../date.svelte";
+import Tags from "../../tags.svelte";
+export let position;
+export let item;
+let definition = getContext("rKanban-definition");
+let properties = definition.properties.filter((p) => p.position == position);
+let propElements = [];
+let placeholder = "";
+export function editProperty(field) {
+  let propIdx = properties.findIndex((p) => p.name == field);
+  if (propIdx < 0)
+    return;
+  let property = properties[propIdx];
+  switch (property.type) {
+    case rList_property_type.Date:
+      editDate(field, propIdx);
+      break;
+    case rList_property_type.Combo:
+      editCombo(field, propIdx);
+      break;
+    case rList_property_type.Tags:
+      editTags(field, propIdx);
+      break;
+  }
+}
+function on_date_changed(value, a) {
+  if (!value)
+    item[a] = "";
+  else
+    item[a] = value.toJSON();
+}
+function on_combo_changed(key, name, prop) {
+  if (prop.association) {
+    let iname = prop.combo_definition.element_name ?? "$display";
+    item[prop.a] = {
+      $ref: key,
+      [iname]: name
+    };
+  } else {
+    let value = key ?? name;
+    item[prop.a] = value;
+  }
+}
+async function editCombo(field, propIdx) {
+  let combo = propElements[propIdx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = propElements[propIdx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function editDate(field, propIdx) {
+  let combo = propElements[propIdx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = propElements[propIdx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function editTags(field, propIdx) {
+  let tags = propElements[propIdx];
+  if (!!tags)
+    tags.show();
+  else {
+    placeholder = field;
+    await tick();
+    tags = propElements[propIdx];
+    if (!!tags)
+      tags.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+</script>
+
+<section class="flex flex-row justify-between">
+    {#each properties as prop, idx}
+        {#if item[prop.a] || placeholder==prop.name}
+            {#if prop.type == rList_property_type.Date}
+                <DatePicker
+                    self={item}
+                    a={prop.a}
+                    compact={true}
+                    s="xs"
+                    inContext="props"
+                    bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Combo}
+                <Combo
+                        compact={true}
+                        inContext="props"
+                        self={item}
+                        a={prop.a}
+                        onSelect={prop.onSelect}
+                        isAssociation={prop.association}
+                        icon={false}
+                        definition={prop.combo_definition}
+                        s="xs"
+                        bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Static}
+                <p
+                    class="     h-6
+                                sm:text-xs sm:min-h-[1rem]
+                                text-base min-h-[1.5rem]
+                                text-stone-400
+                                text-right"
+                                bind:this={propElements[idx]}>
+                    {item[prop.a]}
+                </p>
+            {:else if prop.type == rList_property_type.Tags}
+                <Tags
+                    class="mt-2"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={prop.a}
+                    globalTags={prop.allTags}
+                    s="xs"
+                    onSelect={prop.onSelect}
+                    onCreate={prop.onCreate}
+                    bind:this={propElements[idx]}
+                />
+            {/if}
+        {/if}
+    {/each}
+</section>

package/components/kanban/internal/kanban.props.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        position: number;
+        item: object;
+        editProperty?: ((field: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type KanbanProps = typeof __propDef.props;
+export type KanbanEvents = typeof __propDef.events;
+export type KanbanSlots = typeof __propDef.slots;
+export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
+    get editProperty(): (field: string) => void;
+}
+export {};

package/components/kanban/kanban.callbacks.svelte

@@ -1,15 +1,9 @@
 <script>import { getContext } from "svelte";
-export let onUp = void 0;
-export let onDown = void 0;
 export let onAdd = void 0;
-export let onRemove = void 0;
-export let onReplace = void 0;
 export let onOpen = void 0;
+export let getCardOperations = void 0;
 let definition = getContext("rKanban-definition");
-definition.onUp = onUp;
-definition.onDown = onDown;
 definition.onAdd = onAdd;
-definition.onRemove = onRemove;
-definition.onReplace = onReplace;
 definition.onOpen = onOpen;
+definition.getCardOperations = getCardOperations;
 </script>

package/components/kanban/kanban.callbacks.svelte.d.ts

@@ -1,12 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        onUp?: Function | undefined;
-        onDown?: Function | undefined;
         onAdd?: Function | undefined;
-        onRemove?: Function | undefined;
-        onReplace?: Function | undefined;
         onOpen?: Function | undefined;
+        getCardOperations?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/kanban/kanban.column.svelte

@@ -2,19 +2,19 @@
 import { rKanban_column } from "./Kanban";
 export let title = "";
 export let width = "w-[240px]";
-export let self = void 0;
-export let a = "";
-export let objects = void 0;
-export let context = "";
+export let state = "";
+export let finishing = false;
+export let operations = void 0;
+export let onTitleChanged = void 0;
 let definition = getContext("rKanban-definition");
 let column = new rKanban_column();
 column.id = definition.columns.length + 1;
 column.title = title;
 column.width = width;
-column.self = self;
-column.a = a;
-column.objects = objects;
-column.context = context;
+column.state = state;
+column.finishing = finishing;
+column.operations = operations;
+column.onTitleChanged = onTitleChanged;
 definition.columns.push(column);
 </script>
 

package/components/kanban/kanban.column.svelte.d.ts

@@ -3,10 +3,10 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         width?: string | undefined;
-        self?: object | undefined;
-        a?: string | undefined;
-        objects?: object[] | undefined;
-        context?: string | undefined;
+        state?: any;
+        finishing?: boolean | undefined;
+        operations?: object[] | undefined;
+        onTitleChanged?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;