@kubex/zinc 1.0.8 → 1.0.10

package/docs/pages/components/button.md

@@ -34,6 +34,20 @@ The `auto-click` attribute can be added to a button to make it automatically cli
     color="transparent"
   ></zn-button>
 </zn-button auto-click>
+
+<br>
+<br>
+
+<zn-button color="success" auto-click auto-click-delay="10000" loading-text="Accepting">
+  Test Auto Button
+  <zn-style slot="cancel" margin="l">
+    <zn-button
+      icon="call_end"
+      icon-size="18"
+      type="button"
+      color="error"
+    ></zn-button></zn-style>
+</zn-button>
 ```
 
 ### Variants

package/docs/pages/components/dropdown.md

@@ -6,7 +6,12 @@ layout: component
 ---
 
 ```html:preview
-<zn-dropdown></zn-dropdown>
+<zn-dropdown t="[object Object]" placement="bottom-start">
+              <zn-menu actions="[{&quot;confirm&quot;:{&quot;type&quot;:&quot;success&quot;,&quot;trigger&quot;:&quot;reactivate10&quot;,&quot;caption&quot;:&quot;Reactivate Access&quot;,&quot;content&quot;:&quot;Are you sure you want to reactivate access for John Doe?&quot;,&quot;action&quot;:&quot;#&quot;},&quot;title&quot;:&quot;Reactivate Access&quot;,&quot;style&quot;:&quot;success&quot;}]" t="[object Object]" role="menu"></zn-menu>
+              <button slot="trigger">
+                <zn-icon src="more_vert" t="[object Object]" size="24" library="material-symbols-outlined"></zn-icon>
+              </button>
+            </zn-dropdown>
 ```
 
 ## Examples

package/docs/pages/components/table.md

@@ -6,7 +6,7 @@ layout: component
 ---
 
 ```html:preview
