@manzanohq/components 0.1.1 → 0.1.4

package/cdn/chunks/chunk.AEQDWEVQ.js

@@ -0,0 +1,213 @@
+import{a as o}from"./chunk.22OS67BO.js";import{a as r}from"./chunk.TO7F5R6A.js";var t=[o,r`
+    @layer base, variants, appearances, sizes, states;
+
+    @layer base {
+      :host {
+        display: inline-block;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--mz-space-xs);
+        border: var(--mz-border-width-sm) solid transparent;
+        font-family: var(--mz-font-sans);
+        font-weight: var(--mz-font-weight-semibold);
+        text-decoration: none;
+        white-space: nowrap;
+        user-select: none;
+        cursor: pointer;
+        transition:
+          background var(--mz-transition-fast) ease,
+          color var(--mz-transition-fast) ease,
+          border-color var(--mz-transition-fast) ease,
+          box-shadow var(--mz-transition-fast) ease;
+        background: var(--_bg);
+        color: var(--_text);
+        border-color: var(--_border, transparent);
+        --_default-radius: var(--_radius, var(--mz-button-radius, var(--mz-radius-md)));
+        border-start-start-radius: var(--mz-button-radius-start, var(--_default-radius));
+        border-end-start-radius: var(--mz-button-radius-start, var(--_default-radius));
+        border-start-end-radius: var(--mz-button-radius-end, var(--_default-radius));
+        border-end-end-radius: var(--mz-button-radius-end, var(--_default-radius));
+        height: var(--_height);
+        padding-inline: var(--_padding-inline);
+        font-size: var(--_font-size);
+        line-height: var(--mz-line-height-dense);
+      }
+
+      .button:focus-visible {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      /* Prefix / Suffix slots */
+      .button__prefix,
+      .button__suffix {
+        display: inline-flex;
+        flex: none;
+      }
+
+      .button__label {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      /* Loading state */
+      .button--loading .button__label,
+      .button--loading .button__prefix,
+      .button--loading .button__suffix {
+        visibility: hidden;
+      }
+
+      .button__spinner {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .button--loading {
+        position: relative;
+        cursor: wait;
+      }
+    }
+
+    @layer variants {
+      :host([variant='primary']) {
+        --_color: var(--mz-color-primary);
+        --_color-hover: var(--mz-color-primary-hover);
+        --_color-active: var(--mz-color-primary-active);
+        --_on-color: var(--mz-color-on-primary);
+      }
+
+      :host([variant='danger']) {
+        --_color: var(--mz-color-danger);
+        --_color-hover: var(--mz-color-danger-hover);
+        --_color-active: var(--mz-color-danger-active);
+        --_on-color: var(--mz-color-on-danger);
+      }
+
+      :host([variant='success']) {
+        --_color: var(--mz-color-success);
+        --_color-hover: var(--mz-color-success-hover);
+        --_color-active: var(--mz-color-success-active);
+        --_on-color: var(--mz-color-on-success);
+      }
+
+      :host([variant='warning']) {
+        --_color: var(--mz-color-warning);
+        --_color-hover: var(--mz-color-warning-hover);
+        --_color-active: var(--mz-color-warning-active);
+        --_on-color: var(--mz-color-on-warning);
+      }
+
+      :host([variant='neutral']),
+      :host(:not([variant])) {
+        --_color: var(--mz-color-neutral);
+        --_color-hover: var(--mz-color-neutral-hover);
+        --_color-active: var(--mz-color-neutral-active);
+        --_on-color: var(--mz-color-on-neutral);
+      }
+    }
+
+    @layer appearances {
+      /* Filled (default) */
+      :host([appearance='filled']),
+      :host(:not([appearance])) {
+        --_bg: var(--mz-button-bg, var(--_color));
+        --_text: var(--mz-button-color, var(--_on-color));
+      }
+      :host([appearance='filled']:hover),
+      :host(:not([appearance]):hover) {
+        --_bg: var(--_color-hover);
+      }
+      :host([appearance='filled']:active),
+      :host(:not([appearance]):active) {
+        --_bg: var(--_color-active);
+      }
+
+      /* Outline */
+      :host([appearance='outline']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: var(--_color);
+      }
+      :host([appearance='outline']:hover) {
+        --_bg: var(--_color);
+        --_text: var(--_on-color);
+      }
+
+      /* Ghost */
+      :host([appearance='ghost']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: transparent;
+      }
+      :host([appearance='ghost']:hover) {
+        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);
+      }
+
+      /* Link */
+      :host([appearance='link']) {
+        --_bg: transparent;
+        --_text: var(--_color);
+        --_border: transparent;
+      }
+      :host([appearance='link']) .button {
+        text-decoration: underline;
+        padding-inline: 0;
+      }
+      :host([appearance='link']:hover) {
+        --_text: var(--_color-hover);
+      }
+    }
+
+    @layer sizes {
+      :host([size='xs']) {
+        --_height: 1.375rem;
+        --_padding-inline: var(--mz-space-xs);
+        --_font-size: var(--mz-font-size-2xs);
+      }
+
+      :host([size='sm']) {
+        --_height: 1.75rem;
+        --_padding-inline: var(--mz-space-sm);
+        --_font-size: var(--mz-font-size-xs);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_height: 2rem;
+        --_padding-inline: var(--mz-space-md);
+        --_font-size: var(--mz-font-size-sm);
+      }
+
+      :host([size='lg']) {
+        --_height: 2.5rem;
+        --_padding-inline: var(--mz-space-lg);
+        --_font-size: var(--mz-font-size-sm);
+      }
+
+      :host([size='xl']) {
+        --_height: 3rem;
+        --_padding-inline: var(--mz-space-xl);
+        --_font-size: var(--mz-font-size-md);
+      }
+    }
+
+    @layer states {
+      /* Pill shape */
+      :host([pill]) {
+        --_radius: var(--mz-radius-pill);
+      }
+
+      /* Disabled */
+      :host([disabled]) .button {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  `];export{t as a};
+//# sourceMappingURL=chunk.AEQDWEVQ.js.map

