@dooboostore/dom-render 1.0.106 → 1.0.108

package/src/components/details/Details.ts

@@ -0,0 +1,236 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnInitRender } from '../../lifecycle/OnInitRender';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+import { OnCreateRender } from '../../lifecycle/OnCreateRender';
+import { type Subscription } from '@dooboostore/core/message/Subscription';
+import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';
+import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
+
+
+export namespace Details {
+  export const selector = 'dr-details';
+
+  export type Attribute = {
+    class?: string;
+    toggle_form_reset?: boolean;
+    disableOtherClickClose?: boolean;
+    toggle?: (open: boolean) => void;
+  }
+  export type BodyAttribute = {
+    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+  } & Attribute
+
+  export type FormAttribute = {
+    disabledSubmit?: null;
+    submit?: (event: SubmitEvent, element: HTMLFormElement)=>void;
+  } & BodyAttribute
+
+  // @Component({
+  //   template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
+  //   styles: '',
+  //   selector: `${selector}.Summary`
+  // })
+  export class Summary extends ComponentBase<Attribute> {
+    constructor() {
+      super({onlyParentType: [Details]});
+    }
+  }
+
+  // @Component({
+  //   template: '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
+  //   selector: `${selector}.Body`
+  // })
+  export class Body extends ComponentBase<BodyAttribute> {
+    private $element?: HTMLDivElement;
+    constructor() {
+      super({onlyParentType: [Details]});
+    }
+  }
+
+  export const isBody = (instance: any): instance is Body => {
+    return instance instanceof Body;
+  }
+
+
+
+
+  // @Component({
+  //   template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
+  //   styles: detailsFormStyle,
+  //   selector: `${selector}.Form`
+  // })
+  export class Form extends ComponentBase<FormAttribute> {
+    private $element?: HTMLFormElement;
+    constructor() {
+      super({onlyParentType: [Details]});
+    }
+    submit(element: HTMLFormElement, event: SubmitEvent) {
+      if (this.hasAttribute('disabledSubmit')) {
+        event.preventDefault();
+      }
+      if (this.hasAttribute('submit')) {
+        this.getAttribute('submit')?.(event,  element);
+      }
+    }
+    reset() {
+      this.$element?.reset();
+    }
+  }
+  export const isForm = (instance: any): instance is Form => {
+    return instance instanceof Form;
+  }
+
+  // @Component({
+  //   template: template,
+  //   styles: style,
+  //   // noStrip: true,
+  //   selector: `${selector}`
+  // })
+  export class Details extends ComponentBase<Attribute> implements OnCreateRender, OnInitRender {
+    // private detailsElement?: HTMLDetailsElement;
+    private documentClickSubscription?: Subscription;
+    private toggleSubscription?: Subscription;
+    private element?: HTMLDetailsElement;
+    onCreateRenderData(data: OnCreateRenderDataParams) {
+      super.onCreateRenderData(data);
+    }
+
+    onCreateRender(...param: any[]): void {
+    }
+
+    toggle(element: HTMLDetailsElement) {
+      const toggleAttribute = this.getAttribute('toggle');
+      if (toggleAttribute) {
+        toggleAttribute?.(element.open);
+      }
+    }
+    onInitRender(param: any, rawSet: RawSet): void {
+      super.onInitRender(param,rawSet);
+
+      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
+        const detailsElement = this.element;
+
+        const document = this.rawSet.dataSet!.config!.window!.document!;
+        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {
+          if (this.getAttribute('disableOtherClickClose')) {
+            return;
+          }
+          if (detailsElement && !detailsElement?.contains(event?.target as Node)){
+            detailsElement.open = false;
+          }
+        })
+        if (detailsElement) {
+          this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {
+            if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {
+              this.children?.filter(isForm).forEach(it => {
+                it.reset();
+              })
+            }
+          })
+        }
+      }
+      // console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+    }
+
+
+    onDestroyRender(...metaData: any[]): void {
+      this.toggleSubscription?.unsubscribe();
+      this.documentClickSubscription?.unsubscribe();
+      // console.log('onDestroyRender', metaData);
+      // if (ValidUtils.isBrowser()) {
+      //   document.removeEventListener('click', this.ccc)
+      // }
+    }
+
+    // changeAttribute(attribute: { className: string } | undefined) {
+    // }
+
+  }
+}
+
+export default {
+  detailsSummary: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Details.selector}-summary`,
+      template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Details.Summary(), config: config});
+      }
+    })
+  },
+  detailsBody: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Details.selector}-body`,
+      template: '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Details.Body(), config: config});
+      }
+    })
+  },
+  detailsForm: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Details.selector}-form`,
+      template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Details.Form(), config: config});
+      }
+    })
+  },
+  details: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Details.selector}`,
+      styles: `
+        .details-container {
+            position: relative;
+        }
+
+        .details-container .details-body-container {
+            position: absolute;
+        }
+
+
+        .details-container .details-body-bottom-left-container {
+            position: absolute;
+            left: 0;
+            top: 100%;
+            /*margin-top: 0px;*/
+            /*width: max-content;*/
+        }
+
+        .details-container .details-body-bottom-right-container {
+            position: absolute;
+            right: 0;
+            top: 100%;
+            /*margin-top: 0px;*/
+            /*width: max-content;*/
+        }
+
+        .details-container .details-body-top-left-container {
+            position: absolute;
+            left: 0;
+            bottom: 100%;
+            /*margin-bottom: 0px;*/
+            /*width: max-content;*/
+        }
+
+        .details-container .details-body-top-right-container {
+            position: absolute;
+            right: 0;
+            bottom: 100%;
+            /*margin-bottom: 0px;*/
+        }
+      `,
+      template: '<details class="${`${@this@.getAttribute(\'class\')} details-container`}$" dr-on-init="@this@.element = $element;" dr-event-toggle="@this@.toggle($element)"> #innerHTML# </details>',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Details.Details(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/details/index.ts

@@ -0,0 +1 @@
+export * from './Details';

package/src/components/dialog/Dialog.ts

@@ -0,0 +1,84 @@
+// import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
+// import { ComponentBase } from '../ComponentBase';
+// import { OtherData } from '@dooboostore/dom-render/lifecycle/OnChangeAttrRender';
+// import template from './dialog.html'
+//
+// export namespace Dialog {
+//   export const selector = 'System:Dialog';
+//   export type Attribute<D> = {
+//     show?: null;
+//     backdropClickClose?: null;
+//     class?: string;
+//     close?: () => void
+//     toggle?: (element:HTMLDialogElement) => void,
+//     data?: D
+//   }
+//
+//
+//   @Component({
+//     template,
+//     // styles: style,
+//     selector: `${selector}`
+//   })
+//   export class Dialog<D = any> extends ComponentBase<Attribute<D>> {
+//     private element?: HTMLDialogElement;
+//
+//     closeDialog() {
+//       if (this.element) {
+//         this.element.close();
+//         this.getAttribute('toggle')?.(this.element);
+//       }
+//     }
+//
+//     destroyDialog() {
+//       this.getAttribute('close')?.();
+//     }
+//
+//     onInitElement(element: HTMLDialogElement) {
+//       this.element = element;
+//       if (this.hasAttribute('show')) {
+//         this.element.showModal();
+//       }
+//       this.getAttribute('toggle')?.(this.element);
+//
+//       this.element.addEventListener('click', (event) => {
+//         if (this.getAttribute('backdropClickClose') !== null) {
+//           if (event.target === this.element) {
+//             this.closeDialog();
+//           }
+//         }
+//       });
+//     }
+//
+//     showModal() {
+//       this.element?.showModal();
+//       if (this.element)
+//       this.getAttribute('toggle')?.(this.element);
+//     }
+//
+//     show() {
+//       this.element?.show();
+//       if (this.element)
+//       this.getAttribute('toggle')?.(this.element);
+//     }
+//
+//     close() {
+//       this.element?.close();
+//     }
+//     setData(data?: D | null) {
+//
+//     }
+//     onChangeAttrRender(name: string, value: any, other: OtherData) {
+//       super.onChangeAttrRender(name, value, other);
+//       if (this.equalsAttributeName(name, 'show') && this.element) {
+//         if (this.hasAttribute('show')) {
+//           this.showModal();
+//         } else {
+//           this.close();
+//         }
+//       } else if (name === 'data') {
+//         this.setData(this.getAttribute('data'))
+//       }
+//     }
+//   }
+// }

package/src/components/dialog/dialog.html

@@ -0,0 +1,10 @@
+<dialog dr-class="{[@this@.getAttribute('class')]:@this@.getAttribute('class')}"
+        dr-on-rendered-init="@this@.onInitElement($element)"
+        dr-event-close="@this@.destroyDialog()"
+        dr-event-toggle="@this@.open = $element.open">
+
+<!--    <button class="close-button" id="closeProfileDialogBtn" dr-event-click="@this@.closeDialog()">×</button>-->
+<!--    <div class="dialog-content">-->
+        #innerHTML#
+<!--    </div>-->
+</dialog>

package/src/components/dialog/example/ImageEditorDialog.ts

@@ -0,0 +1,115 @@
+// import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
+// import template from './imageEditorDialog.html'
+// import styles from './imageEditorDialog.css'
+// import { ComponentBase } from '@dooboostore/app-system/component/ComponentBase';
+// import { AuthStore } from '@src/store/AuthStore';
+// import { OnCreateRender } from '@dooboostore/dom-render/lifecycle/OnCreateRender';
+// import { OnDestroyRender, OnDestroyRenderParams } from '@dooboostore/dom-render/lifecycle/OnDestroyRender';
+// import { Subscription } from '@dooboostore/core/message';
+// import { Inject } from '@dooboostore/simple-boot/decorators/inject/Inject';
+// import { AuthService } from '@src/service/AuthService';
+// import { UserService } from '@src/service/UserService';
+// import { ObjetService } from '@src/service/ObjetService';
+// import { Talks } from '@src/entities/Talks';
+// import { TalkService } from '@src/service/TalkService';
+// import { ItemService } from '@src/service/ItemService';
+// import { SimFrontOption } from '@dooboostore/simple-boot-front/option/SimFrontOption';
+// import { DomRenderNoProxy } from '@dooboostore/dom-render/decorators/DomRenderNoProxy';
+// import { Appender } from '@dooboostore/dom-render/operators/Appender';
+// import { ConvertUtils as WebConvertUtils } from '@dooboostore/core-web/convert/ConvertUtils';
+// import { WorldService } from '@src/service/WorldService';
+// import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+// import { Router } from '@dooboostore/dom-render/routers/Router';
+//
+// export type ImageEditorDialogData = {}
+//
+// export type Attribute = {
+//   show?: null,
+//   data: ImageEditorDialogData,
+//   close: () => void,
+// };
+//
+// @Component({
+//   template,
+//   styles,
+//   selector: 'ImageEditorDialog'
+// })
+// export class ImageEditorDialog extends ComponentBase<Attribute> implements OnCreateRender, OnDestroyRender {
+//   private formElement?: HTMLFormElement;
+//   private dialogElement?: HTMLDialogElement;
+//   private open = false;
+//
+//   constructor(
+//     private simConfig: SimFrontOption,
+//     private authStore: AuthStore,
+//     @Inject({symbol: UserService.SYMBOL}) private userService: UserService,
+//     @Inject({symbol: TalkService.SYMBOL}) private talkService: TalkService,
+//     @Inject({symbol: ItemService.SYMBOL}) private itemService: ItemService,
+//     @Inject({symbol: ObjetService.SYMBOL}) private objetService: ObjetService,
+//     @Inject({symbol: WorldService.SYMBOL}) private worldService: WorldService,
+//     @Inject({symbol: AuthService.SYMBOL}) private authService: AuthService,
+//     private router: Router
+//   ) {
+//     super();
+//   }
+//
+//   onInitDialog(element: HTMLDialogElement) {
+//     this.dialogElement = element;
+//     // console.log('----------onInitDialog------', this.dialogElement, this.dialogElement.isConnected, this.hasAttribute('show'))
+//     if (this.hasAttribute('show')) {
+//       this.dialogElement.showModal();
+//     }
+//     this.open = this.dialogElement.open;
+//   }
+//
+//   onCreateRender(...param: any[]): void {
+//   }
+//
+//   async onProfileImageChange(event: Event) {
+//     const fileInputElement = event.currentTarget as HTMLInputElement;
+//     const files = fileInputElement.files;
+//     if (files && files.length) {
+//       const file = files[0];
+//       if (file.size > 0) {
+//         await this.worldService.setWorld({
+//           profile:await WebConvertUtils.toBase64(this.compressImage(file), {type: file.type, quality: 0.2})
+//         });
+//         this.authStore.refresh();
+//       }
+//     }
+//   }
+//
+//
+//   async formSubmit(form: HTMLFormElement, event: SubmitEvent) {
+//     event.preventDefault();
+//   }
+//
+//   compressImage(file: File) {
+//     return WebConvertUtils.compressImage(file, {maxWidth: 100})
+//   }
+//
+//   destroyDialog() {
+//     this.formElement?.reset();
+//     this.attribute?.close?.();
+//   }
+//
+//
+//   // form
+//   onInitFrom(element: HTMLFormElement) {
+//     this.formElement = element;
+//   }
+//
+//
+//   closeDialog() {
+//     if (this.dialogElement) {
+//       this.dialogElement.close();
+//       this.open = this.dialogElement.open;
+//     }
+//   }
+//
+//
+//   onDestroyRender(data: OnDestroyRenderParams) {
+//   }
+//
+//
+// }

package/src/components/dialog/example/imageEditorDialog.css

@@ -0,0 +1,179 @@
+/*!* --- 프로필 다이얼로그 --- *!*/
+/*#profileDialog { max-width: 420px; } !* 너비 조정 *!*/
+
+/*dialog {*/
+/*    border: none; border-radius: 14px; !* 더 둥글게 *!*/
+/*    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);*/
+/*    padding: 0; width: 90%; overflow: hidden;*/
+/*}*/
+/*#profileDialog::backdrop {*/
+/*    background-color: rgba(0, 0, 0, 0.55);*/
+/*}*/
+/*.dialog-content { display: flex; flex-direction: column; position: relative; max-height: calc(100dvh - 40px); !* 뷰포트 높이 고려 *! }*/
+/*dialog .close-button {*/
+/*    position: absolute; top: 0; right: 0; background: none; border: none;*/
+/*    outline: none;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*    color: #adb5bd; cursor: pointer;*/
+/*    padding: 8px; line-height: 1; z-index: 10; border-radius: 50%;*/
+/*    width: 38px; height: 38px; display:flex; align-items:center; justify-content:center;*/
+/*}*/
+/*dialog .close-button:hover { background-color:#f1f3f5; color: #343a40; }*/
+
+
+/*.header {*/
+/*    flex-grow: 1; padding: 10px 8px; text-align: center; background: none;*/
+/*    border: none; border-bottom: 2px solid transparent; !* 두께 줄림 *! cursor: pointer;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*    font-weight: 500; color: #495057;*/
+/*    display: inline-flex; align-items: center; justify-content: center; gap: 6px;*/
+/*}*/
+
+/*hr {*/
+/*    border: none;*/
+/*    border-top: 1px solid #cdcdcd;*/
+/*}*/
+
+/*!* New styles for profile update UI *!*/
+/*.profile-tab-content {*/
+/*    padding: 10px 20px;*/
+/*    overflow-y: auto;*/
+/*    flex-grow: 1;*/
+/*}*/
+
+/*.profile-tabs {*/
+/*    padding: 10px 20px; !* Add padding to the form itself *!*/
+/*}*/
+
+/*.form-group {*/
+/*    margin-bottom: 15px;*/
+/*    display: flex;*/
+/*    grid-template-columns: auto 1fr; !* Align label and input *!*/
+/*    align-items: center;*/
+/*    gap: 10px; !* Gap between label and input *!*/
+/*    width: 100%; !* Ensure form-group takes full width *!*/
+/*}*/
+
+/*.form-group label {*/
+/*    display: block;*/
+/*    font-weight: 600;*/
+/*    color: #333;*/
+/*    white-space: nowrap; !* Prevent label from wrapping *!*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*}*/
+
+/*.profile-image-upload-group {*/
+/*    grid-template-columns: 1fr; !* Full width for image upload *!*/
+/*    text-align: center;*/
+/*}*/
+
+/*.profile-image-preview-container {*/
+/*    position: relative;*/
+/*    width: 100px;*/
+/*    height: 100px;*/
+/*    margin: 0 auto;*/
+/*    border-radius: 50%; !* Ensure overlay matches image shape *!*/
+/*    overflow: visible; !* Allow icon to be outside the image bounds *!*/
+/*}*/
+
+/*.current-profile-image {*/
+/*    width: 100%;*/
+/*    height: 100%;*/
+/*    border-radius: 50%;*/
+/*    object-fit: cover;*/
+/*    border: 2px solid #eee;*/
+/*    box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
+/*}*/
+
+/*.upload-icon-label {*/
+/*    position: absolute;*/
+/*    bottom: -5px; !* Adjusted position *!*/
+/*    right: -5px;  !* Adjusted position *!*/
+/*    background-color: transparent; !* Make background transparent *!*/
+/*    color: #717171; !* Change color on hover *!*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*    align-items: center;*/
+/*    font-size: 1rem; !* Icon size *!*/
+/*    cursor: pointer;*/
+/*}*/
+
+/*.upload-icon-label:hover {*/
+/*    color: #8a8a8a; !* Subtle color for the icon *!*/
+/*}*/
+
+/*input[type="file"] {*/
+/*    border: 1px solid #ccc;*/
+/*    padding: 8px;*/
+/*    border-radius: 5px;*/
+/*    width: 100%;*/
+/*    box-sizing: border-box;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*}*/
+
+/*.world-name-input-container {*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    border: 1px solid #ccc;*/
+/*    border-radius: 5px;*/
+/*    overflow: hidden;*/
+/*    flex-grow: 1; !* Allow it to take available space *!*/
+/*    width: 100%; !* Explicitly set width to 100% *!*/
+/*}*/
+
+/*.at-prefix {*/
+/*    padding: 8px 5px 8px 10px;*/
+/*    background-color: #f0f0f0;*/
+/*    border-right: 1px solid #ccc;*/
+/*    color: #555;*/
+/*    font-weight: bold;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*}*/
+
+/*#worldNameInput {*/
+/*    flex-grow: 1;*/
+/*    border: none;*/
+/*    padding: 8px 10px;*/
+/*    outline: none;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*    width: 100%; !* Explicitly set width to 100% *!*/
+/*}*/
+
+/*.save-button {*/
+/*    background-color: #468de4;*/
+/*    color: #ffffff;*/
+/*    border: none;*/
+/*    padding: 8px 15px;*/
+/*    cursor: pointer;*/
+/*    transition: background-color 0.2s ease;*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*}*/
+
+/*.save-button:hover {*/
+/*    background-color: #3083e4;*/
+/*}*/
+/*.world-name-group {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    gap:0.5rem;*/
+/*}*/
+/*.rejected {*/
+/*    font-size: 0.9rem;*/
+/*    color: #e74c3c;*/
+/*}*/
+
+/*.public-status-group .System-CheckBox {*/
+/*    display: flex;*/
+/*    align-items: center;*/
+/*    gap: 10px;*/
+/*    padding: 8px 10px;*/
+/*    border: 1px solid #ccc;*/
+/*    border-radius: 5px;*/
+/*    background-color: #f9f9f9;*/
+/*    flex-grow: 1; !* Allow it to take available space *!*/
+/*    font-size: 1rem; !* Adjusted font size *!*/
+/*}*/
+
+/*.public-status-group .System-CheckBox input[type="checkbox"] {*/
+/*    margin-right: 5px;*/
+/*}*/

package/src/components/dialog/example/imageEditorDialog.html

@@ -0,0 +1,48 @@
+<!--<dialog id="profileDialog" dr-on-rendered-init="@this@.onInitDialog($element)" dr-event-close="@this@.destroyDialog()"-->
+<!--        dr-event-toggle="@this@.open = $element.open">-->
+<!--    <div class="dialog-content profile-dialog-content">-->
+<!--        <button class="close-button" id="closeProfileDialogBtn" dr-event-click="@this@.closeDialog()">×</button>-->
+<!--        <div class="header">-->
+<!--            <i class="fas fa-user-edit"></i>-->
+<!--            Update Profile-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <hr/>-->
+<!--    <div id="profile-tab-form" class="profile-tabs" >-->
+<!--        <div class="form-group profile-image-upload-group">-->
+<!--            <div class="profile-image-preview-container">-->
+<!--                <img dr-if="@this@.my?.world.profile" class="current-profile-image" dr-attr="{src:@this@.my?.world.profile}" alt="Current Profile Image"/>-->
+<!--                <label for="profileImageUpload" class="upload-icon-label"><i class="fas fa-camera"></i></label>-->
+<!--                <input type="file" id="profileImageUpload" accept="image/*" dr-event-change="@this@.onProfileImageChange($event)" hidden>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <form class="form-group world-name-group" dr-on-init="@this@.onInitFrom($element)"-->
+<!--              dr-event-submit="@this@.formSubmit($element, $event)">-->
+<!--            <div class="world-name-input-container">-->
+<!--                <span class="at-prefix">@</span>-->
+<!--                <input type="text" id="worldNameInput" name="name" dr-value="@this@.my?.world.name">-->
+<!--                <button type="submit" class="save-button" >Save</button>-->
+<!--            </div>-->
+<!--            <System:PromiseSwitch data="${@this@.setWorldNamePromise}$" >-->
+<!--&lt;!&ndash;                <System:PromiseSwitch.Pending defaultView>&ndash;&gt;-->
+<!--&lt;!&ndash;                    <System:Skeleton radius="10px" width="50%"></System:Skeleton>&ndash;&gt;-->
+<!--&lt;!&ndash;                    <System:Skeleton radius="10px" width="80%"></System:Skeleton>&ndash;&gt;-->
+<!--&lt;!&ndash;&lt;!&ndash;                </System:PromiseSwitch.Pending>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;                <System:PromiseSwitch.Fulfilled>&ndash;&gt;-->
+<!--&lt;!&ndash;                    <h2 class="profile-name" id="dialogProfileName">${@nearThis@.data?.name}$</h2>&ndash;&gt;-->
+<!--&lt;!&ndash;                    <p class="profile-summary" id="dialogProfileBio">${@nearThis@.data?.summary}$</p>&ndash;&gt;-->
+<!--&lt;!&ndash;                </System:PromiseSwitch.Fulfilled>&ndash;&gt;-->
+<!--                <System:PromiseSwitch.Rejected>-->
+<!--                    <div class="rejected">${@nearThis@.data.message}$ 😰</div>-->
+<!--                </System:PromiseSwitch.Rejected>-->
+<!--            </System:PromiseSwitch>-->
+<!--        </form>-->
+<!--&lt;!&ndash;        <div class="form-group public-status-group">&ndash;&gt;-->
+<!--&lt;!&ndash;            <label>Public World</label>&ndash;&gt;-->
+<!--&lt;!&ndash;            <System:CheckBox name="isPublic" checked="${@this@.my?.world.isPublic}" change="${(checked)=> @this@.onPublicStatusChange(checked)}">&ndash;&gt;-->
+<!--&lt;!&ndash;                <System:CheckBox.Checked>Public</System:CheckBox.Checked>&ndash;&gt;-->
+<!--&lt;!&ndash;                <System:CheckBox.UnChecked>Private</System:CheckBox.UnChecked>&ndash;&gt;-->
+<!--&lt;!&ndash;            </System:CheckBox>&ndash;&gt;-->
+<!--&lt;!&ndash;        </div>&ndash;&gt;-->
+<!--    </div>-->
+<!--</dialog>-->