-<zn-table></zn-table>
+<zn-table fixed-first="" t="light" has-actions="" data="{&quot;header&quot;:[&quot;Full Name&quot;,&quot;User ID&quot;,&quot;Email&quot;,&quot;Type&quot;,&quot;Partner&quot;,&quot;State&quot;,&quot;Date Joined&quot;],&quot;items&quot;: [{&quot;actions&quot;: [{&quot;confirm&quot;: {&quot;type&quot;: &quot;success&quot;,&quot;trigger&quot;: &quot;reactivate10&quot;,&quot;caption&quot;: &quot;Reactivate Access&quot;,&quot;content&quot;: &quot;Are you sure you want to reactivate access for John Doe?&quot;,&quot;action&quot;: &quot;#&quot;},&quot;title&quot;: &quot;Reactivate Access&quot;,&quot;style&quot;: &quot;success&quot;}],&quot;caption&quot;: &quot;John Doe&quot;,&quot;data&quot;: [&quot;1&quot;,&quot;john.doe@example.com&quot;,&quot;Member&quot;,&quot;&quot;,&quot;&lt;span class='zn-success'&gt;Active&lt;/span&gt;&quot;,&quot;2025-01-01 12:10:20&quot;]}]}"></zn-table>
 ```
 
 ## Examples

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/themes/_light.scss

@@ -537,5 +537,5 @@
   --zn-z-index-dropdown: 900;
   --zn-z-index-toast: 950;
   --zn-z-index-tooltip: 1000;
-  --zn-z-index-editor-action: 100000;
+  --zn-z-index-editor-action: 1000000;
 }

package/src/components/button/button.component.ts

@@ -361,26 +361,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           ${this.content}
         </slot>
         ${this.iconPosition === 'right' ? icon : ''}
-        ${this.loading ? html`
-          <div class="button--loading-container">
-            <span
-              class=${classMap({
-                'button--loading-text-bottom': true,
-                'button--loading-text-bottom-transparent': this.color === 'transparent',
-                [`button--loading-text-bottom-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
-              })}>
-              ${this.loadingText}<span class="loading-countdown"></span>
-            </span>
-            <span
-              class=${classMap({
-                'button--loading-text-top': true,
-                'button--loading-text-top-transparent': this.color === 'transparent',
-                [`button--loading-text-top-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
-              })}>
-              ${this.loadingText}<span class="loading-countdown"></span>
-            </span>
-          </div>
-        ` : null}
+        ${this._getLoadingContainer()}
       </${tag}>`;
 
     let content = this.autoClick ? html`
@@ -401,4 +382,15 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
 
     return content;
   }
+
+  private _getLoadingContainer() {
+    return html`
+      ${this.loading ? html`
+        <div class="button--loading-container">
+            <span class="button--loading-text">
+              ${this.loadingText}<span class="loading-countdown"></span>
+            </span>
+        </div>
+      ` : null}`;
+  }
 }

package/src/components/button/button.scss

@@ -312,8 +312,6 @@
 }
 
 .button--loading-bg {
-  background-color: #e0e0e0;
-
   &-transparent {
     background-color: transparent;
   }
@@ -347,7 +345,8 @@
     pointer-events: none;
   }
 
-  &-text-bottom, &-text-top {
+  &-text {
+    z-index: 5;
     width: 100%;
     height: 100%;
     display: flex;
@@ -357,9 +356,8 @@
     font-weight: inherit;
     user-select: none;
     position: absolute;
-    top: 0;
-    left: 0;
     pointer-events: none;
+    color: inherit;
 
     .loading-countdown {
       margin-left: 3px;
@@ -375,25 +373,6 @@
       padding-inline-end: 7px;
     }
   }
-
-  &-text-bottom {
-    z-index: 2;
-    color: rgba(var(--btn-color), .85);
-
-    &-transparent {
-      color: inherit;
-    }
-  }
-
-  &-text-top {
-    z-index: 3;
-    color: inherit;
-    /* Animate the reveal from left to right using a mask */
-    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
-    mask-size: 0 100%;
-    mask-repeat: no-repeat;
-    animation: loading-text-reveal var(--loading-duration, 2s) linear forwards;
-  }
 }
 
 .button--relative-wrapper {
@@ -412,15 +391,6 @@
   }
 }
 
-@keyframes loading-text-reveal {
-  from {
-    mask-size: 0 100%;
-  }
-  to {
-    mask-size: 100% 100%;
-  }
-}
-
 :host([vertical-align="center"]) {
   align-self: center;
 }

package/src/components/button-menu/button-menu.component.ts

@@ -307,6 +307,7 @@ export default class ZnButtonMenu extends ZincElement {
   public setDynamicButtons(btns: NodeListOf<ZnButton>) {
     // remove all buttons that have the zn-button-menu__added class
     this.removeAllButtons();
+    if (!btns || btns.length === 0) return;
 
     // add the new buttons
     btns.forEach((button: ZnButton) => {

package/src/components/content-block/content-block.scss

@@ -72,3 +72,57 @@ zn-panel:not(.content-block--short) zn-header::part(header-description) {
 .hidden {
   display: none;
 }
+
+li[data-list="ordered"] {
+  counter-increment: list-0 1;
+}
+
+@supports (counter-set:none) {
+  li[data-list] {
+    counter-set: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0;
+  }
+}
+
+li[data-list=bullet] > .ql-ui:before {
+  content: "•";
+}
+
+li[data-list=checked] > .ql-ui:before {
+  content: "☑";
+}
+
+li[data-list=unchecked] > .ql-ui:before {
+  content: "☐";
+}
+
+li[data-list="ordered"] > .ql-ui::before {
+  content: counter(list-0) ". ";
+}
+
+ol {
+  padding: 0;
+  margin: 0;
+}
+
+li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
+  color: #777;
+}
+
+.ql-ui {
+  position: absolute;
+}
+
+li {
+  list-style-type: none;
+  padding-left: 1em;
+  position: relative;
+}
+
+li > .ql-ui::before {
+  display: inline-block;
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
+}

package/src/components/data-table/data-table.component.ts

@@ -90,6 +90,8 @@ interface HeaderConfig {
   default?: boolean;
   sortable?: boolean;
   filterable?: boolean;
+  hideHeader?: boolean;
+  hideColumn?: boolean;
 }
 
 interface DataRequest {
@@ -427,6 +429,13 @@ export default class ZnDataTable extends ZincElement {
         }
       });
 
+      // remove empty groups
+      Object.keys(groupedRows).forEach((groupKey) => {
+        if (groupedRows[groupKey].length === 0) {
+          delete groupedRows[groupKey];
+        }
+      });
+
       // render a table for each group
       return html`
         <zn-sp flush>
@@ -449,7 +458,10 @@ export default class ZnDataTable extends ZincElement {
   }
 
   public renderTableData(data: any) {
-    const filteredHeaders = Object.values(this.headers).filter((header) => {
+    const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideHeader || header.hideColumn) {
+        return false;
+      }
       return !Object.values(this.hiddenColumns).includes(header.key);
     });
 
@@ -608,7 +620,7 @@ export default class ZnDataTable extends ZincElement {
       || this.hasSlotController.test(ActionSlots.modify.valueOf())
       || this.hasSlotController.test(ActionSlots.create.valueOf());
 
-    if(!hasSlots) {
+    if (!hasSlots) {
       return [];
     }
 
@@ -909,6 +921,13 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private renderCellBody(index: number, value: Cell) {
+    const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideHeader || header.hideColumn) {
+        return false;
+      }
+      return !Object.values(this.hiddenColumns).includes(header.key);
+    });
+
     const headerKeys: string[] = Object.keys(this.headers).filter(
       (key) => !Object.values(this.hiddenColumns).includes(key)
     );
@@ -920,7 +939,7 @@ export default class ZnDataTable extends ZincElement {
         class="${classMap({
           'table__cell': true,
           'table__cell--wide': headerKey === this.wideColumn,
-          'table__cell--last': headerKey === headerKeys[headerKeys.length - 1],
+          'table__cell--last': index === filteredHeaders.length - 1,
         })}">
         <div>${this.renderCell(value)}</div>
       </td>`;

package/src/components/editor/editor.component.ts

@@ -25,6 +25,18 @@ import type ToolbarComponent from "./modules/toolbar/toolbar.component";
 
 import styles from './editor.scss';
 
+export interface EditorFeatureConfig {
+  codeBlocksEnabled?: boolean;
+  dividersEnabled?: boolean;
+  linksEnabled?: boolean;
+  attachmentsEnabled?: boolean;
+  imagesEnabled?: boolean;
+  videosEnabled?: boolean;
+  datesEnabled?: boolean;
+  emojisEnabled?: boolean;
+  codeEnabled?: boolean;
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/editor
@@ -66,6 +78,17 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property({attribute: 'attachment-url', type: String})
   uploadAttachmentUrl: string;
 
+  /* Feature Permission Attributes */
+  @property({attribute: 'code-blocks', type: Boolean}) codeBlocksEnabled: boolean = false;
+  @property({attribute: 'dividers', type: Boolean}) dividersEnabled: boolean = false;
+  @property({attribute: 'links', type: Boolean}) linksEnabled: boolean = false;
+  @property({attribute: 'attachments', type: Boolean}) attachmentsEnabled: boolean = false;
+  @property({attribute: 'images', type: Boolean}) imagesEnabled: boolean = false;
+  @property({attribute: 'videos', type: Boolean}) videosEnabled: boolean = false;
+  @property({attribute: 'dates', type: Boolean}) datesEnabled: boolean = false;
+  @property({attribute: 'emojis', type: Boolean}) emojisEnabled: boolean = false;
+  @property({attribute: 'code', type: Boolean}) codeEnabled: boolean = false;
+  @property({attribute: 'ai', type: Boolean}) aiEnabled: boolean = false;
   @property({attribute: 'ai-path'}) aiPath: string = '';
 
   private quillElement: Quill;
@@ -111,10 +134,16 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     });
 
     Quill.register({'modules/toolbar': Toolbar}, true);
-    Quill.register({'modules/datePicker': DatePicker}, true);
-    Quill.register({'modules/emoji': Emoji}, true);
-    Quill.register({'modules/headlessEmoji': HeadlessEmoji}, true);
-    Quill.register({'modules/attachment': Attachment}, true);
+    if (this.datesEnabled) {
+      Quill.register({'modules/datePicker': DatePicker}, true);
+    }
+    if (this.emojisEnabled) {
+      Quill.register({'modules/emoji': Emoji}, true);
+      Quill.register({'modules/headlessEmoji': HeadlessEmoji}, true);
+    }
+    if (this.attachmentsEnabled) {
+      Quill.register({'modules/attachment': Attachment}, true);
+    }
     Quill.register({'modules/timeTracking': TimeTracking}, true);
     Quill.register({'modules/dragAndDrop': DragAndDrop}, true);
     Quill.register({'modules/imageResize': ImageResize}, true);
@@ -122,80 +151,106 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     Quill.register({'modules/dialog': Dialog}, true);
 
     /* AI Modules */
-    Quill.register('modules/ai', QuillAI as any, true);
+    if (this.aiEnabled) {
+      Quill.register('modules/ai', QuillAI as any, true);
+    }
 
     // Register a custom HR blot so we can insert an inline horizontal rule block
-    const BlockEmbed = Quill.import('blots/block/embed') as { new(...args: any[]): any };
-
-    class HrBlot extends BlockEmbed {
-      static blotName = 'hr';
-      static tagName = 'HR';
-      static className = 'ql-hr';
-
-      static create(): HTMLElement {
-        const node = document.createElement('hr');
-        node.classList.add('ql-hr');
-        return node;
+    if (this.dividersEnabled) {
+      const BlockEmbed = Quill.import('blots/block/embed') as { new(...args: any[]): any };
+
+      class HrBlot extends BlockEmbed {
+        static blotName = 'hr';
+        static tagName = 'HR';
+        static className = 'ql-hr';
+
+        static create(): HTMLElement {
+          const node = document.createElement('hr');
+          node.classList.add('ql-hr');
+          return node;
+        }
       }
-    }
 
-    Quill.register({'formats/hr': HrBlot}, true);
+      Quill.register({'formats/hr': HrBlot}, true);
+    }
 
-    const attachmentInput = this.getForm()?.querySelector('input[name="attachments"]');
     const startTimeInput = this.getForm()?.querySelector('input[name="startTime"]');
     const openTimeInput = this.getForm()?.querySelector('input[name="openTime"]');
 
+    const featureConfig: EditorFeatureConfig = {
+      codeBlocksEnabled: this.codeBlocksEnabled,
+      dividersEnabled: this.dividersEnabled,
+      linksEnabled: this.linksEnabled,
+      attachmentsEnabled: this.attachmentsEnabled,
+      imagesEnabled: this.imagesEnabled,
+      videosEnabled: this.videosEnabled,
+      datesEnabled: this.datesEnabled,
+      emojisEnabled: this.emojisEnabled,
+      codeEnabled: this.codeEnabled,
+    };
+
     const quill = new Quill(this.editor, {
       modules: {
         toolbar: {
           container: this.toolbar,
+          config: featureConfig
+        },
+        contextMenu: {
+          config: featureConfig
         },
-        contextMenu: {},
         keyboard: {
           bindings: bindings
         },
         dialog: {
           editorId: this.id
         },
-        emoji: {},
-        headlessEmoji: {},
-        datePicker: {},
-        ai: {
-          path: this.aiPath
-        },
+        ...(this.datesEnabled && {
+          datePicker: {}
+        }),
+        ...(this.emojisEnabled && {
+          emoji: {},
+          headlessEmoji: {},
+        }),
+        ...(this.aiEnabled && {
+          ai: {
+            path: this.aiPath
+          }
+        }),
         timeTracking: {
           startTimeInput: startTimeInput as HTMLInputElement,
           openTimeInput: openTimeInput as HTMLInputElement
         },
-        attachment: {
-          attachmentInput: attachmentInput,
-          onFileUploaded: () => {
-            window.onbeforeunload = () => null;
+        ...(this.attachmentsEnabled && {
+          attachment: {
+            attachmentInput: this.getForm()?.querySelector('input[name="attachments"]'),
+            onFileUploaded: () => {
+              window.onbeforeunload = () => null;
+            },
+            upload: (file: File) => {
+              window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
+              return new Promise((resolve) => {
+                const fd = new FormData();
+                fd.append('filename', file.name);
+                fd.append('size', file.size.toString());
+                fd.append('mimeType', file.type);
+
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', this.uploadAttachmentUrl, true);
+                xhr.onload = () => {
+                  if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText) as {
+                      uploadPath: string;
+                      uploadUrl: string;
+                      originalFilename: string;
+                    };
+                    resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
+                  }
+                };
+                xhr.send(fd);
+              });
+            },
           },
-          upload: (file: File) => {
-            window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
-            return new Promise((resolve) => {
-              const fd = new FormData();
-              fd.append('filename', file.name);
-              fd.append('size', file.size.toString());
-              fd.append('mimeType', file.type);
-
-              const xhr = new XMLHttpRequest();
-              xhr.open('POST', this.uploadAttachmentUrl, true);
-              xhr.onload = () => {
-                if (xhr.status === 200) {
-                  const response = JSON.parse(xhr.responseText) as {
-                    uploadPath: string;
-                    uploadUrl: string;
-                    originalFilename: string;
-                  };
-                  resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
-                }
-              };
-              xhr.send(fd);
-            });
-          },
-        },
+        }),
         imageResize: {},
         history: {}
       },
@@ -339,7 +394,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
           const emoji = this.quillElement.getModule('headlessEmoji') as HeadlessEmoji;
           const menu = this.quillElement.getModule('contextMenu') as ContextMenu;
           const dialog = this.quillElement.getModule('dialog') as Dialog;
-          if (emoji.isOpen() || menu.isOpen() || dialog.isOpen()) {
+          if (emoji?.isOpen() || menu?.isOpen() || dialog?.isOpen()) {
             return false;
           }
 

package/src/components/editor/editor.scss

@@ -65,7 +65,6 @@
     padding: 0 var(--zn-spacing-medium);
 
     img {
-      max-width: 40%;
       height: auto;
     }
   }

package/src/components/editor/modules/context-menu/context-menu-component.ts

@@ -10,6 +10,7 @@ export interface ResultItem {
   format?: string;
   key?: string;
   value?: string | boolean;
+  order?: number;
 }
 
 export default class ContextMenuComponent extends ZincElement {

package/src/components/editor/modules/context-menu/context-menu.scss

@@ -6,7 +6,7 @@
   border: 1px solid var(--zn-border-color);
   border-radius: 8px;
   box-shadow: var(--zn-shadow-medium);
-  padding: 6px;
+  padding: 6px 0;
   max-height: 220px;
   overflow-y: auto;
   min-width: 360px;