package/cdn/chunks/chunk.AKEPDSDC.js

@@ -0,0 +1,2 @@
+import{a as l}from"./chunk.CGJMWRBS.js";import{a as i}from"./chunk.22OS67BO.js";import{a as s,d as o}from"./chunk.K3BKUERM.js";import{d as r}from"./chunk.TO7F5R6A.js";import{a as t}from"./chunk.MGICPQBB.js";var e=class extends o{constructor(){super(...arguments);this.observer=null;this.disabled=!1}connectedCallback(){super.connectedCallback(),this.startObserver()}disconnectedCallback(){super.disconnectedCallback(),this.stopObserver()}updated(){this.stopObserver(),this.startObserver()}startObserver(){this.disabled||(this.observer=new ResizeObserver(n=>{this.emit("mz-resize",{detail:{entries:n}})}),this.observer.observe(this))}stopObserver(){this.observer&&(this.observer.disconnect(),this.observer=null)}render(){return r`<slot></slot>`}};e.styles=[i,l],t([s({type:Boolean,reflect:!0})],e.prototype,"disabled",2);export{e as a};
+//# sourceMappingURL=chunk.AKEPDSDC.js.map

package/cdn/chunks/chunk.AKEPDSDC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/resize-observer/resize-observer.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './resize-observer.styles.js';\n\n/**\n * @summary A wrapper around the browser's native `ResizeObserver` API that emits an event when the host element is resized.\n *\n * @event mz-resize - Emitted when the host element is resized. The event detail contains `{ entries: ResizeObserverEntry[] }`.\n *\n * @slot - The content to observe for size changes.\n */\nexport class MzResizeObserver extends ManzanoElement {\n  static styles = [componentStyles, styles];\n\n  private observer: ResizeObserver | null = null;\n\n  /** Disables the observer. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.startObserver();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopObserver();\n  }\n\n  protected updated() {\n    // Restart observer when disabled changes\n    this.stopObserver();\n    this.startObserver();\n  }\n\n  private startObserver() {\n    if (this.disabled) return;\n\n    this.observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.emit('mz-resize', { detail: { entries } });\n    });\n\n    this.observer.observe(this);\n  }\n\n  private stopObserver() {\n    if (this.observer) {\n      this.observer.disconnect();\n      this.observer = null;\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],
+  "mappings": "+MAaO,IAAMA,EAAN,cAA+BC,CAAe,CAA9C,kCAGL,KAAQ,SAAkC,KAGE,cAAW,GAEvD,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,KAAK,cAAc,CACrB,CAEA,sBAAuB,CACrB,MAAM,qBAAqB,EAC3B,KAAK,aAAa,CACpB,CAEU,SAAU,CAElB,KAAK,aAAa,EAClB,KAAK,cAAc,CACrB,CAEQ,eAAgB,CAClB,KAAK,WAET,KAAK,SAAW,IAAI,eAAgBC,GAAmC,CACrE,KAAK,KAAK,YAAa,CAAE,OAAQ,CAAE,QAAAA,CAAQ,CAAE,CAAC,CAChD,CAAC,EAED,KAAK,SAAS,QAAQ,IAAI,EAC5B,CAEQ,cAAe,CACjB,KAAK,WACP,KAAK,SAAS,WAAW,EACzB,KAAK,SAAW,KAEpB,CAEA,QAAS,CACP,OAAOC,gBACT,CACF,EA5CaH,EACJ,OAAS,CAACI,EAAiBC,CAAM,EAKIC,EAAA,CAA3CC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAN/BP,EAMiC",
+  "names": ["MzResizeObserver", "ManzanoElement", "entries", "b", "component_styles_default", "resize_observer_styles_default", "__decorateClass", "n"]
+}

package/cdn/chunks/chunk.AOMUY2YZ.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk.4NBFWXLJ.js";e.define("mz-popover");
+//# sourceMappingURL=chunk.AOMUY2YZ.js.map

package/cdn/chunks/chunk.ATXN7OPI.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk.AKEPDSDC.js";e.define("mz-resize-observer");
+//# sourceMappingURL=chunk.ATXN7OPI.js.map

package/cdn/chunks/chunk.ATXN7OPI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/resize-observer/resize-observer.ts"],
+  "sourcesContent": ["import { MzResizeObserver } from './resize-observer.component.js';\n\nMzResizeObserver.define('mz-resize-observer');\n\nexport { MzResizeObserver };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-resize-observer': MzResizeObserver;\n  }\n}\n"],
+  "mappings": "wCAEAA,EAAiB,OAAO,oBAAoB",
+  "names": ["MzResizeObserver"]
+}

package/cdn/chunks/chunk.AZO3LFBF.js

@@ -0,0 +1,173 @@
+import{a as e}from"./chunk.22OS67BO.js";import{a as r}from"./chunk.TO7F5R6A.js";var t=[e,r`
+    :host {
+      display: inline-block;
+    }
+
+    .date-picker {
+      position: relative;
+      font-family: var(--mz-font-sans);
+    }
+
+    .date-picker__control {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface, #fff);
+      cursor: pointer;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .date-picker--open .date-picker__control {
+      border-color: var(--mz-color-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);
+    }
+
+    .date-picker--disabled .date-picker__control {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .date-picker__input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--mz-font-size-base);
+      color: var(--mz-color-text);
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      outline: none;
+      cursor: pointer;
+    }
+
+    .date-picker__input::placeholder {
+      color: var(--mz-color-text-disabled);
+    }
+
+    :host([size="small"]) .date-picker__input {
+      font-size: var(--mz-font-size-sm);
+      padding: var(--mz-space-xs) var(--mz-space-sm);
+    }
+
+    :host([size="large"]) .date-picker__input {
+      font-size: var(--mz-font-size-lg);
+      padding: var(--mz-space-md) var(--mz-space-lg);
+    }
+
+    .date-picker__icon {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--mz-space-sm);
+      color: var(--mz-color-text-disabled);
+    }
+
+    .date-picker__calendar {
+      position: absolute;
+      top: calc(100% + var(--mz-space-xs, 4px));
+      left: 0;
+      z-index: 1000;
+      background: var(--mz-color-surface, #fff);
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg, 0.75rem);
+      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));
+      padding: var(--mz-space-sm);
+      width: 18rem;
+    }
+
+    .date-picker__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--mz-space-xs) 0;
+      margin-bottom: var(--mz-space-xs);
+    }
+
+    .date-picker__month-year {
+      font-weight: var(--mz-font-weight-semibold, 600);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+    }
+
+    .date-picker__nav {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: transparent;
+      color: var(--mz-color-text);
+      cursor: pointer;
+      transition: background 0.15s;
+      padding: 0;
+    }
+
+    .date-picker__nav:hover {
+      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));
+    }
+
+    .date-picker__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+      margin-bottom: var(--mz-space-xs);
+    }
+
+    .date-picker__weekday {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-text-secondary);
+      font-weight: var(--mz-font-weight-medium, 500);
+      padding: var(--mz-space-xs) 0;
+    }
+
+    .date-picker__days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 1px;
+    }
+
+    .date-picker__day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      margin: auto;
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+      padding: 0;
+    }
+
+    .date-picker__day:hover:not(:disabled):not(.date-picker__day--selected) {
+      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));
+    }
+
+    .date-picker__day--selected {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary, #fff);
+      font-weight: var(--mz-font-weight-semibold, 600);
+    }
+
+    .date-picker__day--today:not(.date-picker__day--selected) {
+      border: 1px solid var(--mz-color-primary);
+      color: var(--mz-color-primary);
+      font-weight: var(--mz-font-weight-semibold, 600);
+    }
+
+    .date-picker__day--disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .date-picker__day--outside {
+      visibility: hidden;
+    }
+  `];export{t as a};
+//# sourceMappingURL=chunk.AZO3LFBF.js.map

package/cdn/chunks/chunk.AZO3LFBF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/date-picker/date-picker.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n    }\n\n    .date-picker {\n      position: relative;\n      font-family: var(--mz-font-sans);\n    }\n\n    .date-picker__control {\n      display: flex;\n      align-items: center;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-surface, #fff);\n      cursor: pointer;\n      transition: border-color 0.15s, box-shadow 0.15s;\n    }\n\n    .date-picker--open .date-picker__control {\n      border-color: var(--mz-color-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);\n    }\n\n    .date-picker--disabled .date-picker__control {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .date-picker__input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--mz-font-size-base);\n      color: var(--mz-color-text);\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      outline: none;\n      cursor: pointer;\n    }\n\n    .date-picker__input::placeholder {\n      color: var(--mz-color-text-disabled);\n    }\n\n    :host([size=\"small\"]) .date-picker__input {\n      font-size: var(--mz-font-size-sm);\n      padding: var(--mz-space-xs) var(--mz-space-sm);\n    }\n\n    :host([size=\"large\"]) .date-picker__input {\n      font-size: var(--mz-font-size-lg);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n    }\n\n    .date-picker__icon {\n      display: flex;\n      align-items: center;\n      padding: 0 var(--mz-space-sm);\n      color: var(--mz-color-text-disabled);\n    }\n\n    .date-picker__calendar {\n      position: absolute;\n      top: calc(100% + var(--mz-space-xs, 4px));\n      left: 0;\n      z-index: 1000;\n      background: var(--mz-color-surface, #fff);\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg, 0.75rem);\n      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));\n      padding: var(--mz-space-sm);\n      width: 18rem;\n    }\n\n    .date-picker__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mz-space-xs) 0;\n      margin-bottom: var(--mz-space-xs);\n    }\n\n    .date-picker__month-year {\n      font-weight: var(--mz-font-weight-semibold, 600);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n    }\n\n    .date-picker__nav {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 1.75rem;\n      height: 1.75rem;\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: transparent;\n      color: var(--mz-color-text);\n      cursor: pointer;\n      transition: background 0.15s;\n      padding: 0;\n    }\n\n    .date-picker__nav:hover {\n      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));\n    }\n\n    .date-picker__weekdays {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      text-align: center;\n      margin-bottom: var(--mz-space-xs);\n    }\n\n    .date-picker__weekday {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-text-secondary);\n      font-weight: var(--mz-font-weight-medium, 500);\n      padding: var(--mz-space-xs) 0;\n    }\n\n    .date-picker__days {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      gap: 1px;\n    }\n\n    .date-picker__day {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 2rem;\n      height: 2rem;\n      margin: auto;\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n      cursor: pointer;\n      transition: background 0.15s, color 0.15s;\n      padding: 0;\n    }\n\n    .date-picker__day:hover:not(:disabled):not(.date-picker__day--selected) {\n      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));\n    }\n\n    .date-picker__day--selected {\n      background: var(--mz-color-primary);\n      color: var(--mz-color-on-primary, #fff);\n      font-weight: var(--mz-font-weight-semibold, 600);\n    }\n\n    .date-picker__day--today:not(.date-picker__day--selected) {\n      border: 1px solid var(--mz-color-primary);\n      color: var(--mz-color-primary);\n      font-weight: var(--mz-font-weight-semibold, 600);\n    }\n\n    .date-picker__day--disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n\n    .date-picker__day--outside {\n      visibility: hidden;\n    }\n  `\n];\n"],
+  "mappings": "gFAGA,IAAOA,EAAQ,CACbC,EACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4KF",
+  "names": ["date_picker_styles_default", "component_styles_default", "i"]
+}

package/cdn/chunks/chunk.B2HRJL4L.js

@@ -0,0 +1,184 @@
+import{a as b}from"./chunk.XYPDRQPX.js";import{a as c}from"./chunk.X6MSTFXZ.js";import{b as u}from"./chunk.GBSGAUKU.js";import{a as o,b as p,d as g}from"./chunk.K3BKUERM.js";import{d as s,g as n}from"./chunk.TO7F5R6A.js";import{a as r}from"./chunk.MGICPQBB.js";var t=class extends g{constructor(){super(...arguments);this.columns=[];this.rows=[];this.selectable=!1;this.striped=!1;this.bordered=!1;this.hoverable=!0;this.searchable=!1;this.pageSize=0;this.sortKey="";this.sortDirection="asc";this.searchQuery="";this.currentPage=1;this.selectedRows=new Set}get filteredRows(){if(!this.searchQuery)return this.rows;let e=this.searchQuery.toLowerCase();return this.rows.filter(a=>this.columns.some(l=>{let i=a[l.key];return i!=null&&String(i).toLowerCase().includes(e)}))}get sortedRows(){let e=[...this.filteredRows];return this.sortKey?e.sort((a,l)=>{let i=a[this.sortKey],d=l[this.sortKey],h=0;return i==null&&d==null?h=0:i==null?h=-1:d==null?h=1:typeof i=="number"&&typeof d=="number"?h=i-d:h=String(i).localeCompare(String(d)),this.sortDirection==="desc"?-h:h}):e}get paginatedRows(){if(!this.pageSize)return this.sortedRows;let e=(this.currentPage-1)*this.pageSize;return this.sortedRows.slice(e,e+this.pageSize)}get totalPages(){return this.pageSize?Math.ceil(this.filteredRows.length/this.pageSize):1}get isAllSelected(){return this.filteredRows.length>0&&this.selectedRows.size===this.filteredRows.length}get isIndeterminate(){return this.selectedRows.size>0&&this.selectedRows.size<this.filteredRows.length}handleSort(e){this.sortKey===e?this.sortDirection=this.sortDirection==="asc"?"desc":"asc":(this.sortKey=e,this.sortDirection="asc"),this.emit("mz-sort",{detail:{key:this.sortKey,direction:this.sortDirection}})}handleSearch(e){this.searchQuery=e.target.value,this.currentPage=1}handleRowSelect(e){let a=new Set(this.selectedRows);a.has(e)?a.delete(e):a.add(e),this.selectedRows=a,this.emitSelection()}handleSelectAll(){if(this.isAllSelected)this.selectedRows=new Set;else{let e=new Set;this.filteredRows.forEach((a,l)=>e.add(l)),this.selectedRows=e}this.emitSelection()}emitSelection(){let e=[...this.selectedRows],a=e.map(l=>this.rows[l]).filter(Boolean);this.emit("mz-select",{detail:{selectedRows:e,rows:a}})}goToPage(e){this.currentPage=Math.max(1,Math.min(e,this.totalPages)),this.emit("mz-page-change",{detail:{page:this.currentPage}})}unsafeRender(e){return u(e)}render(){return s`
+      <div part="base" class="data-table">
+        ${this.searchable?s`
+              <div part="toolbar" class="data-table__toolbar">
+                <div class="data-table__search">
+                  <svg
+                    class="data-table__search-icon"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
+                  <input
+                    part="search"
+                    class="data-table__search-input"
+                    type="text"
+                    placeholder="Search..."
+                    .value=${this.searchQuery}
+                    @input=${this.handleSearch}
+                  />
+                </div>
+                ${this.selectable&&this.selectedRows.size>0?s`<span class="data-table__selection-count"
+                      >${this.selectedRows.size} selected</span
+                    >`:n}
+              </div>
+            `:n}
+
+        <div class="data-table__wrapper">
+          <table
+            part="table"
+            class=${c({"data-table__table":!0,"data-table__table--striped":this.striped,"data-table__table--bordered":this.bordered,"data-table__table--hoverable":this.hoverable})}
+          >
+            <thead>
+              <tr>
+                ${this.selectable?s`
+                      <th class="data-table__th data-table__th--checkbox">
+                        <input
+                          type="checkbox"
+                          .checked=${this.isAllSelected}
+                          .indeterminate=${this.isIndeterminate}
+                          @change=${this.handleSelectAll}
+                        />
+                      </th>
+                    `:n}
+                ${this.columns.map(e=>s`
+                    <th
+                      part="th"
+                      class=${c({"data-table__th":!0,"data-table__th--sortable":!!e.sortable,"data-table__th--sorted":this.sortKey===e.key,[`data-table__th--align-${e.align||"left"}`]:!0})}
+                      style=${e.width?`width: ${e.width}`:""}
+                      @click=${e.sortable?()=>this.handleSort(e.key):n}
+                    >
+                      <span>${e.label}</span>
+                      ${e.sortable?s`
+                            <span class="data-table__sort-icon">
+                              ${this.sortKey===e.key?this.sortDirection==="asc"?s`<svg
+                                      width="12"
+                                      height="12"
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                    >
+                                      <polyline points="18 15 12 9 6 15" />
+                                    </svg>`:s`<svg
+                                      width="12"
+                                      height="12"
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="currentColor"
+                                      stroke-width="2"
+                                    >
+                                      <polyline points="6 9 12 15 18 9" />
+                                    </svg>`:s`<svg
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    opacity="0.3"
+                                  >
+                                    <polyline points="18 15 12 9 6 15" />
+                                  </svg>`}
+                            </span>
+                          `:n}
+                    </th>
+                  `)}
+              </tr>
+            </thead>
+            <tbody>
+              ${this.paginatedRows.length===0?s`
+                    <tr>
+                      <td
+                        class="data-table__empty"
+                        colspan=${this.columns.length+(this.selectable?1:0)}
+                      >
+                        No data
+                      </td>
+                    </tr>
+                  `:this.paginatedRows.map((e,a)=>{let l=this.pageSize?(this.currentPage-1)*this.pageSize+a:a;return s`
+                      <tr
+                        part="row"
+                        class=${c({"data-table__tr":!0,"data-table__tr--selected":this.selectedRows.has(l)})}
+                      >
+                        ${this.selectable?s`
+                              <td class="data-table__td data-table__td--checkbox">
+                                <input
+                                  type="checkbox"
+                                  .checked=${this.selectedRows.has(l)}
+                                  @change=${()=>this.handleRowSelect(l)}
+                                />
+                              </td>
+                            `:n}
+                        ${this.columns.map(i=>s`
+                            <td
+                              part="td"
+                              class=${c({"data-table__td":!0,[`data-table__td--align-${i.align||"left"}`]:!0})}
+                            >
+                              ${i.render?this.unsafeRender(i.render(e[i.key],e)):e[i.key]??""}
+                            </td>
+                          `)}
+                      </tr>
+                    `})}
+            </tbody>
+          </table>
+        </div>
+
+        ${this.pageSize&&this.totalPages>1?s`
+              <div part="pagination" class="data-table__pagination">
+                <span class="data-table__page-info">
+                  ${(this.currentPage-1)*this.pageSize+1}–${Math.min(this.currentPage*this.pageSize,this.filteredRows.length)}
+                  of ${this.filteredRows.length}
+                </span>
+                <div class="data-table__page-controls">
+                  <button
+                    class="data-table__page-btn"
+                    type="button"
+                    ?disabled=${this.currentPage<=1}
+                    @click=${()=>this.goToPage(this.currentPage-1)}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <polyline points="15 18 9 12 15 6" />
+                    </svg>
+                  </button>
+                  <span class="data-table__page-number">
+                    Page ${this.currentPage} of ${this.totalPages}
+                  </span>
+                  <button
+                    class="data-table__page-btn"
+                    type="button"
+                    ?disabled=${this.currentPage>=this.totalPages}
+                    @click=${()=>this.goToPage(this.currentPage+1)}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            `:n}
+      </div>
+    `}};t.styles=b,r([o({attribute:!1})],t.prototype,"columns",2),r([o({attribute:!1})],t.prototype,"rows",2),r([o({type:Boolean,reflect:!0})],t.prototype,"selectable",2),r([o({type:Boolean,reflect:!0})],t.prototype,"striped",2),r([o({type:Boolean,reflect:!0})],t.prototype,"bordered",2),r([o({type:Boolean,reflect:!0})],t.prototype,"hoverable",2),r([o({type:Boolean,reflect:!0})],t.prototype,"searchable",2),r([o({type:Number,attribute:"page-size"})],t.prototype,"pageSize",2),r([o({attribute:"sort-key"})],t.prototype,"sortKey",2),r([o({attribute:"sort-direction"})],t.prototype,"sortDirection",2),r([p()],t.prototype,"searchQuery",2),r([p()],t.prototype,"currentPage",2),r([p()],t.prototype,"selectedRows",2);export{t as a};
+//# sourceMappingURL=chunk.B2HRJL4L.js.map