snice 3.1.0 → 3.2.0

package/dist/components/empty-state/snice-empty-state.js

@@ -0,0 +1,121 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, render, styles, dispatch, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);margin-bottom:var(--snice-spacing-lg,1.5rem);opacity:.5;line-height:1}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__title{font-size:var(--snice-font-size-xl, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-size:var(--snice-font-size-lg, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-size:var(--snice-font-size-2xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-dark,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}::slotted(*){margin-top:var(--snice-spacing-md,1rem)}";
+
+let SniceEmptyState = (() => {
+    let _classDecorators = [element('snice-empty-state')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _actionText_decorators;
+    let _actionText_initializers = [];
+    let _actionText_extraInitializers = [];
+    let _actionHref_decorators;
+    let _actionHref_initializers = [];
+    let _actionHref_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    let _dispatchActionEvent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({})];
+            _icon_decorators = [property({})];
+            _title_decorators = [property({})];
+            _description_decorators = [property({})];
+            _actionText_decorators = [property({ attribute: 'action-text', })];
+            _actionHref_decorators = [property({ attribute: 'action-href', })];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            _dispatchActionEvent_decorators = [dispatch('@snice/empty-state-action', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchActionEvent_decorators, { kind: "method", name: "dispatchActionEvent", static: false, private: false, access: { has: obj => "dispatchActionEvent" in obj, get: obj => obj.dispatchActionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(null, null, _description_decorators, { kind: "field", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(null, null, _actionText_decorators, { kind: "field", name: "actionText", static: false, private: false, access: { has: obj => "actionText" in obj, get: obj => obj.actionText, set: (obj, value) => { obj.actionText = value; } }, metadata: _metadata }, _actionText_initializers, _actionText_extraInitializers);
+            __esDecorate(null, null, _actionHref_decorators, { kind: "field", name: "actionHref", static: false, private: false, access: { has: obj => "actionHref" in obj, get: obj => obj.actionHref, set: (obj, value) => { obj.actionHref = value; } }, metadata: _metadata }, _actionHref_initializers, _actionHref_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        renderContent() {
+            const emptyStateClasses = ['empty-state', `empty-state--${this.size}`].filter(Boolean).join(' ');
+            return html /*html*/ `
+      <div class="${emptyStateClasses}" part="container">
+        <div class="empty-state__icon" part="icon">${this.icon}</div>
+        <h3 class="empty-state__title" part="title">${this.title}</h3>
+        <if ${this.description}>
+          <p class="empty-state__description" part="description">${this.description}</p>
+        </if>
+        <if ${this.actionText}>
+          <case ${this.actionHref ? 'link' : 'button'}>
+            <when value="link">
+              <a
+                href="${this.actionHref}"
+                class="empty-state__action"
+                part="action"
+                @click=${this.handleActionClick}
+              >${this.actionText}</a>
+            </when>
+            <when value="button">
+              <button
+                class="empty-state__action"
+                part="action"
+                type="button"
+                @click=${this.handleActionClick}
+              >${this.actionText}</button>
+            </when>
+          </case>
+        </if>
+        <slot></slot>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        handleActionClick(e) {
+            if (!this.actionHref) {
+                e.preventDefault();
+            }
+            this.dispatchActionEvent();
+        }
+        dispatchActionEvent() {
+            return { emptyState: this };
+        }
+        constructor() {
+            super(...arguments);
+            this.size = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.icon = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _icon_initializers, '📭'));
+            this.title = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _title_initializers, 'No data'));
+            this.description = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _description_initializers, ''));
+            this.actionText = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _actionText_initializers, ''));
+            this.actionHref = (__runInitializers(this, _actionText_extraInitializers), __runInitializers(this, _actionHref_initializers, ''));
+            __runInitializers(this, _actionHref_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceEmptyState };
+//# sourceMappingURL=snice-empty-state.js.map

package/dist/components/empty-state/snice-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-empty-state.js","sources":["../../../components/empty-state/snice-empty-state.css?inline","../../../../components/empty-state/snice-empty-state.ts"],"sourcesContent":["export default \":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);margin-bottom:var(--snice-spacing-lg,1.5rem);opacity:.5;line-height:1}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__title{font-size:var(--snice-font-size-xl, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-size:var(--snice-font-size-lg, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-size:var(--snice-font-size-2xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-dark,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}::slotted(*){margin-top:var(--snice-spacing-md,1rem)}\";",null],"names":[],"mappings":"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"}

package/dist/components/empty-state/snice-empty-state.types.d.ts

@@ -0,0 +1,9 @@
+export type EmptyStateSize = 'small' | 'medium' | 'large';
+export interface SniceEmptyStateElement extends HTMLElement {
+    size: EmptyStateSize;
+    icon: string;
+    title: string;
+    description: string;
+    actionText: string;
+    actionHref: string;
+}

package/dist/components/file-upload/snice-file-upload.d.ts

@@ -0,0 +1,45 @@
+import type { FileUploadSize, FileUploadVariant, SniceFileUploadElement } from './snice-file-upload.types';
+export declare class SniceFileUpload extends HTMLElement implements SniceFileUploadElement {
+    internals: ElementInternals;
+    constructor();
+    size: FileUploadSize;
+    variant: FileUploadVariant;
+    accept: string;
+    multiple: boolean;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    label: string;
+    helperText: string;
+    errorText: string;
+    maxSize: number;
+    maxFiles: number;
+    name: string;
+    dragDrop: boolean;
+    showPreview: boolean;
+    input?: HTMLInputElement;
+    uploadArea?: HTMLElement;
+    private isDragOver;
+    private selectedFiles;
+    get files(): FileList | null;
+    renderContent(): import("snice").TemplateResult;
+    private renderFileItem;
+    componentStyles(): import("snice").CSSResult;
+    init(): void;
+    private handleAreaClick;
+    private handleButtonClick;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private handleFileChange;
+    private processFiles;
+    private handleRemoveFile;
+    private formatFileSize;
+    private updateFormValue;
+    private requestUpdate;
+    handleDisabledChange(): void;
+    private dispatchChangeEvent;
+    private dispatchErrorEvent;
+    clear(): void;
+    removeFile(index: number): void;
+}

package/dist/components/file-upload/snice-file-upload.js

@@ -0,0 +1,394 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, render, styles, ready, watch, dispatch, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.file-upload-wrapper{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.label{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-2xs,.25rem)}.label--required::after{content:' *';color:var(--snice-color-danger,rgb(220 38 38))}.upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-xl,2rem);border:2px dashed var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.375rem);background:var(--snice-color-background,rgb(255 255 255));cursor:pointer;transition:all var(--snice-transition-fast, 150ms);text-align:center}.upload-area:hover:not(.upload-area--disabled){border-color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-background-hover,rgb(249 250 251))}.upload-area--drag-over{border-color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-alpha,rgb(59 130 246 / .05))}.upload-area--disabled{opacity:.5;cursor:not-allowed}.upload-area--filled{background:var(--snice-color-background-secondary,rgb(243 244 246));border-style:solid}.upload-area--small{padding:var(--snice-spacing-md,1rem)}.upload-area--medium{padding:var(--snice-spacing-xl,2rem)}.upload-area--large{padding:var(--snice-spacing-2xl,3rem)}.upload-area--invalid{border-color:var(--snice-color-danger,rgb(220 38 38))}.upload-icon{font-size:var(--snice-font-size-3xl, 3rem);color:var(--snice-color-text-tertiary,rgb(115 115 115))}.upload-icon--small{font-size:var(--snice-font-size-2xl, 2rem)}.upload-icon--large{font-size:var(--snice-font-size-4xl, 4rem)}.upload-text{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.upload-button{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border:none;border-radius:var(--snice-border-radius-md,.375rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.upload-button:hover{background:var(--snice-color-primary-dark,rgb(29 78 216))}.upload-button--small{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .75rem)}.upload-button--large{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}.file-input{position:absolute;opacity:0;pointer-events:none}.file-list{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem);margin-top:var(--snice-spacing-md,1rem)}.file-item{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-background-secondary,rgb(243 244 246));border-radius:var(--snice-border-radius-md,.375rem);border:1px solid var(--snice-color-border,rgb(226 226 226))}.file-preview{width:40px;height:40px;border-radius:var(--snice-border-radius-sm,.25rem);object-fit:cover;background:var(--snice-color-background,rgb(255 255 255))}.file-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-lg, 1.5rem);background:var(--snice-color-background,rgb(255 255 255));border-radius:var(--snice-border-radius-sm,.25rem);border:1px solid var(--snice-color-border,rgb(226 226 226))}.file-info{flex:1;min-width:0}.file-name{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-tertiary,rgb(115 115 115))}.file-remove{padding:var(--snice-spacing-2xs,.25rem);background:0 0;border:none;color:var(--snice-color-text-tertiary,rgb(115 115 115));cursor:pointer;border-radius:var(--snice-border-radius-sm,.25rem);transition:all var(--snice-transition-fast, 150ms)}.file-remove:hover{background:var(--snice-color-background-hover,rgb(229 231 235));color:var(--snice-color-danger,rgb(220 38 38))}.error-text,.helper-text{font-size:var(--snice-font-size-xs, .75rem);margin-top:var(--snice-spacing-2xs,.25rem)}.helper-text{color:var(--snice-color-text-secondary,rgb(82 82 82))}.error-text{color:var(--snice-color-danger,rgb(220 38 38))}";
+
+let SniceFileUpload = (() => {
+    let _classDecorators = [element('snice-file-upload', { formAssociated: true })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _accept_decorators;
+    let _accept_initializers = [];
+    let _accept_extraInitializers = [];
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _errorText_decorators;
+    let _errorText_initializers = [];
+    let _errorText_extraInitializers = [];
+    let _maxSize_decorators;
+    let _maxSize_initializers = [];
+    let _maxSize_extraInitializers = [];
+    let _maxFiles_decorators;
+    let _maxFiles_initializers = [];
+    let _maxFiles_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _dragDrop_decorators;
+    let _dragDrop_initializers = [];
+    let _dragDrop_extraInitializers = [];
+    let _showPreview_decorators;
+    let _showPreview_initializers = [];
+    let _showPreview_extraInitializers = [];
+    let _input_decorators;
+    let _input_initializers = [];
+    let _input_extraInitializers = [];
+    let _uploadArea_decorators;
+    let _uploadArea_initializers = [];
+    let _uploadArea_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    let _init_decorators;
+    let _handleDisabledChange_decorators;
+    let _dispatchChangeEvent_decorators;
+    let _dispatchErrorEvent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({})];
+            _variant_decorators = [property({})];
+            _accept_decorators = [property({})];
+            _multiple_decorators = [property({ type: Boolean, })];
+            _disabled_decorators = [property({ type: Boolean, })];
+            _required_decorators = [property({ type: Boolean, })];
+            _invalid_decorators = [property({ type: Boolean, })];
+            _label_decorators = [property({})];
+            _helperText_decorators = [property({ attribute: 'helper-text', })];
+            _errorText_decorators = [property({ attribute: 'error-text', })];
+            _maxSize_decorators = [property({ type: Number, attribute: 'max-size', })];
+            _maxFiles_decorators = [property({ type: Number, attribute: 'max-files', })];
+            _name_decorators = [property({})];
+            _dragDrop_decorators = [property({ type: Boolean, attribute: 'drag-drop', })];
+            _showPreview_decorators = [property({ type: Boolean, attribute: 'show-preview', })];
+            _input_decorators = [query('.file-input')];
+            _uploadArea_decorators = [query('.upload-area')];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _handleDisabledChange_decorators = [watch('disabled')];
+            _dispatchChangeEvent_decorators = [dispatch('@snice/file-upload-change', { bubbles: true, composed: true })];
+            _dispatchErrorEvent_decorators = [dispatch('@snice/file-upload-error', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchErrorEvent_decorators, { kind: "method", name: "dispatchErrorEvent", static: false, private: false, access: { has: obj => "dispatchErrorEvent" in obj, get: obj => obj.dispatchErrorEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _accept_decorators, { kind: "field", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
+            __esDecorate(null, null, _multiple_decorators, { kind: "field", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _helperText_decorators, { kind: "field", name: "helperText", static: false, private: false, access: { has: obj => "helperText" in obj, get: obj => obj.helperText, set: (obj, value) => { obj.helperText = value; } }, metadata: _metadata }, _helperText_initializers, _helperText_extraInitializers);
+            __esDecorate(null, null, _errorText_decorators, { kind: "field", name: "errorText", static: false, private: false, access: { has: obj => "errorText" in obj, get: obj => obj.errorText, set: (obj, value) => { obj.errorText = value; } }, metadata: _metadata }, _errorText_initializers, _errorText_extraInitializers);
+            __esDecorate(null, null, _maxSize_decorators, { kind: "field", name: "maxSize", static: false, private: false, access: { has: obj => "maxSize" in obj, get: obj => obj.maxSize, set: (obj, value) => { obj.maxSize = value; } }, metadata: _metadata }, _maxSize_initializers, _maxSize_extraInitializers);
+            __esDecorate(null, null, _maxFiles_decorators, { kind: "field", name: "maxFiles", static: false, private: false, access: { has: obj => "maxFiles" in obj, get: obj => obj.maxFiles, set: (obj, value) => { obj.maxFiles = value; } }, metadata: _metadata }, _maxFiles_initializers, _maxFiles_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _dragDrop_decorators, { kind: "field", name: "dragDrop", static: false, private: false, access: { has: obj => "dragDrop" in obj, get: obj => obj.dragDrop, set: (obj, value) => { obj.dragDrop = value; } }, metadata: _metadata }, _dragDrop_initializers, _dragDrop_extraInitializers);
+            __esDecorate(null, null, _showPreview_decorators, { kind: "field", name: "showPreview", static: false, private: false, access: { has: obj => "showPreview" in obj, get: obj => obj.showPreview, set: (obj, value) => { obj.showPreview = value; } }, metadata: _metadata }, _showPreview_initializers, _showPreview_extraInitializers);
+            __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
+            __esDecorate(null, null, _uploadArea_decorators, { kind: "field", name: "uploadArea", static: false, private: false, access: { has: obj => "uploadArea" in obj, get: obj => obj.uploadArea, set: (obj, value) => { obj.uploadArea = value; } }, metadata: _metadata }, _uploadArea_initializers, _uploadArea_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            super();
+            this.internals = __runInitializers(this, _instanceExtraInitializers);
+            this.size = __runInitializers(this, _size_initializers, 'medium');
+            this.variant = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _variant_initializers, 'outlined'));
+            this.accept = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _accept_initializers, ''));
+            this.multiple = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+            this.disabled = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
+            this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+            this.label = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _label_initializers, ''));
+            this.helperText = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _helperText_initializers, ''));
+            this.errorText = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _errorText_initializers, ''));
+            this.maxSize = (__runInitializers(this, _errorText_extraInitializers), __runInitializers(this, _maxSize_initializers, -1)); // in bytes
+            this.maxFiles = (__runInitializers(this, _maxSize_extraInitializers), __runInitializers(this, _maxFiles_initializers, -1));
+            this.name = (__runInitializers(this, _maxFiles_extraInitializers), __runInitializers(this, _name_initializers, ''));
+            this.dragDrop = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _dragDrop_initializers, true));
+            this.showPreview = (__runInitializers(this, _dragDrop_extraInitializers), __runInitializers(this, _showPreview_initializers, true));
+            this.input = (__runInitializers(this, _showPreview_extraInitializers), __runInitializers(this, _input_initializers, void 0));
+            this.uploadArea = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _uploadArea_initializers, void 0));
+            this.isDragOver = (__runInitializers(this, _uploadArea_extraInitializers), false);
+            this.selectedFiles = [];
+            if (typeof this.attachInternals == 'function') {
+                this.internals = this.attachInternals();
+            }
+        }
+        get files() {
+            return this.input?.files || null;
+        }
+        renderContent() {
+            const wrapperClasses = ['file-upload-wrapper'].filter(Boolean).join(' ');
+            const uploadAreaClasses = [
+                'upload-area',
+                `upload-area--${this.size}`,
+                this.variant === 'filled' ? 'upload-area--filled' : '',
+                this.disabled ? 'upload-area--disabled' : '',
+                this.isDragOver ? 'upload-area--drag-over' : '',
+                this.invalid ? 'upload-area--invalid' : ''
+            ].filter(Boolean).join(' ');
+            const labelClasses = ['label', this.required ? 'label--required' : ''].filter(Boolean).join(' ');
+            const iconClasses = ['upload-icon', `upload-icon--${this.size}`].filter(Boolean).join(' ');
+            const buttonClasses = ['upload-button', `upload-button--${this.size}`].filter(Boolean).join(' ');
+            return html /*html*/ `
+      <div class="${wrapperClasses}">
+        <if ${this.label}>
+          <label class="${labelClasses}">
+            ${this.label}
+          </label>
+        </if>
+
+        <div
+          class="${uploadAreaClasses}"
+          part="upload-area"
+          @click=${this.handleAreaClick}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
+          <div class="${iconClasses}">📁</div>
+          <div class="upload-text">
+            <if ${this.dragDrop}>
+              Drag and drop ${this.multiple ? 'files' : 'a file'} here or
+            </if>
+          </div>
+          <button
+            class="${buttonClasses}"
+            type="button"
+            ?disabled="${this.disabled}"
+            @click="${this.handleButtonClick}"
+          >
+            Choose ${this.multiple ? 'Files' : 'File'}
+          </button>
+
+          <input
+            class="file-input"
+            type="file"
+            accept="${this.accept}"
+            ?multiple="${this.multiple}"
+            ?disabled="${this.disabled}"
+            ?required="${this.required}"
+            name="${this.name || ''}"
+            @change=${this.handleFileChange}
+            part="input"
+          />
+        </div>
+
+        <if ${this.selectedFiles.length > 0}>
+          <div class="file-list">
+            ${this.selectedFiles.map((file, index) => this.renderFileItem(file, index))}
+          </div>
+        </if>
+
+        <case ${this.errorText ? 'error' : this.helperText ? 'helper' : 'empty'}>
+          <when value="error">
+            <span class="error-text" part="error-text">${this.errorText}</span>
+          </when>
+          <when value="helper">
+            <span class="helper-text" part="helper-text">${this.helperText}</span>
+          </when>
+          <default>
+            <span class="helper-text" part="helper-text">&nbsp;</span>
+          </default>
+        </case>
+      </div>
+    `;
+        }
+        renderFileItem(file, index) {
+            const isImage = file.type.startsWith('image/');
+            const fileUrl = isImage && this.showPreview ? URL.createObjectURL(file) : '';
+            const formattedSize = this.formatFileSize(file.size);
+            return html /*html*/ `
+      <div class="file-item" part="file-item">
+        <if ${isImage && this.showPreview}>
+          <img class="file-preview" src="${fileUrl}" alt="${file.name}" />
+        </if>
+        <if ${!isImage || !this.showPreview}>
+          <div class="file-icon">📄</div>
+        </if>
+
+        <div class="file-info">
+          <div class="file-name">${file.name}</div>
+          <div class="file-size">${formattedSize}</div>
+        </div>
+
+        <button
+          class="file-remove"
+          type="button"
+          @click=${() => this.handleRemoveFile(index)}
+          aria-label="Remove ${file.name}"
+        >
+          ✕
+        </button>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        init() {
+            if (this.internals) {
+                this.updateFormValue();
+            }
+        }
+        handleAreaClick(e) {
+            if (this.disabled)
+                return;
+            // Only trigger if clicking the area itself, not the button
+            if (e.target.classList.contains('upload-area')) {
+                this.input?.click();
+            }
+        }
+        handleButtonClick(e) {
+            e.stopPropagation();
+            if (!this.disabled) {
+                this.input?.click();
+            }
+        }
+        handleDragOver(e) {
+            if (!this.dragDrop || this.disabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.isDragOver = true;
+        }
+        handleDragLeave(e) {
+            if (!this.dragDrop || this.disabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.isDragOver = false;
+        }
+        handleDrop(e) {
+            if (!this.dragDrop || this.disabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.isDragOver = false;
+            const files = Array.from(e.dataTransfer?.files || []);
+            this.processFiles(files);
+        }
+        handleFileChange(e) {
+            const input = e.target;
+            const files = Array.from(input.files || []);
+            this.processFiles(files);
+        }
+        processFiles(files) {
+            let validFiles = files;
+            // Apply max files limit
+            if (this.maxFiles > 0) {
+                const available = this.maxFiles - this.selectedFiles.length;
+                validFiles = validFiles.slice(0, available);
+            }
+            // Validate file size
+            if (this.maxSize > 0) {
+                validFiles = validFiles.filter(file => {
+                    if (file.size > this.maxSize) {
+                        this.dispatchErrorEvent(`File "${file.name}" exceeds maximum size`);
+                        return false;
+                    }
+                    return true;
+                });
+            }
+            if (this.multiple) {
+                this.selectedFiles = [...this.selectedFiles, ...validFiles];
+            }
+            else {
+                this.selectedFiles = validFiles.slice(0, 1);
+            }
+            this.updateFormValue();
+            this.dispatchChangeEvent();
+            this.requestUpdate();
+        }
+        handleRemoveFile(index) {
+            this.removeFile(index);
+        }
+        formatFileSize(bytes) {
+            if (bytes === 0)
+                return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+        }
+        updateFormValue() {
+            if (!this.internals)
+                return;
+            const dataTransfer = new DataTransfer();
+            this.selectedFiles.forEach(file => {
+                dataTransfer.items.add(file);
+            });
+            this.internals.setFormValue(dataTransfer.files.length > 0 ? dataTransfer.files : null);
+        }
+        requestUpdate() {
+            // Trigger re-render
+            this.dispatchEvent(new CustomEvent('_internal-update', { bubbles: false }));
+        }
+        handleDisabledChange() {
+            if (this.input) {
+                this.input.disabled = this.disabled;
+            }
+        }
+        dispatchChangeEvent() {
+            return { files: this.selectedFiles, fileUpload: this };
+        }
+        dispatchErrorEvent(message) {
+            return { message, fileUpload: this };
+        }
+        // Public API
+        clear() {
+            this.selectedFiles = [];
+            if (this.input) {
+                this.input.value = '';
+            }
+            this.updateFormValue();
+            this.requestUpdate();
+        }
+        removeFile(index) {
+            if (index >= 0 && index < this.selectedFiles.length) {
+                this.selectedFiles.splice(index, 1);
+                this.updateFormValue();
+                this.dispatchChangeEvent();
+                this.requestUpdate();
+            }
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceFileUpload };
+//# sourceMappingURL=snice-file-upload.js.map