var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); var _, done = false; for (var i = decorators.length - 1; i >= 0; i--) { var context = {}; for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; for (var p in contextIn.access) context.access[p] = contextIn.access[p]; context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); if (kind === "accessor") { if (result === void 0) continue; if (result === null || typeof result !== "object") throw new TypeError("Object expected"); if (_ = accept(result.get)) descriptor.get = _; if (_ = accept(result.set)) descriptor.set = _; if (_ = accept(result.init)) initializers.unshift(_); } else if (_ = accept(result)) { if (kind === "field") initializers.unshift(_); else descriptor[key] = _; } } if (target) Object.defineProperty(target, contextIn.name, descriptor); done = true; }; var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) { var useValue = arguments.length > 2; for (var i = 0; i < initializers.length; i++) { value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); } return useValue ? value : void 0; }; import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element'; let SzLoginView = (() => { let _classDecorators = [customElement('sz-login-view')]; let _classDescriptor; let _classExtraInitializers = []; let _classThis; let _classSuper = DeesElement; let _loading_decorators; let _loading_initializers = []; let _loading_extraInitializers = []; let _error_decorators; let _error_initializers = []; let _error_extraInitializers = []; let _title_decorators; let _title_initializers = []; let _title_extraInitializers = []; let _subtitle_decorators; let _subtitle_initializers = []; let _subtitle_extraInitializers = []; var SzLoginView = class extends _classSuper { static { _classThis = this; } static { const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0; _loading_decorators = [property({ type: Boolean })]; _error_decorators = [property({ type: String })]; _title_decorators = [property({ type: String })]; _subtitle_decorators = [property({ type: String })]; __esDecorate(this, null, _loading_decorators, { kind: "accessor", 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(this, null, _error_decorators, { kind: "accessor", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_extraInitializers); __esDecorate(this, null, _title_decorators, { kind: "accessor", 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(this, null, _subtitle_decorators, { kind: "accessor", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers); __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers); SzLoginView = _classThis = _classDescriptor.value; if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata }); } static demo = () => html `
`; #loading_accessor_storage = __runInitializers(this, _loading_initializers, false); get loading() { return this.#loading_accessor_storage; } set loading(value) { this.#loading_accessor_storage = value; } #error_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _error_initializers, '')); get error() { return this.#error_accessor_storage; } set error(value) { this.#error_accessor_storage = value; } #title_accessor_storage = (__runInitializers(this, _error_extraInitializers), __runInitializers(this, _title_initializers, 'serve.zone')); get title() { return this.#title_accessor_storage; } set title(value) { this.#title_accessor_storage = value; } #subtitle_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _subtitle_initializers, 'Sign in to your onebox')); get subtitle() { return this.#subtitle_accessor_storage; } set subtitle(value) { this.#subtitle_accessor_storage = value; } static styles = [ cssManager.defaultStyles, css ` :host { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; background: ${cssManager.bdTheme('#f4f4f5', '#09090b')}; } .login-container { width: 100%; max-width: 400px; padding: 24px; } .login-card { background: ${cssManager.bdTheme('#ffffff', '#18181b')}; border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; border-radius: 12px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .logo-section { text-align: center; margin-bottom: 32px; } .logo { width: 64px; height: 64px; background: ${cssManager.bdTheme('#18181b', '#fafafa')}; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .logo svg { width: 36px; height: 36px; color: ${cssManager.bdTheme('#fafafa', '#18181b')}; } .title { font-size: 24px; font-weight: 700; color: ${cssManager.bdTheme('#18181b', '#fafafa')}; margin-bottom: 4px; } .subtitle { font-size: 14px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; } .form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 14px; font-weight: 500; color: ${cssManager.bdTheme('#18181b', '#fafafa')}; } .form-input { width: 100%; padding: 12px 14px; background: ${cssManager.bdTheme('#ffffff', '#09090b')}; border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; border-radius: 8px; font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')}; outline: none; transition: border-color 200ms ease, box-shadow 200ms ease; box-sizing: border-box; } .form-input:focus { border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')}; box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.1)')}; } .form-input::placeholder { color: ${cssManager.bdTheme('#a1a1aa', '#52525b')}; } .form-input.error { border-color: ${cssManager.bdTheme('#ef4444', '#f87171')}; } .error-message { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: ${cssManager.bdTheme('#fef2f2', 'rgba(239, 68, 68, 0.1)')}; border: 1px solid ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.2)')}; border-radius: 8px; font-size: 14px; color: ${cssManager.bdTheme('#dc2626', '#f87171')}; } .error-message svg { width: 18px; height: 18px; flex-shrink: 0; } .submit-button { width: 100%; padding: 12px 20px; background: ${cssManager.bdTheme('#18181b', '#fafafa')}; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: ${cssManager.bdTheme('#fafafa', '#18181b')}; cursor: pointer; transition: opacity 200ms ease, transform 200ms ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-button:hover:not(:disabled) { opacity: 0.9; } .submit-button:active:not(:disabled) { transform: scale(0.98); } .submit-button:disabled { opacity: 0.6; cursor: not-allowed; } .spinner { width: 18px; height: 18px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .footer { margin-top: 24px; text-align: center; font-size: 13px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; } .footer a { color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')}; text-decoration: none; } .footer a:hover { text-decoration: underline; } `, ]; render() { return html `
${this.title}
${this.subtitle}
${this.error ? html `
${this.error}
` : ''}
`; } handleSubmit(e) { e.preventDefault(); const usernameInput = this.shadowRoot?.getElementById('username'); const passwordInput = this.shadowRoot?.getElementById('password'); if (!usernameInput || !passwordInput) return; const username = usernameInput.value.trim(); const password = passwordInput.value; if (!username || !password) { this.error = 'Please enter both username and password'; return; } this.error = ''; this.dispatchEvent(new CustomEvent('login', { detail: { username, password }, bubbles: true, composed: true, })); } clearForm() { const usernameInput = this.shadowRoot?.getElementById('username'); const passwordInput = this.shadowRoot?.getElementById('password'); if (usernameInput) usernameInput.value = ''; if (passwordInput) passwordInput.value = ''; this.error = ''; } focusUsername() { const usernameInput = this.shadowRoot?.getElementById('username'); if (usernameInput) usernameInput.focus(); } constructor() { super(...arguments); __runInitializers(this, _subtitle_extraInitializers); } static { __runInitializers(_classThis, _classExtraInitializers); } }; return SzLoginView = _classThis; })(); export { SzLoginView }; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otbG9naW4tdmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zei1sb2dpbi12aWV3LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLGFBQWEsRUFDYixJQUFJLEVBQ0osR0FBRyxFQUNILFVBQVUsRUFDVixRQUFRLEdBRVQsTUFBTSw2QkFBNkIsQ0FBQztJQVN4QixXQUFXOzRCQUR2QixhQUFhLENBQUMsZUFBZSxDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7MkJBQW5CLFNBQVEsV0FBVzs7OzttQ0FPekMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO2lDQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7aUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBUjNCLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQWtCO1lBR3pDLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQWM7WUFHbkMsb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBd0I7WUFHN0MsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBb0M7WUFqQjlELDZLQXVUQzs7OztRQXRUUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7OztHQUk5QixDQUFDO1FBR0YsMkVBQW1DLEtBQUssRUFBQztRQUF6QyxJQUFnQixPQUFPLDZDQUFrQjtRQUF6QyxJQUFnQixPQUFPLG1EQUFrQjtRQUd6Qyw2SEFBZ0MsRUFBRSxHQUFDO1FBQW5DLElBQWdCLEtBQUssMkNBQWM7UUFBbkMsSUFBZ0IsS0FBSyxpREFBYztRQUduQywy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