@universal-material/web 3.6.9 → 3.6.11

package/dialog/dialog.d.ts

@@ -21,6 +21,8 @@ export declare class UmDialog extends LitElement {
      * _Note:_ Readonly
      */
     hasIcon: boolean;
+    get scrollContainer(): HTMLElement;
+    set scrollContainer(scrollContainer: HTMLElement);
     dialog: HTMLDialogElement;
     scrim: HTMLElement;
     content: HTMLElement;

package/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,2BAA2B,CAAC;AAKnC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IAK9C,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAWrB;IAED,IAAI,WAAW,WAEd;IAED;;;;OAIG;IACoE,WAAW,UAAS;IAE3F;;;;OAIG;IACgE,OAAO,UAAS;IAElE,MAAM,EAAG,iBAAiB,CAAC;IAC3B,KAAK,EAAG,WAAW,CAAC;IAClB,OAAO,EAAG,WAAW,CAAC;IACpB,SAAS,EAAG,WAAW,CAAC;IAG7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiB;IAGnD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAE/C,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAIrD,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAI5C,MAAM,IAAI,kBAAkB;IA+B5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAUjB,oBAAoB;IAoEvB,IAAI;IAWJ,KAAK,CAAC,WAAW,GAAE,MAAyB;CA6CnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,2BAA2B,CAAC;AAKnC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IAK9C,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAWrB;IAED,IAAI,WAAW,WAEd;IAED;;;;OAIG;IACoE,WAAW,UAAS;IAE3F;;;;OAIG;IACgE,OAAO,UAAS;IAInF,IACI,eAAe,IAAI,WAAW,CAEjC;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,WAAW,EAM/C;IAEgB,MAAM,EAAG,iBAAiB,CAAC;IAC3B,KAAK,EAAG,WAAW,CAAC;IAClB,OAAO,EAAG,WAAW,CAAC;IACpB,SAAS,EAAG,WAAW,CAAC;IAG7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiB;IAGnD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAE/C,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAIrD,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAI5C,MAAM,IAAI,kBAAkB;IA+B5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAUjB,oBAAoB;IAoEvB,IAAI;IAWJ,KAAK,CAAC,WAAW,GAAE,MAAyB;CA6CnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/dialog/dialog.js

@@ -24,6 +24,7 @@ let UmDialog = class UmDialog extends LitElement {
          * _Note:_ Readonly
          */
         this.hasIcon = false;
+        this.#scrollContainer = null;
         this.#handleCancel = (e) => {
             e.preventDefault();
             const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
@@ -52,6 +53,16 @@ let UmDialog = class UmDialog extends LitElement {
     get returnValue() {
         return this.dialog.returnValue;
     }
+    #scrollContainer;
+    get scrollContainer() {
+        return this.#scrollContainer ?? this.content;
+    }
+    set scrollContainer(scrollContainer) {
+        this.#scrollContainer?.removeEventListener('scroll', this.#handleScroll);
+        this.#scrollContainer = scrollContainer;
+        scrollContainer.addEventListener('scroll', this.#handleScroll.bind(this));
+        this.#setScrollDividers();
+    }
     static message(message) {
         return MessageDialogBuilder.create(message);
     }
@@ -129,19 +140,19 @@ let UmDialog = class UmDialog extends LitElement {
         this.#setBottomScrollDivider();
     }
     #setBottomScrollDivider() {
-        const scrollBottom = this.content.scrollTop + this.content.offsetHeight;
-        if (scrollBottom >= this.content.scrollHeight) {
-            this.content.classList.remove(bottomDividerClass);
+        const scrollBottom = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;
+        if (scrollBottom >= this.scrollContainer.scrollHeight) {
+            this.content?.classList.remove(bottomDividerClass);
             return;
         }
-        this.content.classList.add(bottomDividerClass);
+        this.content?.classList.add(bottomDividerClass);
     }
     #setTopScrollDivider() {
-        if (this.content.scrollTop) {
-            this.content.classList.add(topDividerClass);
+        if (this.scrollContainer.scrollTop) {
+            this.content?.classList.add(topDividerClass);
             return;
         }
-        this.content.classList.remove(topDividerClass);
+        this.content?.classList.remove(topDividerClass);
     }
     async show() {
         this.#open = true;
@@ -191,6 +202,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'has-icon', reflect: true })
 ], UmDialog.prototype, "hasIcon", void 0);
+__decorate([
+    property()
+], UmDialog.prototype, "scrollContainer", null);
 __decorate([
     query('dialog')
 ], UmDialog.prototype, "dialog", void 0);

package/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { styles } from './dialog.styles.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class UmDialog extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #open = false;\n  #contentResizeObserver!: ResizeObserver | null;\n\n  @property({ type: Boolean })\n  get open(): boolean {\n    return this.#open;\n  }\n\n  set open(open: boolean) {\n    if (this.#open === open) {\n      return;\n    }\n\n    if (!open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  }\n\n  get returnValue() {\n    return this.dialog.returnValue;\n  }\n\n  /**\n   * Whether dialog has headline or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-headline', reflect: true }) hasHeadline = false;\n\n  /**\n   * Whether dialog has icon\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n  @query('dialog') dialog!: HTMLDialogElement;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('.content') content!: HTMLElement;\n  @query('.container') container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'headline', flatten: true })\n  private readonly assignedHeadlines!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  static message(message: string): MessageDialogBuilder {\n    return MessageDialogBuilder.create(message);\n  }\n\n  static confirm(message: string): ConfirmDialogBuilder {\n    return ConfirmDialogBuilder.create(message);\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <dialog>\n        <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n        <div class=\"container\" part=\"container\">\n          <u-elevation></u-elevation>\n          <div class=\"icon\" part=\"icon\">\n            <slot\n              name=\"icon\"\n              @slotchange=${this.#handleIconSlotChange}>\n            </slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot\n              name=\"headline\"\n              @slotchange=${this.#handleHeadlineSlotChange}>\n            </slot>\n          </div>\n          <div\n            class=\"content\"\n            part=\"content\"\n            @scroll=${this.#handleScroll}>\n            <slot></slot>\n          </div>\n          <div class=\"actions\" part=\"actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </dialog>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.dialog.addEventListener('cancel', this.#handleCancel);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('submit', this.#handleSubmit);\n\n    setTimeout(() => {\n      this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());\n      this.#contentResizeObserver.observe(this.content);\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this.#handleSubmit);\n\n    this.#contentResizeObserver!.disconnect();\n    this.#contentResizeObserver = null;\n  }\n\n  #handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  readonly #handleCancel = (e: Event) => {\n    e.preventDefault();\n\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  };\n\n  #handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  #handleHeadlineSlotChange() {\n    this.hasHeadline = this.assignedHeadlines.length > 0;\n  }\n\n  #handleScroll() {\n    this.#setScrollDividers();\n  }\n\n  #setScrollDividers() {\n    this.#setTopScrollDivider();\n    this.#setBottomScrollDivider();\n  }\n\n  #setBottomScrollDivider() {\n    const scrollBottom = this.content.scrollTop + this.content.offsetHeight;\n\n    if (scrollBottom >= this.content.scrollHeight) {\n      this.content.classList.remove(bottomDividerClass);\n      return;\n    }\n\n    this.content.classList.add(bottomDividerClass);\n  }\n\n  #setTopScrollDivider() {\n    if (this.content.scrollTop) {\n      this.content.classList.add(topDividerClass);\n      return;\n    }\n\n    this.content.classList.remove(topDividerClass);\n  }\n\n  async show() {\n    this.#open = true;\n    this.setAttribute('open', '');\n\n    await this.updateComplete;\n    this.dialog.showModal();\n    const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n    autoFocusElement?.focus();\n    this.content.scrollTop = 0;\n  }\n\n  async close(returnValue: string = this.returnValue) {\n    this.#open = false;\n    this.removeAttribute('open');\n\n    await this.updateComplete;\n\n    if (!this.dialog.open || this.open) {\n      return;\n    }\n\n    const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n    if (preventClose) {\n      this.#open = true;\n      return;\n    }\n\n    this.open = false;\n\n    const closed = new Promise<void>(resolve =>\n      this.container.addEventListener(\n        'animationend',\n        () => {\n          resolve();\n          this.classList.remove('closing');\n          this.dialog.close(returnValue);\n          this.dispatchEvent(new Event('closed'));\n        },\n        { capture: true, once: true },\n      )\n    );\n\n    this.classList.add('closing');\n    await closed;\n  }\n\n  #handleScrimClick() {\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-dialog': UmDialog;\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { styles } from './dialog.styles.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class UmDialog extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #open = false;\n  #contentResizeObserver!: ResizeObserver | null;\n\n  @property({ type: Boolean })\n  get open(): boolean {\n    return this.#open;\n  }\n\n  set open(open: boolean) {\n    if (this.#open === open) {\n      return;\n    }\n\n    if (!open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  }\n\n  get returnValue() {\n    return this.dialog.returnValue;\n  }\n\n  /**\n   * Whether dialog has headline or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-headline', reflect: true }) hasHeadline = false;\n\n  /**\n   * Whether dialog has icon\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n  #scrollContainer: HTMLElement | null = null;\n\n  @property()\n  get scrollContainer(): HTMLElement {\n    return this.#scrollContainer ?? this.content;\n  }\n\n  set scrollContainer(scrollContainer: HTMLElement) {\n    this.#scrollContainer?.removeEventListener('scroll', this.#handleScroll);\n\n    this.#scrollContainer = scrollContainer;\n    scrollContainer.addEventListener('scroll', this.#handleScroll.bind(this));\n    this.#setScrollDividers();\n  }\n\n  @query('dialog') dialog!: HTMLDialogElement;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('.content') content!: HTMLElement;\n  @query('.container') container!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'headline', flatten: true })\n  private readonly assignedHeadlines!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  static message(message: string): MessageDialogBuilder {\n    return MessageDialogBuilder.create(message);\n  }\n\n  static confirm(message: string): ConfirmDialogBuilder {\n    return ConfirmDialogBuilder.create(message);\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <dialog>\n        <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n        <div class=\"container\" part=\"container\">\n          <u-elevation></u-elevation>\n          <div class=\"icon\" part=\"icon\">\n            <slot\n              name=\"icon\"\n              @slotchange=${this.#handleIconSlotChange}>\n            </slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot\n              name=\"headline\"\n              @slotchange=${this.#handleHeadlineSlotChange}>\n            </slot>\n          </div>\n          <div\n            class=\"content\"\n            part=\"content\"\n            @scroll=${this.#handleScroll}>\n            <slot></slot>\n          </div>\n          <div class=\"actions\" part=\"actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </dialog>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.dialog.addEventListener('cancel', this.#handleCancel);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('submit', this.#handleSubmit);\n\n    setTimeout(() => {\n      this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());\n      this.#contentResizeObserver.observe(this.content);\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this.#handleSubmit);\n\n    this.#contentResizeObserver!.disconnect();\n    this.#contentResizeObserver = null;\n  }\n\n  #handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  readonly #handleCancel = (e: Event) => {\n    e.preventDefault();\n\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  };\n\n  #handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  #handleHeadlineSlotChange() {\n    this.hasHeadline = this.assignedHeadlines.length > 0;\n  }\n\n  #handleScroll() {\n    this.#setScrollDividers();\n  }\n\n  #setScrollDividers() {\n    this.#setTopScrollDivider();\n    this.#setBottomScrollDivider();\n  }\n\n  #setBottomScrollDivider() {\n    const scrollBottom = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;\n\n    if (scrollBottom >= this.scrollContainer.scrollHeight) {\n      this.content?.classList.remove(bottomDividerClass);\n      return;\n    }\n\n    this.content?.classList.add(bottomDividerClass);\n  }\n\n  #setTopScrollDivider() {\n    if (this.scrollContainer.scrollTop) {\n      this.content?.classList.add(topDividerClass);\n      return;\n    }\n\n    this.content?.classList.remove(topDividerClass);\n  }\n\n  async show() {\n    this.#open = true;\n    this.setAttribute('open', '');\n\n    await this.updateComplete;\n    this.dialog.showModal();\n    const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n    autoFocusElement?.focus();\n    this.content.scrollTop = 0;\n  }\n\n  async close(returnValue: string = this.returnValue) {\n    this.#open = false;\n    this.removeAttribute('open');\n\n    await this.updateComplete;\n\n    if (!this.dialog.open || this.open) {\n      return;\n    }\n\n    const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n    if (preventClose) {\n      this.#open = true;\n      return;\n    }\n\n    this.open = false;\n\n    const closed = new Promise<void>(resolve =>\n      this.container.addEventListener(\n        'animationend',\n        () => {\n          resolve();\n          this.classList.remove('closing');\n          this.dialog.close(returnValue);\n          this.dispatchEvent(new Event('closed'));\n        },\n        { capture: true, once: true },\n      )\n    );\n\n    this.classList.add('closing');\n    await closed;\n  }\n\n  #handleScrimClick() {\n    const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));\n\n    if (cancelPrevented) {\n      return;\n    }\n\n    this.close();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-dialog': UmDialog;\n  }\n}\n"]}

package/grid/custom-swap.d.ts

@@ -0,0 +1,15 @@
+interface SwapOptions {
+    swapTargetClass: string;
+    onSwap: (evt: any) => void;
+}
+export declare class CustomSwap {
+    #private;
+    static pluginName: string;
+    options: SwapOptions;
+    dragOver(evt: any): void;
+    dragOverValid(evt: any): void;
+    drop(_evt: any): void;
+    nulling(): void;
+}
+export {};
+//# sourceMappingURL=custom-swap.d.ts.map

package/grid/custom-swap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-swap.d.ts","sourceRoot":"","sources":["../../src/grid/custom-swap.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC5B;AAuBD,qBAAa,UAAU;;IACrB,MAAM,CAAC,UAAU,SAAgB;IAKjC,OAAO,EAAG,WAAW,CAAC;IAItB,QAAQ,CAAC,GAAG,EAAE,GAAG;IAcjB,aAAa,CAAC,GAAG,EAAE,GAAG;IActB,IAAI,CAAC,IAAI,EAAE,GAAG;IAad,OAAO;CAIR"}

package/grid/custom-swap.js

@@ -0,0 +1,62 @@
+// function swapNodes(n1, n2) {
+//   const p1 = n1.parentNode;
+//   const p2 = n2.parentNode;
+//   let i1; let
+//     i2;
+//
+//   if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) {
+//     return;
+//   }
+//
+//   i1 = Sortable.utils.index(n1);
+//   i2 = Sortable.utils.index(n2);
+//
+//   if (p1.isEqualNode(p2) && i1 < i2) {
+//     i2++;
+//   }
+//
+//   p1.insertBefore(n2, p1.children[i1]);
+//   p2.insertBefore(n1, p2.children[i2]);
+// }
+export class CustomSwap {
+    static { this.pluginName = 'customSwap'; } // nome do plugin
+    #lastValidTarget = null;
+    dragOver(evt) {
+        if (this.#lastValidTarget === evt.target) {
+            return;
+        }
+        this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);
+        this.#lastValidTarget = null;
+        if (evt.target === evt.ghostEl || evt.target === evt.activeSortable.el) {
+            evt.cancel();
+        }
+    }
+    dragOverValid(evt) {
+        if (evt.onMove(evt.target) !== false) {
+            this.#lastValidTarget = evt.target;
+            this.#lastValidTarget.classList.add(this.options.swapTargetClass);
+        }
+        else {
+            this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);
+            this.#lastValidTarget = null;
+        }
+        evt.cancel();
+    }
+    // Hook chamado quando o item é solto
+    drop(_evt) {
+        if (!this.#lastValidTarget) {
+            return;
+        }
+        // if (this.options.onSwap) {
+        //   this.options.onSwap({
+        //     oldIndex: Sortable.utils.index(evt.dragEl),
+        //     newIndex: Sortable.utils.index(this.#lastValidTarget),
+        //   });
+        // }
+    }
+    nulling() {
+        this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);
+        this.#lastValidTarget = null;
+    }
+}
+//# sourceMappingURL=custom-swap.js.map

package/grid/custom-swap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-swap.js","sourceRoot":"","sources":["../../src/grid/custom-swap.ts"],"names":[],"mappings":"AAKA,+BAA+B;AAC/B,8BAA8B;AAC9B,8BAA8B;AAC9B,gBAAgB;AAChB,UAAU;AACV,EAAE;AACF,kEAAkE;AAClE,cAAc;AACd,MAAM;AACN,EAAE;AACF,mCAAmC;AACnC,mCAAmC;AACnC,EAAE;AACF,yCAAyC;AACzC,YAAY;AACZ,MAAM;AACN,EAAE;AACF,0CAA0C;AAC1C,0CAA0C;AAC1C,IAAI;AAEJ,MAAM,OAAO,UAAU;aACd,eAAU,GAAG,YAAY,CAAC,GAAC,iBAAiB;IAOnD,gBAAgB,GAAuB,IAAI,CAAC;IAE5C,QAAQ,CAAC,GAAQ;QAEf,IAAI,IAAI,CAAC,gBAAgB,KAAK,GAAG,CAAC,MAAM,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACtE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE,CAAC;YACvE,GAAG,CAAC,MAAM,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,aAAa,CAAC,GAAQ;QAEpB,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC;YACrC,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC;YACnC,IAAI,CAAC,gBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACrE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YACtE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC/B,CAAC;QAED,GAAG,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAED,qCAAqC;IACrC,IAAI,CAAC,IAAS;QACZ,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,6BAA6B;QAC7B,0BAA0B;QAC1B,kDAAkD;QAClD,6DAA6D;QAC7D,QAAQ;QACR,IAAI;IACN,CAAC;IAED,OAAO;QACL,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACtE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC","sourcesContent":["interface SwapOptions {\n  swapTargetClass: string;\n  onSwap: (evt: any) => void;\n}\n\n// function swapNodes(n1, n2) {\n//   const p1 = n1.parentNode;\n//   const p2 = n2.parentNode;\n//   let i1; let\n//     i2;\n//\n//   if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) {\n//     return;\n//   }\n//\n//   i1 = Sortable.utils.index(n1);\n//   i2 = Sortable.utils.index(n2);\n//\n//   if (p1.isEqualNode(p2) && i1 < i2) {\n//     i2++;\n//   }\n//\n//   p1.insertBefore(n2, p1.children[i1]);\n//   p2.insertBefore(n1, p2.children[i2]);\n// }\n\nexport class CustomSwap {\n  static pluginName = 'customSwap'; // nome do plugin\n  // defaults: SwapOptions = {\n  //   swapTargetClass: 'swap-target',\n  // };\n\n  options!: SwapOptions;\n\n  #lastValidTarget: HTMLElement | null = null;\n\n  dragOver(evt: any) {\n\n    if (this.#lastValidTarget === evt.target) {\n      return;\n    }\n\n    this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);\n    this.#lastValidTarget = null;\n\n    if (evt.target === evt.ghostEl || evt.target === evt.activeSortable.el) {\n      evt.cancel();\n    }\n  }\n\n  dragOverValid(evt: any) {\n\n    if (evt.onMove(evt.target) !== false) {\n      this.#lastValidTarget = evt.target;\n      this.#lastValidTarget!.classList.add(this.options.swapTargetClass);\n    } else {\n      this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);\n      this.#lastValidTarget = null;\n    }\n\n    evt.cancel();\n  }\n\n  // Hook chamado quando o item é solto\n  drop(_evt: any) {\n    if (!this.#lastValidTarget) {\n      return;\n    }\n\n    // if (this.options.onSwap) {\n    //   this.options.onSwap({\n    //     oldIndex: Sortable.utils.index(evt.dragEl),\n    //     newIndex: Sortable.utils.index(this.#lastValidTarget),\n    //   });\n    // }\n  }\n\n  nulling() {\n    this.#lastValidTarget?.classList.remove(this.options.swapTargetClass);\n    this.#lastValidTarget = null;\n  }\n}\n"]}

package/grid/grid-column.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class UmDataGridColumn extends LitElement {
+    path: string;
+    groupIndex: number | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-grid-column': UmDataGridColumn;
+    }
+}
+//# sourceMappingURL=grid-column.d.ts.map

package/grid/grid-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column.d.ts","sourceRoot":"","sources":["../../src/grid/grid-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBACa,gBAAiB,SAAQ,UAAU;IAClC,IAAI,SAAM;IACgC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;CAGxF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,gBAAgB,CAAC;KACnC;CACF"}

package/grid/grid-column.js

@@ -0,0 +1,22 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let UmDataGridColumn = class UmDataGridColumn extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.path = '';
+        this.groupIndex = null;
+        // _index: number | null;
+    }
+};
+__decorate([
+    property()
+], UmDataGridColumn.prototype, "path", void 0);
+__decorate([
+    property({ type: Number, attribute: 'group-index' })
+], UmDataGridColumn.prototype, "groupIndex", void 0);
+UmDataGridColumn = __decorate([
+    customElement('u-grid-column')
+], UmDataGridColumn);
+export { UmDataGridColumn };
+//# sourceMappingURL=grid-column.js.map

package/grid/grid-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column.js","sourceRoot":"","sources":["../../src/grid/grid-column.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACO,SAAI,GAAG,EAAE,CAAC;QACgC,eAAU,GAAkB,IAAI,CAAC;QAEvF,yBAAyB;IAC3B,CAAC;CAAA,CAAA;AAJa;IAAX,QAAQ,EAAE;8CAAW;AACgC;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;oDAAkC;AAF5E,gBAAgB;IAD5B,aAAa,CAAC,eAAe,CAAC;GAClB,gBAAgB,CAK5B","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('u-grid-column')\nexport class UmDataGridColumn extends LitElement {\n  @property() path = '';\n  @property({ type: Number, attribute: 'group-index' }) groupIndex: number | null = null;\n\n  // _index: number | null;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-grid-column': UmDataGridColumn;\n  }\n}\n"]}

package/grid/grid.d.ts

@@ -0,0 +1,23 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { LitElement } from 'lit';
+import { UmDataGridColumn } from './grid-column';
+import './grid-column';
+export declare class UmDataTable extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    get items(): any[];
+    set items(items: any[]);
+    protected _columns: UmDataGridColumn[];
+    protected _groupColumns: UmDataGridColumn[];
+    protected _regularColumns: UmDataGridColumn[];
+    private readonly headerColumnsRow;
+    private readonly headerGroupRow;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-grid': UmDataTable;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

package/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAA4B,UAAU,EAAW,MAAM,KAAK,CAAC;AASpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,eAAe,CAAC;AAIvB,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;IAK9C,IACI,KAAK,IAAI,GAAG,EAAE,CAEjB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAGrB;IAID,SAAS,CAAC,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IACnC,SAAS,CAAC,aAAa,EAAE,gBAAgB,EAAE,CAAM;IACjD,SAAS,CAAC,eAAe,EAAE,gBAAgB,EAAE,CAAM;IACxB,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAClD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAe;cAE7D,YAAY,CAAC,kBAAkB,EAAE,cAAc;IA6CzD,MAAM;CAsKhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,WAAW,CAAC;KACvB;CACF"}

package/grid/grid.js

@@ -0,0 +1,231 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import Sortable from 'sortablejs';
+import { styles as baseStyles } from '../shared/base.styles';
+import { CustomSwap } from './custom-swap.js';
+import { styles } from './grid.styles.js';
+import './grid-column';
+Sortable.mount(CustomSwap);
+let UmDataTable = class UmDataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.#currentGroupingValuesMap = [];
+        this.#items = [];
+        this.#sortedItems = [];
+        this._columns = [];
+        this._groupColumns = [];
+        this._regularColumns = [];
+        // #setRegularColumnsOrder() {
+        //   for (const i = 0; i < this._regularColumns.length; i++) {
+        //     const column = this._regularColumns[i];
+        //     column._index = i;
+        //   }
+        // }
+    }
+    static { this.styles = [baseStyles, styles]; }
+    #currentGroupingValuesMap;
+    #items;
+    get items() {
+        return this.#items;
+    }
+    set items(items) {
+        this.#items = items;
+        this.#updateSorting();
+    }
+    #sortedItems;
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        console.log(this.headerGroupRow);
+        new Sortable(this.headerGroupRow, {
+            group: 'columns',
+            // customSwap: true,
+            // revertOnSpill: true,
+            // swap: true,
+            // swapClass: 'column-drop-highlight',
+            draggable: 'u-chip',
+            forceFallback: true,
+            fallbackTolerance: 5,
+        });
+        new Sortable(this.headerColumnsRow, {
+            group: 'columns',
+            // customSwap: true,
+            // revertOnSpill: true,
+            // swap: true,
+            // swapClass: 'column-drop-highlight',
+            draggable: '.content-cell',
+            forceFallback: true,
+            fallbackTolerance: 5,
+            // onSwap: (evt: any) => {
+            //
+            //   if (evt.oldIndex === evt.newIndex) {
+            //     return;
+            //   }
+            //
+            //   let oldIndex = evt.oldIndex;
+            //   let newIndex = evt.newIndex;
+            //
+            //   if (this._groupColumns.length) {
+            //     oldIndex--;
+            //     newIndex--;
+            //   }
+            //
+            //   const column = this._regularColumns.splice(oldIndex, 1)[0];
+            //   this._regularColumns.splice(newIndex, 0, column);
+            //   this.requestUpdate();
+            // },
+        });
+    }
+    render() {
+        return html `
+      <div class="container">
+        <table class="u-table">
+          <thead>
+            ${this.#renderHeader()}
+            <tr id="header-columns-row">
+              ${this._groupColumns.length > 0
+            ? html `<th class="group-column-header" colspan="${this._groupColumns.length}"></th>`
+            : nothing}
+              ${map(this._regularColumns, column => html `<th class="content-cell">${column.textContent}</th>`)}
+            </tr>
+          </thead>
+          <tbody>${this.#renderBody()}</tbody>
+        </table>
+      </div>
+      <slot hidden @slotchange=${this.#handleSlotChange}></slot>
+    `;
+    }
+    #renderBody() {
+        const columnCount = this._columns.length;
+        if (!this.items?.length) {
+            return html `
+        <tr>
+          <td part="cell no-data" colspan="${columnCount}">No data</td>
+        </tr>
+      `;
+        }
+        // const columnsSortedByGroupIndex = this._columns.sort((a, b) => (a.groupIndex ?? 999999) - (b.groupIndex ?? 999999));
+        // const grouping = Object.entries(Object.groupBy(this._columns, ({ groupIndex }) => groupIndex)) as unknown as [string, UmDataGridColumn[]];
+        const groupingCount = this._groupColumns.length;
+        return html `
+      ${map(this.#sortedItems, item => this.#renderItem(item, groupingCount))}
+    `;
+    }
+    #renderItem(item, groupingCount) {
+        return html `
+      ${this.#renderGroupRows(item)}
+      <tr>
+        ${this.#renderGroupingSpanColumn(groupingCount)}
+        ${map(this._regularColumns, column => html `
+            <td>${this.#getValueByPath(item, column.path)}</td>`)}
+      </tr>
+    `;
+    }
+    #renderGroupingSpanColumn(groupingCount) {
+        return groupingCount
+            ? html `<td colspan="${groupingCount}"></td>`
+            : nothing;
+    }
+    #renderGroupRows(item) {
+        return html `
+      ${map(this._groupColumns, (column, index) => {
+            const value = this.#getValueByPath(item, column.path);
+            if (this.#currentGroupingValuesMap[index] === value) {
+                return;
+            }
+            this.#currentGroupingValuesMap.splice(index, Infinity);
+            this.#currentGroupingValuesMap[index] = value;
+            const emptyColumns = new Array(index);
+            return html `
+          <tr>
+            ${map(emptyColumns, () => html `<td></td>`)}
+            <td class="group-column-toggle">
+              <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+                <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
+              </svg>
+            </td>
+            <td class="grouping-row" colspan="${this._regularColumns.length + (this._groupColumns.length + index + 1)}">
+              ${column.textContent}: ${value}
+            </td>
+          </tr>
+        `;
+        })}
+    `;
+    }
+    #getValueByPath(item, path) {
+        return path.split('.').reduce((acc, key) => acc?.[key], item) ?? '';
+    }
+    #handleSlotChange(e) {
+        const slot = e.target;
+        const assigned = slot.assignedElements({ flatten: true });
+        this._columns = assigned.filter(el => el.tagName === 'U-GRID-COLUMN');
+        this._groupColumns = this._columns
+            .filter(c => !!c.groupIndex || c.groupIndex === 0)
+            .sort((a, b) => a.groupIndex - b.groupIndex);
+        this._regularColumns = this._columns.filter(c => !this._groupColumns.includes(c));
+        this.#updateSorting();
+    }
+    #updateSorting() {
+        if (!this.items?.length) {
+            this.#sortedItems = [];
+            return;
+        }
+        if (!this._groupColumns.length) {
+            this.#sortedItems = this.items;
+        }
+        this.#sortedItems = this.items.sort((a, b) => {
+            for (const groupColumn of this._groupColumns) {
+                const aValue = this.#getValueByPath(a, groupColumn.path) ?? '';
+                const bValue = this.#getValueByPath(b, groupColumn.path) ?? '';
+                const textComparison = aValue.toString().localeCompare(bValue.toString());
+                if (textComparison !== 0) {
+                    return textComparison;
+                }
+            }
+            return 0;
+        });
+    }
+    #renderHeader() {
+        // if (!this._groupColumns.length) {
+        //   return nothing;
+        // }
+        const headerStyles = {
+            display: this._groupColumns.length
+                ? ''
+                : 'none',
+        };
+        return html `
+      <tr style="${styleMap(headerStyles)}">
+        <th colspan="${this._columns.length}">
+          <div class="header">
+            <u-chip-set id="header-group-row">
+              ${map(this._groupColumns, column => html `<u-chip>${column.textContent}</u-chip>`)}
+            </u-chip-set>
+          </div>
+        </th>
+      </tr>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], UmDataTable.prototype, "items", null);
+__decorate([
+    state()
+], UmDataTable.prototype, "_groupColumns", void 0);
+__decorate([
+    state()
+], UmDataTable.prototype, "_regularColumns", void 0);
+__decorate([
+    query('#header-columns-row', true)
+], UmDataTable.prototype, "headerColumnsRow", void 0);
+__decorate([
+    query('#header-group-row', true)
+], UmDataTable.prototype, "headerGroupRow", void 0);
+UmDataTable = __decorate([
+    customElement('u-grid')
+], UmDataTable);
+export { UmDataTable };
+//# sourceMappingURL=grid.js.map

package/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/grid/grid.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,eAAe,CAAC;AAEvB,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;AAGpB,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAGI,8BAAyB,GAAU,EAAE,CAAC;QAC/C,WAAM,GAAU,EAAE,CAAC;QAYnB,iBAAY,GAAU,EAAE,CAAC;QAEf,aAAQ,GAAuB,EAAE,CAAC;QACzB,kBAAa,GAAuB,EAAE,CAAC;QACvC,oBAAe,GAAuB,EAAE,CAAC;QAiN5D,8BAA8B;QAC9B,8DAA8D;QAC9D,8CAA8C;QAC9C,yBAAyB;QACzB,MAAM;QACN,IAAI;IACN,CAAC;aA1OiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAErC,yBAAyB,CAAa;IAC/C,MAAM,CAAa;IAGnB,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAY;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAa;IAQN,YAAY,CAAC,kBAAkC;QAChE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QAEvC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACjC,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE;YAChC,KAAK,EAAE,SAAS;YAChB,oBAAoB;YACpB,uBAAuB;YACvB,cAAc;YACd,sCAAsC;YACtC,SAAS,EAAE,QAAQ;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,CAAC;SACrB,CAAC,CAAC;QAEH,IAAI,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAClC,KAAK,EAAE,SAAS;YAChB,oBAAoB;YACpB,uBAAuB;YACvB,cAAc;YACd,sCAAsC;YACtC,SAAS,EAAE,eAAe;YAC1B,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,CAAC;YACpB,0BAA0B;YAC1B,EAAE;YACF,yCAAyC;YACzC,cAAc;YACd,MAAM;YACN,EAAE;YACF,iCAAiC;YACjC,iCAAiC;YACjC,EAAE;YACF,qCAAqC;YACrC,kBAAkB;YAClB,kBAAkB;YAClB,MAAM;YACN,EAAE;YACF,gEAAgE;YAChE,sDAAsD;YACtD,0BAA0B;YAC1B,KAAK;SACN,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QAEb,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,aAAa,EAAE;;gBAElB,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,aAAa,CAAC,MAAM,SAAS;YACpF,CAAC,CAAC,OAAO;gBACT,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,CACnC,IAAI,CAAA,4BAA4B,MAAM,CAAC,WAAW,OAAO,CAAC;;;mBAGvD,IAAI,CAAC,WAAW,EAAE;;;iCAGJ,IAAI,CAAC,iBAAiB;KAClD,CAAC;IACJ,CAAC;IAED,WAAW;QAET,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAEzC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA;;6CAE4B,WAAW;;OAEjD,CAAC;QACJ,CAAC;QAED,uHAAuH;QACvH,6IAA6I;QAE7I,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAEhD,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;KACxE,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,IAAS,EAAE,aAAqB;QAC1C,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;;UAEzB,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC;UAC7C,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,CACnC,IAAI,CAAA;kBACI,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;;KAE5D,CAAC;IACJ,CAAC;IAED,yBAAyB,CAAC,aAAqB;QAC7C,OAAO,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA,gBAAgB,aAAa,SAAS;YAC5C,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,gBAAgB,CAAC,IAAS;QAExB,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;YAEtD,IAAI,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;gBACpD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;YAC9C,MAAM,YAAY,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;YAEtC,OAAO,IAAI,CAAA;;cAEL,GAAG,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,WAAW,CAAC;;;;;;gDAMN,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;gBACrG,MAAM,CAAC,WAAW,KAAK,KAAK;;;SAGnC,CAAC;QACJ,CAAC,CAAC;KACH,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,IAAS,EAAE,IAAY;QACrC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACtE,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAU,CAAC;QACnE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC;QACtE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ;aAC/B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,KAAK,CAAC,CAAC;aACjD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAW,GAAG,CAAC,CAAC,UAAW,CAAC,CAAC;QACjD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAE3C,KAAK,MAAM,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAE/D,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAE1E,IAAI,cAAc,KAAK,CAAC,EAAE,CAAC;oBACzB,OAAO,cAAc,CAAC;gBACxB,CAAC;YACH,CAAC;YAED,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;IACL,CAAC;IAED,aAAa;QACX,oCAAoC;QACpC,oBAAoB;QACpB,IAAI;QAEJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM;gBAChC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,MAAM;SACX,CAAC;QAEF,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,YAAY,CAAC;uBAClB,IAAI,CAAC,QAAQ,CAAC,MAAM;;;gBAG3B,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,CACjC,IAAI,CAAA,WAAW,MAAM,CAAC,WAAW,WAAW,CAAC;;;;;KAKxD,CAAC;IACJ,CAAC;;AA5ND;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAGzB;AAUkB;IAAlB,KAAK,EAAE;kDAAkD;AACvC;IAAlB,KAAK,EAAE;oDAAoD;AACP;IAApD,KAAK,CAAC,qBAAqB,EAAE,IAAI,CAAC;qDAAiD;AACjC;IAAlD,KAAK,CAAC,mBAAmB,EAAE,IAAI,CAAC;mDAA+C;AAtBrE,WAAW;IADvB,aAAa,CAAC,QAAQ,CAAC;GACX,WAAW,CA2OvB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\n\nimport Sortable from 'sortablejs';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { CustomSwap } from './custom-swap.js';\nimport { UmDataGridColumn } from './grid-column';\nimport { styles } from './grid.styles.js';\n\nimport './grid-column';\n\nSortable.mount(CustomSwap);\n\n@customElement('u-grid')\nexport class UmDataTable extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  readonly #currentGroupingValuesMap: any[] = [];\n  #items: any[] = [];\n\n  @property({ type: Array })\n  get items(): any[] {\n    return this.#items;\n  }\n\n  set items(items: any[]) {\n    this.#items = items;\n    this.#updateSorting();\n  }\n\n  #sortedItems: any[] = [];\n\n  protected _columns: UmDataGridColumn[] = [];\n  @state() protected _groupColumns: UmDataGridColumn[] = [];\n  @state() protected _regularColumns: UmDataGridColumn[] = [];\n  @query('#header-columns-row', true) private readonly headerColumnsRow!: HTMLElement;\n  @query('#header-group-row', true) private readonly headerGroupRow!: HTMLElement;\n\n  protected override firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n\n    console.log(this.headerGroupRow);\n    new Sortable(this.headerGroupRow, {\n      group: 'columns',\n      // customSwap: true,\n      // revertOnSpill: true,\n      // swap: true,\n      // swapClass: 'column-drop-highlight',\n      draggable: 'u-chip',\n      forceFallback: true,\n      fallbackTolerance: 5,\n    });\n\n    new Sortable(this.headerColumnsRow, {\n      group: 'columns',\n      // customSwap: true,\n      // revertOnSpill: true,\n      // swap: true,\n      // swapClass: 'column-drop-highlight',\n      draggable: '.content-cell',\n      forceFallback: true,\n      fallbackTolerance: 5,\n      // onSwap: (evt: any) => {\n      //\n      //   if (evt.oldIndex === evt.newIndex) {\n      //     return;\n      //   }\n      //\n      //   let oldIndex = evt.oldIndex;\n      //   let newIndex = evt.newIndex;\n      //\n      //   if (this._groupColumns.length) {\n      //     oldIndex--;\n      //     newIndex--;\n      //   }\n      //\n      //   const column = this._regularColumns.splice(oldIndex, 1)[0];\n      //   this._regularColumns.splice(newIndex, 0, column);\n      //   this.requestUpdate();\n      // },\n    });\n  }\n\n  override render() {\n\n    return html`\n      <div class=\"container\">\n        <table class=\"u-table\">\n          <thead>\n            ${this.#renderHeader()}\n            <tr id=\"header-columns-row\">\n              ${this._groupColumns.length > 0\n                ? html`<th class=\"group-column-header\" colspan=\"${this._groupColumns.length}\"></th>`\n                : nothing}\n              ${map(this._regularColumns, column =>\n                html`<th class=\"content-cell\">${column.textContent}</th>`)}\n            </tr>\n          </thead>\n          <tbody>${this.#renderBody()}</tbody>\n        </table>\n      </div>\n      <slot hidden @slotchange=${this.#handleSlotChange}></slot>\n    `;\n  }\n\n  #renderBody() {\n\n    const columnCount = this._columns.length;\n\n    if (!this.items?.length) {\n      return html`\n        <tr>\n          <td part=\"cell no-data\" colspan=\"${columnCount}\">No data</td>\n        </tr>\n      `;\n    }\n\n    // const columnsSortedByGroupIndex = this._columns.sort((a, b) => (a.groupIndex ?? 999999) - (b.groupIndex ?? 999999));\n    // const grouping = Object.entries(Object.groupBy(this._columns, ({ groupIndex }) => groupIndex)) as unknown as [string, UmDataGridColumn[]];\n\n    const groupingCount = this._groupColumns.length;\n\n    return html`\n      ${map(this.#sortedItems, item => this.#renderItem(item, groupingCount))}\n    `;\n  }\n\n  #renderItem(item: any, groupingCount: number) {\n    return html`\n      ${this.#renderGroupRows(item)}\n      <tr>\n        ${this.#renderGroupingSpanColumn(groupingCount)}\n        ${map(this._regularColumns, column =>\n          html`\n            <td>${this.#getValueByPath(item, column.path)}</td>`)}\n      </tr>\n    `;\n  }\n\n  #renderGroupingSpanColumn(groupingCount: number) {\n    return groupingCount\n      ? html`<td colspan=\"${groupingCount}\"></td>`\n      : nothing;\n  }\n\n  #renderGroupRows(item: any): HTMLTemplateResult {\n\n    return html`\n      ${map(this._groupColumns, (column, index) => {\n        const value = this.#getValueByPath(item, column.path);\n\n        if (this.#currentGroupingValuesMap[index] === value) {\n          return;\n        }\n\n        this.#currentGroupingValuesMap.splice(index, Infinity);\n        this.#currentGroupingValuesMap[index] = value;\n        const emptyColumns = new Array(index);\n\n        return html`\n          <tr>\n            ${map(emptyColumns, () => html`<td></td>`)}\n            <td class=\"group-column-toggle\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n                <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\"/>\n              </svg>\n            </td>\n            <td class=\"grouping-row\" colspan=\"${this._regularColumns.length + (this._groupColumns.length + index + 1)}\">\n              ${column.textContent}: ${value}\n            </td>\n          </tr>\n        `;\n      })}\n    `;\n  }\n\n  #getValueByPath(item: any, path: string) {\n    return path.split('.').reduce((acc, key) => acc?.[key], item) ?? '';\n  }\n\n  #handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements({ flatten: true }) as any[];\n    this._columns = assigned.filter(el => el.tagName === 'U-GRID-COLUMN');\n    this._groupColumns = this._columns\n      .filter(c => !!c.groupIndex || c.groupIndex === 0)\n      .sort((a, b) => a.groupIndex! - b.groupIndex!);\n    this._regularColumns = this._columns.filter(c => !this._groupColumns.includes(c));\n    this.#updateSorting();\n  }\n\n  #updateSorting(): void {\n    if (!this.items?.length) {\n      this.#sortedItems = [];\n      return;\n    }\n\n    if (!this._groupColumns.length) {\n      this.#sortedItems = this.items;\n    }\n\n    this.#sortedItems = this.items.sort((a, b) => {\n\n      for (const groupColumn of this._groupColumns) {\n        const aValue = this.#getValueByPath(a, groupColumn.path) ?? '';\n        const bValue = this.#getValueByPath(b, groupColumn.path) ?? '';\n\n        const textComparison = aValue.toString().localeCompare(bValue.toString());\n\n        if (textComparison !== 0) {\n          return textComparison;\n        }\n      }\n\n      return 0;\n    });\n  }\n\n  #renderHeader() {\n    // if (!this._groupColumns.length) {\n    //   return nothing;\n    // }\n\n    const headerStyles = {\n      display: this._groupColumns.length\n        ? ''\n        : 'none',\n    };\n\n    return html`\n      <tr style=\"${styleMap(headerStyles)}\">\n        <th colspan=\"${this._columns.length}\">\n          <div class=\"header\">\n            <u-chip-set id=\"header-group-row\">\n              ${map(this._groupColumns, column =>\n                html`<u-chip>${column.textContent}</u-chip>`)}\n            </u-chip-set>\n          </div>\n        </th>\n      </tr>\n    `;\n  }\n\n  // #setRegularColumnsOrder() {\n  //   for (const i = 0; i < this._regularColumns.length; i++) {\n  //     const column = this._regularColumns[i];\n  //     column._index = i;\n  //   }\n  // }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-grid': UmDataTable;\n  }\n}\n"]}

package/grid/grid.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=grid.styles.d.ts.map

package/grid/grid.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.styles.d.ts","sourceRoot":"","sources":["../../src/grid/grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmIlB,CAAC"}