snice 2.1.4 → 2.2.0

package/dist/components/layout/snice-layout-sidebar.js

@@ -0,0 +1,74 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property } from 'snice';
+
+var css = '';
+
+let SniceLayoutSidebar = (() => {
+    let _classDecorators = [element('snice-layout-sidebar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _collapsed_decorators;
+    let _collapsed_initializers = [];
+    let _collapsed_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _collapsed_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(null, null, _collapsed_decorators, { kind: "field", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_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);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <aside class="sidebar">
+          <div class="sidebar-header">
+            <slot name="brand">
+              <h2>App</h2>
+            </slot>
+          </div>
+          <nav class="sidebar-nav">
+            <slot name="nav"></slot>
+          </nav>
+        </aside>
+        
+        <div class="content-area">
+          <header class="header">
+            <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+              </svg>
+            </button>
+            <slot name="header"></slot>
+          </header>
+          
+          <main class="main">
+            <slot></slot>
+          </main>
+          
+          <footer class="footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        constructor() {
+            super(...arguments);
+            this.collapsed = __runInitializers(this, _collapsed_initializers, false);
+            __runInitializers(this, _collapsed_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayoutSidebar };
+//# sourceMappingURL=snice-layout-sidebar.js.map

package/dist/components/layout/snice-layout-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-sidebar.js","sources":["../../../snice-layout-sidebar.css?inline","../../../../components/layout/snice-layout-sidebar.ts"],"sourcesContent":["export default '';",null],"names":[],"mappings":";;;AAAA,UAAe,EAAE;;ICIJ,kBAAkB,GAAA,CAAA,MAAA;4BAD9B,OAAO,CAAC,sBAAsB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;qCAChD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAC3C,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,WAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,WAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,SAAS,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAT,SAAS,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,4BAAA,CAAA;YAFX,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QAIX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YAxCA,IAAA,CAAA,SAAS,GAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,EAAG,KAAK,CAAA;;;;;;;;;"}

package/dist/components/layout/snice-layout-split.d.ts

@@ -0,0 +1,6 @@
+export declare class SniceLayoutSplit extends HTMLElement {
+    direction: 'horizontal' | 'vertical';
+    ratio: '50-50' | '60-40' | '70-30' | '33-67' | '67-33';
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-split.js

@@ -0,0 +1,58 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property } from 'snice';
+
+var css = '';
+
+let SniceLayoutSplit = (() => {
+    let _classDecorators = [element('snice-layout-split')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _ratio_decorators;
+    let _ratio_initializers = [];
+    let _ratio_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _direction_decorators = [property({ reflect: true })];
+            _ratio_decorators = [property({ reflect: true })];
+            __esDecorate(null, null, _direction_decorators, { kind: "field", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(null, null, _ratio_decorators, { kind: "field", name: "ratio", static: false, private: false, access: { has: obj => "ratio" in obj, get: obj => obj.ratio, set: (obj, value) => { obj.ratio = value; } }, metadata: _metadata }, _ratio_initializers, _ratio_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);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <div class="panel panel-left">
+          <slot name="left"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="panel panel-right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        constructor() {
+            super(...arguments);
+            this.direction = __runInitializers(this, _direction_initializers, 'horizontal');
+            this.ratio = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _ratio_initializers, '50-50'));
+            __runInitializers(this, _ratio_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayoutSplit };
+//# sourceMappingURL=snice-layout-split.js.map

package/dist/components/layout/snice-layout-split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-split.js","sources":["../../../snice-layout-split.css?inline","../../../../components/layout/snice-layout-split.ts"],"sourcesContent":["export default '';",null],"names":[],"mappings":";;;AAAA,UAAe,EAAE;;ICIJ,gBAAgB,GAAA,CAAA,MAAA;4BAD5B,OAAO,CAAC,oBAAoB,CAAC,CAAA;;;;sBACQ,WAAW;;;;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;AAC9C,YAAA,qBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;AAG3B,YAAA,iBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAF5B,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,WAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,WAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,SAAS,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAT,SAAS,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,4BAAA,CAAA;YAGT,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,OAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,KAAK,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAL,KAAK,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,mBAAA,EAAA,wBAAA,CAAA;YALP,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QAOX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;KAUd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YArBA,IAAA,CAAA,SAAS,GAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,EAA8B,YAAY,CAAA;YAGnD,IAAA,CAAA,KAAK,IAAA,iBAAA,CAAA,IAAA,EAAA,4BAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,mBAAA,EAAoD,OAAO,CAAA,CAAA;;;;;;;;;"}

package/dist/components/layout/snice-layout.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayout extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout.js

@@ -0,0 +1,54 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element } from 'snice';
+
+var css = '';
+
+let SniceLayout = (() => {
+    let _classDecorators = [element('snice-layout')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __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);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="brand">
+            <slot name="brand">
+              <h1>App</h1>
+            </slot>
+          </div>
+          <nav class="nav">
+            <slot name="nav"></slot>
+          </nav>
+        </header>
+        
+        <main class="main">
+          <slot></slot>
+        </main>
+        
+        <footer class="footer">
+          <slot name="footer">
+          </slot>
+        </footer>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayout };
+//# sourceMappingURL=snice-layout.js.map

package/dist/components/layout/snice-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout.js","sources":["../../../snice-layout.css?inline","../../../../components/layout/snice-layout.ts"],"sourcesContent":["export default '';",null],"names":[],"mappings":";;;AAAA,UAAe,EAAE;;ICIJ,WAAW,GAAA,CAAA,MAAA;4BADvB,OAAO,CAAC,cAAc,CAAC,CAAA;;;;sBACS,WAAW;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAA5C,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QACX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;;;;;;;;;;;;;KAsBd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;;;;;"}

package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts}

@@ -1,5 +1,3 @@
 import type { SniceElement } from 'snice';
-
 export interface SniceLayoutElement extends SniceElement {
-  // Add layout-specific properties and methods here as needed
-}
+}

package/dist/components/login/snice-login.d.ts

@@ -0,0 +1,44 @@
+import type { LoginVariant, LoginSize, LoginCredentials, SniceLoginElement } from './snice-login.types';
+import '../alert/snice-alert';
+import '../button/snice-button';
+export declare class SniceLogin extends HTMLElement implements SniceLoginElement {
+    variant: LoginVariant;
+    size: LoginSize;
+    title: string;
+    disabled: boolean;
+    loading: boolean;
+    showRememberMe: boolean;
+    showForgotPassword: boolean;
+    actionText: string;
+    form: HTMLFormElement;
+    usernameInput: HTMLInputElement;
+    passwordInput: HTMLInputElement;
+    rememberInput?: HTMLInputElement;
+    alertElement: HTMLElement;
+    buttonElement: HTMLElement;
+    inputElements: NodeListOf<HTMLInputElement>;
+    private alertMessage;
+    private alertVariant;
+    html(): string;
+    css(): string;
+    login(credentials?: LoginCredentials): any;
+    handleButtonClick(event: Event): Promise<void>;
+    handleSubmit(event: Event): Promise<{
+        username: string;
+        timestamp: string;
+    } | undefined>;
+    handleEnterKey(): void;
+    handleForgotPassword(event: Event): {
+        timestamp: string;
+    };
+    private dispatchLoginSuccess;
+    private dispatchLoginError;
+    private getFormData;
+    showAlert(message: string, variant: 'error' | 'success'): void;
+    clearAlert(): void;
+    private updateAlert;
+    private updateLoadingState;
+    setError(message: string): void;
+    clearError(): void;
+    reset(): void;
+}

package/dist/components/login/snice-login.js

@@ -0,0 +1,382 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, queryAll, request, on, dispatch } from 'snice';
+import '../alert/snice-alert.js';
+import '../button/snice-button.js';
+
+var css = '';
+
+let SniceLogin = (() => {
+    let _classDecorators = [element('snice-login')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _showRememberMe_decorators;
+    let _showRememberMe_initializers = [];
+    let _showRememberMe_extraInitializers = [];
+    let _showForgotPassword_decorators;
+    let _showForgotPassword_initializers = [];
+    let _showForgotPassword_extraInitializers = [];
+    let _actionText_decorators;
+    let _actionText_initializers = [];
+    let _actionText_extraInitializers = [];
+    let _form_decorators;
+    let _form_initializers = [];
+    let _form_extraInitializers = [];
+    let _usernameInput_decorators;
+    let _usernameInput_initializers = [];
+    let _usernameInput_extraInitializers = [];
+    let _passwordInput_decorators;
+    let _passwordInput_initializers = [];
+    let _passwordInput_extraInitializers = [];
+    let _rememberInput_decorators;
+    let _rememberInput_initializers = [];
+    let _rememberInput_extraInitializers = [];
+    let _alertElement_decorators;
+    let _alertElement_initializers = [];
+    let _alertElement_extraInitializers = [];
+    let _buttonElement_decorators;
+    let _buttonElement_initializers = [];
+    let _buttonElement_extraInitializers = [];
+    let _inputElements_decorators;
+    let _inputElements_initializers = [];
+    let _inputElements_extraInitializers = [];
+    let _login_decorators;
+    let _handleButtonClick_decorators;
+    let _handleSubmit_decorators;
+    let _handleEnterKey_decorators;
+    let _handleForgotPassword_decorators;
+    let _dispatchLoginSuccess_decorators;
+    let _dispatchLoginError_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.variant = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _variant_initializers, 'default'));
+            this.size = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.title = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _title_initializers, 'Sign In'));
+            this.disabled = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.loading = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _loading_initializers, false));
+            this.showRememberMe = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _showRememberMe_initializers, true));
+            this.showForgotPassword = (__runInitializers(this, _showRememberMe_extraInitializers), __runInitializers(this, _showForgotPassword_initializers, true));
+            this.actionText = (__runInitializers(this, _showForgotPassword_extraInitializers), __runInitializers(this, _actionText_initializers, 'Sign In'));
+            this.form = (__runInitializers(this, _actionText_extraInitializers), __runInitializers(this, _form_initializers, void 0));
+            this.usernameInput = (__runInitializers(this, _form_extraInitializers), __runInitializers(this, _usernameInput_initializers, void 0));
+            this.passwordInput = (__runInitializers(this, _usernameInput_extraInitializers), __runInitializers(this, _passwordInput_initializers, void 0));
+            this.rememberInput = (__runInitializers(this, _passwordInput_extraInitializers), __runInitializers(this, _rememberInput_initializers, void 0));
+            this.alertElement = (__runInitializers(this, _rememberInput_extraInitializers), __runInitializers(this, _alertElement_initializers, void 0));
+            this.buttonElement = (__runInitializers(this, _alertElement_extraInitializers), __runInitializers(this, _buttonElement_initializers, void 0));
+            this.inputElements = (__runInitializers(this, _buttonElement_extraInitializers), __runInitializers(this, _inputElements_initializers, void 0));
+            this.alertMessage = (__runInitializers(this, _inputElements_extraInitializers), '');
+            this.alertVariant = '';
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _variant_decorators = [property({ reflect: true })];
+            _size_decorators = [property({ reflect: true })];
+            _title_decorators = [property({ reflect: true })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _loading_decorators = [property({ type: Boolean, reflect: true })];
+            _showRememberMe_decorators = [property({ type: Boolean, reflect: true, attribute: 'show-remember-me' })];
+            _showForgotPassword_decorators = [property({ type: Boolean, reflect: true, attribute: 'show-forgot-password' })];
+            _actionText_decorators = [property({ reflect: true, attribute: 'action-text' })];
+            _form_decorators = [query('.login__form')];
+            _usernameInput_decorators = [query('input[name="username"]')];
+            _passwordInput_decorators = [query('input[name="password"]')];
+            _rememberInput_decorators = [query('input[name="remember"]')];
+            _alertElement_decorators = [query('snice-alert')];
+            _buttonElement_decorators = [query('snice-button')];
+            _inputElements_decorators = [queryAll('input')];
+            _login_decorators = [request('login-user')];
+            _handleButtonClick_decorators = [on('click', 'snice-button')];
+            _handleSubmit_decorators = [on('submit', '.login__form'), dispatch('@snice/login-attempt', { bubbles: true, composed: true })];
+            _handleEnterKey_decorators = [on('keydown:Enter', '.login__input')];
+            _handleForgotPassword_decorators = [on('click', '.login__forgot'), dispatch('@snice/login-forgot-password', { bubbles: true, composed: true })];
+            _dispatchLoginSuccess_decorators = [dispatch('@snice/login-success', { bubbles: true, composed: true })];
+            _dispatchLoginError_decorators = [dispatch('@snice/login-error', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _login_decorators, { kind: "method", name: "login", static: false, private: false, access: { has: obj => "login" in obj, get: obj => obj.login }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleButtonClick_decorators, { kind: "method", name: "handleButtonClick", static: false, private: false, access: { has: obj => "handleButtonClick" in obj, get: obj => obj.handleButtonClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSubmit_decorators, { kind: "method", name: "handleSubmit", static: false, private: false, access: { has: obj => "handleSubmit" in obj, get: obj => obj.handleSubmit }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleEnterKey_decorators, { kind: "method", name: "handleEnterKey", static: false, private: false, access: { has: obj => "handleEnterKey" in obj, get: obj => obj.handleEnterKey }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleForgotPassword_decorators, { kind: "method", name: "handleForgotPassword", static: false, private: false, access: { has: obj => "handleForgotPassword" in obj, get: obj => obj.handleForgotPassword }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchLoginSuccess_decorators, { kind: "method", name: "dispatchLoginSuccess", static: false, private: false, access: { has: obj => "dispatchLoginSuccess" in obj, get: obj => obj.dispatchLoginSuccess }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchLoginError_decorators, { kind: "method", name: "dispatchLoginError", static: false, private: false, access: { has: obj => "dispatchLoginError" in obj, get: obj => obj.dispatchLoginError }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __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, _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, _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, _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, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+            __esDecorate(null, null, _showRememberMe_decorators, { kind: "field", name: "showRememberMe", static: false, private: false, access: { has: obj => "showRememberMe" in obj, get: obj => obj.showRememberMe, set: (obj, value) => { obj.showRememberMe = value; } }, metadata: _metadata }, _showRememberMe_initializers, _showRememberMe_extraInitializers);
+            __esDecorate(null, null, _showForgotPassword_decorators, { kind: "field", name: "showForgotPassword", static: false, private: false, access: { has: obj => "showForgotPassword" in obj, get: obj => obj.showForgotPassword, set: (obj, value) => { obj.showForgotPassword = value; } }, metadata: _metadata }, _showForgotPassword_initializers, _showForgotPassword_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, _form_decorators, { kind: "field", name: "form", static: false, private: false, access: { has: obj => "form" in obj, get: obj => obj.form, set: (obj, value) => { obj.form = value; } }, metadata: _metadata }, _form_initializers, _form_extraInitializers);
+            __esDecorate(null, null, _usernameInput_decorators, { kind: "field", name: "usernameInput", static: false, private: false, access: { has: obj => "usernameInput" in obj, get: obj => obj.usernameInput, set: (obj, value) => { obj.usernameInput = value; } }, metadata: _metadata }, _usernameInput_initializers, _usernameInput_extraInitializers);
+            __esDecorate(null, null, _passwordInput_decorators, { kind: "field", name: "passwordInput", static: false, private: false, access: { has: obj => "passwordInput" in obj, get: obj => obj.passwordInput, set: (obj, value) => { obj.passwordInput = value; } }, metadata: _metadata }, _passwordInput_initializers, _passwordInput_extraInitializers);
+            __esDecorate(null, null, _rememberInput_decorators, { kind: "field", name: "rememberInput", static: false, private: false, access: { has: obj => "rememberInput" in obj, get: obj => obj.rememberInput, set: (obj, value) => { obj.rememberInput = value; } }, metadata: _metadata }, _rememberInput_initializers, _rememberInput_extraInitializers);
+            __esDecorate(null, null, _alertElement_decorators, { kind: "field", name: "alertElement", static: false, private: false, access: { has: obj => "alertElement" in obj, get: obj => obj.alertElement, set: (obj, value) => { obj.alertElement = value; } }, metadata: _metadata }, _alertElement_initializers, _alertElement_extraInitializers);
+            __esDecorate(null, null, _buttonElement_decorators, { kind: "field", name: "buttonElement", static: false, private: false, access: { has: obj => "buttonElement" in obj, get: obj => obj.buttonElement, set: (obj, value) => { obj.buttonElement = value; } }, metadata: _metadata }, _buttonElement_initializers, _buttonElement_extraInitializers);
+            __esDecorate(null, null, _inputElements_decorators, { kind: "field", name: "inputElements", static: false, private: false, access: { has: obj => "inputElements" in obj, get: obj => obj.inputElements, set: (obj, value) => { obj.inputElements = value; } }, metadata: _metadata }, _inputElements_initializers, _inputElements_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);
+        }
+        html() {
+            return /*html*/ `
+      <div class="login login--${this.variant} login--${this.size}">
+        <slot name="before-header"></slot>
+        
+        <div class="login__header">
+          <h1 class="login__title">${this.title}</h1>
+          <slot name="subtitle">
+            <p class="login__subtitle">Enter your credentials to continue</p>
+          </slot>
+        </div>
+        
+        <slot name="after-header"></slot>
+        <slot name="before-form"></slot>
+        
+        <form class="login__form">
+          <slot name="form-top"></slot>
+          
+          <div class="login__field">
+            <label class="login__label" for="username">Username</label>
+            <input 
+              class="login__input"
+              type="text" 
+              name="username" 
+              id="username"
+              required
+              autocomplete="username"
+              placeholder="Enter your username"
+              ${this.disabled || this.loading ? 'disabled' : ''}
+            />
+          </div>
+          
+          <slot name="between-fields"></slot>
+          
+          <div class="login__field">
+            <label class="login__label" for="password">Password</label>
+            <input 
+              class="login__input"
+              type="password" 
+              name="password" 
+              id="password"
+              required
+              autocomplete="current-password"
+              placeholder="Enter your password"
+              ${this.disabled || this.loading ? 'disabled' : ''}
+            />
+          </div>
+          
+          <div class="login__options" ${!this.showRememberMe && !this.showForgotPassword ? 'hidden' : ''}>
+            <label class="login__remember" ${!this.showRememberMe ? 'hidden' : ''}>
+              <input class="login__checkbox" type="checkbox" name="remember" ${this.disabled || this.loading ? 'disabled' : ''} />
+              Remember me
+            </label>
+            
+            <a href="#" class="login__forgot" ${!this.showForgotPassword ? 'hidden' : ''}>Forgot password?</a>
+          </div>
+          
+          <slot name="before-submit"></slot>
+          
+          <snice-button type="submit" variant="primary" ${this.disabled ? 'disabled' : ''} ${this.loading ? 'loading' : ''}>
+            ${this.actionText}
+          </snice-button>
+          
+          <slot name="after-submit"></slot>
+        </form>
+        
+        <slot name="after-form"></slot>
+        
+        <snice-alert variant="${this.alertVariant}" ${!this.alertMessage ? 'hidden' : ''}>${this.alertMessage}</snice-alert>
+        
+        <div class="login__footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        async *login(credentials) {
+            if (!credentials) {
+                credentials = this.getFormData();
+            }
+            if (!credentials.username || !credentials.password) {
+                return {
+                    success: false,
+                    error: 'Username and password are required'
+                };
+            }
+            try {
+                const result = await (yield credentials);
+                return result;
+            }
+            catch (error) {
+                return {
+                    success: false,
+                    error: error instanceof Error ? error.message : 'Login failed'
+                };
+            }
+        }
+        async handleButtonClick(event) {
+            event.preventDefault();
+            // Trigger form submit
+            if (this.form) {
+                this.form.requestSubmit();
+            }
+        }
+        async handleSubmit(event) {
+            event.preventDefault();
+            if (this.loading || this.disabled) {
+                return;
+            }
+            this.clearAlert();
+            this.loading = true;
+            this.updateLoadingState();
+            // Wait a tick to ensure the form is properly rendered
+            await new Promise(resolve => setTimeout(resolve, 0));
+            try {
+                const credentials = this.getFormData();
+                if (!credentials.username || !credentials.password) {
+                    this.showAlert('Username and password are required', 'error');
+                    return;
+                }
+                const result = await this.login(credentials);
+                if (result.success) {
+                    this.showAlert('Login successful!', 'success');
+                    this.dispatchLoginSuccess(result);
+                }
+                else {
+                    this.showAlert(result.error || 'Login failed', 'error');
+                    this.dispatchLoginError(result.error || 'Login failed');
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Login failed';
+                this.showAlert(errorMessage, 'error');
+                this.dispatchLoginError(errorMessage);
+            }
+            finally {
+                this.loading = false;
+                this.updateLoadingState();
+            }
+            const credentials = this.getFormData();
+            return {
+                username: credentials.username,
+                timestamp: new Date().toISOString()
+            };
+        }
+        handleEnterKey() {
+            if (!this.loading && !this.disabled && this.form) {
+                this.form.requestSubmit();
+            }
+        }
+        handleForgotPassword(event) {
+            event.preventDefault();
+            return {
+                timestamp: new Date().toISOString()
+            };
+        }
+        dispatchLoginSuccess(result) {
+            return { timestamp: new Date().toISOString() };
+        }
+        dispatchLoginError(error) {
+            return {
+                error,
+                timestamp: new Date().toISOString()
+            };
+        }
+        getFormData() {
+            const usernameInput = this.shadowRoot?.querySelector('#username');
+            const passwordInput = this.shadowRoot?.querySelector('#password');
+            const rememberInput = this.shadowRoot?.querySelector('input[name="remember"]');
+            return {
+                username: usernameInput?.value || '',
+                password: passwordInput?.value || '',
+                remember: rememberInput?.checked || false
+            };
+        }
+        showAlert(message, variant) {
+            this.alertMessage = message;
+            this.alertVariant = variant;
+            this.updateAlert();
+        }
+        clearAlert() {
+            this.alertMessage = '';
+            this.alertVariant = '';
+            this.updateAlert();
+        }
+        updateAlert() {
+            if (this.alertElement) {
+                this.alertElement.setAttribute('variant', this.alertVariant);
+                this.alertElement.textContent = this.alertMessage;
+                if (this.alertMessage) {
+                    this.alertElement.removeAttribute('hidden');
+                }
+                else {
+                    this.alertElement.setAttribute('hidden', '');
+                }
+            }
+        }
+        updateLoadingState() {
+            if (this.buttonElement) {
+                if (this.loading) {
+                    this.buttonElement.setAttribute('loading', '');
+                }
+                else {
+                    this.buttonElement.removeAttribute('loading');
+                }
+                if (this.disabled) {
+                    this.buttonElement.setAttribute('disabled', '');
+                }
+                else {
+                    this.buttonElement.removeAttribute('disabled');
+                }
+            }
+            this.inputElements?.forEach(input => {
+                if (this.disabled || this.loading) {
+                    input.setAttribute('disabled', '');
+                }
+                else {
+                    input.removeAttribute('disabled');
+                }
+            });
+        }
+        setError(message) {
+            this.showAlert(message, 'error');
+        }
+        clearError() {
+            this.clearAlert();
+        }
+        reset() {
+            if (this.form) {
+                this.form.reset();
+            }
+            this.clearAlert();
+            this.loading = false;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLogin };
+//# sourceMappingURL=snice-login.js.map