@api-client/ui 0.5.58 → 0.6.0

package/build/src/elements/setup/internals/LoginScreen.js

@@ -0,0 +1,181 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { github, google, linkedin } from './icons.js';
+let LoginScreen = (() => {
+    let _classSuper = LitElement;
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _google_decorators;
+    let _google_initializers = [];
+    let _google_extraInitializers = [];
+    let _linkedin_decorators;
+    let _linkedin_initializers = [];
+    let _linkedin_extraInitializers = [];
+    let _github_decorators;
+    let _github_initializers = [];
+    let _github_extraInitializers = [];
+    return class LoginScreen extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _loading_decorators = [property({ type: Boolean })];
+            _google_decorators = [property({ type: Boolean })];
+            _linkedin_decorators = [property({ type: Boolean })];
+            _github_decorators = [property({ type: Boolean })];
+            __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, _google_decorators, { kind: "accessor", name: "google", static: false, private: false, access: { has: obj => "google" in obj, get: obj => obj.google, set: (obj, value) => { obj.google = value; } }, metadata: _metadata }, _google_initializers, _google_extraInitializers);
+            __esDecorate(this, null, _linkedin_decorators, { kind: "accessor", name: "linkedin", static: false, private: false, access: { has: obj => "linkedin" in obj, get: obj => obj.linkedin, set: (obj, value) => { obj.linkedin = value; } }, metadata: _metadata }, _linkedin_initializers, _linkedin_extraInitializers);
+            __esDecorate(this, null, _github_decorators, { kind: "accessor", name: "github", static: false, private: false, access: { has: obj => "github" in obj, get: obj => obj.github, set: (obj, value) => { obj.github = value; } }, metadata: _metadata }, _github_initializers, _github_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #loading_accessor_storage = __runInitializers(this, _loading_initializers, false
+        /**
+         * When set it renders the Google login button. Disabled by default.
+         * @attribute
+         */
+        );
+        /**
+         * When true, shows a loading indicator instead of the login buttons.
+         * Set this while the authentication request is in progress.
+         */
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #google_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _google_initializers, false
+        /**
+         * When set it renders the LinkedIn login button. Disabled by default.
+         * @attribute
+         */
+        ));
+        /**
+         * When set it renders the Google login button. Disabled by default.
+         * @attribute
+         */
+        get google() { return this.#google_accessor_storage; }
+        set google(value) { this.#google_accessor_storage = value; }
+        #linkedin_accessor_storage = (__runInitializers(this, _google_extraInitializers), __runInitializers(this, _linkedin_initializers, false
+        /**
+         * When set it renders the GitHub login button. Disabled by default.
+         * @attribute
+         */
+        ));
+        /**
+         * When set it renders the LinkedIn login button. Disabled by default.
+         * @attribute
+         */
+        get linkedin() { return this.#linkedin_accessor_storage; }
+        set linkedin(value) { this.#linkedin_accessor_storage = value; }
+        #github_accessor_storage = (__runInitializers(this, _linkedin_extraInitializers), __runInitializers(this, _github_initializers, false
+        /**
+         * Dispatches the authentication event for the selected provider.
+         *
+         * @param provider The authentication provider to use.
+         */
+        ));
+        /**
+         * When set it renders the GitHub login button. Disabled by default.
+         * @attribute
+         */
+        get github() { return this.#github_accessor_storage; }
+        set github(value) { this.#github_accessor_storage = value; }
+        /**
+         * Dispatches the authentication event for the selected provider.
+         *
+         * @param provider The authentication provider to use.
+         */
+        dispatchAuth(provider) {
+            this.dispatchEvent(new CustomEvent('authenticate', {
+                detail: { provider },
+                bubbles: false,
+                composed: false,
+            }));
+        }
+        authenticateGoogle() {
+            this.dispatchAuth('google');
+        }
+        authenticateGithub() {
+            this.dispatchAuth('github');
+        }
+        authenticateLinkedin() {
+            this.dispatchAuth('linkedin');
+        }
+        render() {
+            return html `<div class="content">
+      <div class="slide login-slide">${this.renderInto()} ${this.renderLoginForm()}</div>
+    </div>`;
+        }
+        renderInto() {
+            return html ` <div class="intro">
+      <h1 class="display-medium">Welcome to API Now!</h1>
+      <p class="title-large">Sign in to your account.</p>
+    </div>`;
+        }
+        renderLoginForm() {
+            if (this.loading) {
+                return this.renderCheckingUser();
+            }
+            return html `<div class="login">
+      <p class="body-large">Sign up using</p>
+      <div class="login-option">${this.renderGoogleButton()}</div>
+      <div class="login-option">${this.renderGithubButton()}</div>
+      <div class="login-option">${this.renderLinkedinButton()}</div>
+    </div>`;
+        }
+        renderCheckingUser() {
+            return html `<div class="login">
+      <p class="body-large">Loading...</p>
+      <ui-progress indeterminate class="login-progress"></ui-progress>
+    </div>`;
+        }
+        renderGoogleButton() {
+            if (!this.google) {
+                return nothing;
+            }
+            return html `<ui-button class="auth-button google" color="outlined" @click="${this.authenticateGoogle}"
+      >${google} Google</ui-button
+    >`;
+        }
+        renderGithubButton() {
+            if (!this.github) {
+                return nothing;
+            }
+            return html `<ui-button class="auth-button github" color="outlined" @click="${this.authenticateGithub}"
+      >${github} Github</ui-button
+    >`;
+        }
+        renderLinkedinButton() {
+            if (!this.linkedin) {
+                return nothing;
+            }
+            return html `<ui-button class="auth-button linkedin" color="outlined" @click="${this.authenticateLinkedin}"
+      >${linkedin} LinkedIn</ui-button
+    >`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _github_extraInitializers);
+        }
+    };
+})();
+/**
+ * An App screen (HTML Element) allowing the user to log in via supported providers (Google, GitHub, LinkedIn).
+ *
+ * This component handles the UI for authentication options and the loading state.
+ * It does not implement actual authentication logic but delegates it via events.
+ *
+ * @fires authenticate - Dispatched when the user clicks on one of the authentication buttons.
+ *                       The detail object `CustomEvent<{ provider: AuthProviders }>` contains the selected provider.
+ *
+ * @example
+ * ```html
+ * <login-screen
+ *   .loading="${this.isLoggingIn}"
+ *   google
+ *   linkedin
+ *   github
+ *   @authenticate="${this.handleLogin}"
+ * ></login-screen>
+ * ```
+ */
+export default LoginScreen;
+//# sourceMappingURL=LoginScreen.js.map

package/build/src/elements/setup/internals/LoginScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginScreen.js","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/LoginScreen.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, LitElement, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport type { AuthProviders } from '@api-client/core/sdk/AuthSdk.js'\nimport { github, google, linkedin } from './icons.js'\n\n/**\n * An App screen (HTML Element) allowing the user to log in via supported providers (Google, GitHub, LinkedIn).\n *\n * This component handles the UI for authentication options and the loading state.\n * It does not implement actual authentication logic but delegates it via events.\n *\n * @fires authenticate - Dispatched when the user clicks on one of the authentication buttons.\n *                       The detail object `CustomEvent<{ provider: AuthProviders }>` contains the selected provider.\n *\n * @example\n * ```html\n * <login-screen\n *   .loading=\"${this.isLoggingIn}\"\n *   google\n *   linkedin\n *   github\n *   @authenticate=\"${this.handleLogin}\"\n * ></login-screen>\n * ```\n */\nexport default class LoginScreen extends LitElement {\n  /**\n   * When true, shows a loading indicator instead of the login buttons.\n   * Set this while the authentication request is in progress.\n   */\n  @property({ type: Boolean }) accessor loading = false\n\n  /**\n   * When set it renders the Google login button. Disabled by default.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor google = false\n\n  /**\n   * When set it renders the LinkedIn login button. Disabled by default.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor linkedin = false\n\n  /**\n   * When set it renders the GitHub login button. Disabled by default.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor github = false\n\n  /**\n   * Dispatches the authentication event for the selected provider.\n   *\n   * @param provider The authentication provider to use.\n   */\n  protected dispatchAuth(provider: AuthProviders): void {\n    this.dispatchEvent(\n      new CustomEvent('authenticate', {\n        detail: { provider },\n        bubbles: false,\n        composed: false,\n      })\n    )\n  }\n\n  protected authenticateGoogle(): void {\n    this.dispatchAuth('google')\n  }\n\n  protected authenticateGithub(): void {\n    this.dispatchAuth('github')\n  }\n\n  protected authenticateLinkedin(): void {\n    this.dispatchAuth('linkedin')\n  }\n\n  protected override render(): unknown {\n    return html`<div class=\"content\">\n      <div class=\"slide login-slide\">${this.renderInto()} ${this.renderLoginForm()}</div>\n    </div>`\n  }\n\n  protected renderInto(): TemplateResult {\n    return html` <div class=\"intro\">\n      <h1 class=\"display-medium\">Welcome to API Now!</h1>\n      <p class=\"title-large\">Sign in to your account.</p>\n    </div>`\n  }\n\n  protected renderLoginForm(): TemplateResult {\n    if (this.loading) {\n      return this.renderCheckingUser()\n    }\n    return html`<div class=\"login\">\n      <p class=\"body-large\">Sign up using</p>\n      <div class=\"login-option\">${this.renderGoogleButton()}</div>\n      <div class=\"login-option\">${this.renderGithubButton()}</div>\n      <div class=\"login-option\">${this.renderLinkedinButton()}</div>\n    </div>`\n  }\n\n  protected renderCheckingUser(): TemplateResult {\n    return html`<div class=\"login\">\n      <p class=\"body-large\">Loading...</p>\n      <ui-progress indeterminate class=\"login-progress\"></ui-progress>\n    </div>`\n  }\n\n  protected renderGoogleButton(): TemplateResult | typeof nothing {\n    if (!this.google) {\n      return nothing\n    }\n    return html`<ui-button class=\"auth-button google\" color=\"outlined\" @click=\"${this.authenticateGoogle}\"\n      >${google} Google</ui-button\n    >`\n  }\n\n  protected renderGithubButton(): TemplateResult | typeof nothing {\n    if (!this.github) {\n      return nothing\n    }\n    return html`<ui-button class=\"auth-button github\" color=\"outlined\" @click=\"${this.authenticateGithub}\"\n      >${github} Github</ui-button\n    >`\n  }\n\n  protected renderLinkedinButton(): TemplateResult | typeof nothing {\n    if (!this.linkedin) {\n      return nothing\n    }\n    return html`<ui-button class=\"auth-button linkedin\" color=\"outlined\" @click=\"${this.authenticateLinkedin}\"\n      >${linkedin} LinkedIn</ui-button\n    >`\n  }\n}\n"]}

package/build/src/elements/setup/internals/LoginScreen.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=LoginScreen.styles.d.ts.map

package/build/src/elements/setup/internals/LoginScreen.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginScreen.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/LoginScreen.styles.ts"],"names":[],"mappings":";AAEA,wBAAoB"}

package/build/src/elements/setup/internals/LoginScreen.styles.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export default css ``;
+//# sourceMappingURL=LoginScreen.styles.js.map

package/build/src/elements/setup/internals/LoginScreen.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginScreen.styles.js","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/LoginScreen.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA,EAAE,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css``\n"]}

package/build/src/elements/setup/internals/OrganizationCreateScreen.d.ts

@@ -0,0 +1,67 @@
+import { TemplateResult, LitElement, nothing } from 'lit';
+import { type IUser } from '../../../providers/user.js';
+export type OrgCreateReason = 'setup' | 'add';
+/**
+ * An App screen (HTML Element) allowing the user to create a new organization during the setup process.
+ *
+ * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
+ *
+ * @fires create - Dispatched when the user submits the form with a valid organization name.
+ *                 The event detail contains `{ organization: string }`.
+ * @fires cancel - Dispatched when the user cancels the operation (only available when `reason` is 'add').
+ *
+ * @example
+ * ```html
+ * <organization-create-screen
+ *   reason="setup"
+ *   @create="${this.handleCreate}"
+ * ></organization-create-screen>
+ * ```
+ */
+export default class OrganizationCreateScreen extends LitElement {
+    /**
+     * The current user information.
+     *
+     * This property consumes the `userContext`.
+     */
+    accessor user: IUser | undefined;
+    /**
+     * Computed user name for welcome message.
+     */
+    get userName(): string;
+    /**
+     * Computed intro message based on the reason for creating the organization.
+     */
+    get introMessage(): string;
+    /**
+     * Indicates whether the screen is in the loading state.
+     * @attribute
+     */
+    accessor loading: boolean;
+    /**
+     * The user-entered organization name. Can be set to pre-fill the input field.
+     * @attribute
+     */
+    accessor organization: string | undefined;
+    /**
+     * The reason for creating the organization, affecting the welcome message.
+     *
+     * Possible values are:
+     * - 'setup': for initial setup
+     * - 'add': for adding an additional organization
+     *
+     * @attribute
+     */
+    accessor reason: OrgCreateReason;
+    protected handleFormSubmit(e: SubmitEvent): void;
+    setupOrganization(organization: string): void;
+    protected handleCancel(): void;
+    render(): TemplateResult;
+    private renderWelcomeMessage;
+    protected renderForm(): TemplateResult;
+    protected renderInvitationInfo(): TemplateResult | typeof nothing;
+    protected renderOrganizationInput(): TemplateResult;
+    protected renderCancelButton(): TemplateResult | typeof nothing;
+    protected renderLoader(): TemplateResult;
+}
+//# sourceMappingURL=OrganizationCreateScreen.d.ts.map

package/build/src/elements/setup/internals/OrganizationCreateScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationCreateScreen.d.ts","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/OrganizationCreateScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAG/D,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAEpE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAA;AAE7C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,UAAU;IAC9D;;;;OAIG;IAGH,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;IAEhC;;OAEG;IACH,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAMzB;IAED;;;OAGG;IAC0B,QAAQ,CAAC,OAAO,UAAQ;IAErD;;;OAGG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IACrE;;;;;;;;OAQG;IACyB,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAU;IAEtE,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAUhD,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAW7C,SAAS,CAAC,YAAY,IAAI,IAAI;IAYrB,MAAM,IAAI,cAAc;IAUjC,OAAO,CAAC,oBAAoB;IAQ5B,SAAS,CAAC,UAAU,IAAI,cAAc;IAOtC,SAAS,CAAC,oBAAoB,IAAI,cAAc,GAAG,OAAO,OAAO;IASjE,SAAS,CAAC,uBAAuB,IAAI,cAAc;IAkBnD,SAAS,CAAC,kBAAkB,IAAI,cAAc,GAAG,OAAO,OAAO;IAO/D,SAAS,CAAC,YAAY,IAAI,cAAc;CAGzC"}

package/build/src/elements/setup/internals/OrganizationCreateScreen.js

@@ -0,0 +1,194 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { userContext } from '../../../providers/user.js';
+let OrganizationCreateScreen = (() => {
+    let _classSuper = LitElement;
+    let _user_decorators;
+    let _user_initializers = [];
+    let _user_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _organization_decorators;
+    let _organization_initializers = [];
+    let _organization_extraInitializers = [];
+    let _reason_decorators;
+    let _reason_initializers = [];
+    let _reason_extraInitializers = [];
+    return class OrganizationCreateScreen extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _user_decorators = [property({ type: Object, attribute: false }), consume({ context: userContext, subscribe: true })];
+            _loading_decorators = [property({ type: Boolean })];
+            _organization_decorators = [property({ type: String })];
+            _reason_decorators = [property({ type: String })];
+            __esDecorate(this, null, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_extraInitializers);
+            __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, _organization_decorators, { kind: "accessor", name: "organization", static: false, private: false, access: { has: obj => "organization" in obj, get: obj => obj.organization, set: (obj, value) => { obj.organization = value; } }, metadata: _metadata }, _organization_initializers, _organization_extraInitializers);
+            __esDecorate(this, null, _reason_decorators, { kind: "accessor", name: "reason", static: false, private: false, access: { has: obj => "reason" in obj, get: obj => obj.reason, set: (obj, value) => { obj.reason = value; } }, metadata: _metadata }, _reason_initializers, _reason_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #user_accessor_storage = __runInitializers(this, _user_initializers, void 0);
+        /**
+         * The current user information.
+         *
+         * This property consumes the `userContext`.
+         */
+        get user() { return this.#user_accessor_storage; }
+        set user(value) { this.#user_accessor_storage = value; }
+        /**
+         * Computed user name for welcome message.
+         */
+        get userName() {
+            return this.user?.name || '';
+        }
+        /**
+         * Computed intro message based on the reason for creating the organization.
+         */
+        get introMessage() {
+            if (this.reason === 'setup') {
+                // eslint-disable-next-line max-len
+                return 'Start with adding an organization to your account. Each organization you create has separate billing, teams, and APIs.';
+            }
+            return 'Each organization you create has separate billing, teams, and APIs.';
+        }
+        #loading_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _loading_initializers, false
+        /**
+         * The user-entered organization name. Can be set to pre-fill the input field.
+         * @attribute
+         */
+        ));
+        /**
+         * Indicates whether the screen is in the loading state.
+         * @attribute
+         */
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #organization_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _organization_initializers, void 0));
+        /**
+         * The user-entered organization name. Can be set to pre-fill the input field.
+         * @attribute
+         */
+        get organization() { return this.#organization_accessor_storage; }
+        set organization(value) { this.#organization_accessor_storage = value; }
+        #reason_accessor_storage = (__runInitializers(this, _organization_extraInitializers), __runInitializers(this, _reason_initializers, 'setup'));
+        /**
+         * The reason for creating the organization, affecting the welcome message.
+         *
+         * Possible values are:
+         * - 'setup': for initial setup
+         * - 'add': for adding an additional organization
+         *
+         * @attribute
+         */
+        get reason() { return this.#reason_accessor_storage; }
+        set reason(value) { this.#reason_accessor_storage = value; }
+        handleFormSubmit(e) {
+            e.preventDefault();
+            const form = e.target;
+            const organization = String(form.organization.value).trim();
+            if (!organization) {
+                return;
+            }
+            this.setupOrganization(organization);
+        }
+        setupOrganization(organization) {
+            this.organization = organization;
+            this.dispatchEvent(new CustomEvent('create', {
+                detail: { organization },
+                bubbles: false,
+                composed: false,
+            }));
+        }
+        handleCancel() {
+            if (this.reason !== 'add') {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('cancel', {
+                bubbles: false,
+                composed: false,
+            }));
+        }
+        render() {
+            return html `
+      <div class="content">
+        <div class="slide account-setup-slide">
+          ${this.renderWelcomeMessage()} ${this.loading ? this.renderLoader() : this.renderForm()}
+        </div>
+      </div>
+    `;
+        }
+        renderWelcomeMessage() {
+            const tagline = this.reason === 'setup' ? 'Setup your first organization' : 'Add another organization';
+            return html `
+      <h1 class="display-medium">Welcome ${this.userName}.</h1>
+      <p class="title-large">${tagline}.</p>
+    `;
+        }
+        renderForm() {
+            return html `
+      <p class="body-medium">${this.introMessage}</p>
+      ${this.renderOrganizationInput()} ${this.renderInvitationInfo()}
+    `;
+        }
+        renderInvitationInfo() {
+            if (this.reason !== 'setup') {
+                return nothing;
+            }
+            return html `<p class="body-small">
+      Expected to join an organization? Click on the registration link in the invitation email to get started.
+    </p>`;
+        }
+        renderOrganizationInput() {
+            const { organization = '' } = this;
+            return html `
+      <form class="org-name-form" @submit=${this.handleFormSubmit}>
+        <ui-outlined-text-field
+          label="Organization name"
+          name="organization"
+          autocomplete="organization"
+          required
+          class="org-input"
+          .value="${organization}"
+        ></ui-outlined-text-field>
+        <ui-button class="next" color="filled" type="submit">Next</ui-button>
+        ${this.renderCancelButton()}
+      </form>
+    `;
+        }
+        renderCancelButton() {
+            if (this.reason !== 'add') {
+                return nothing;
+            }
+            return html `<ui-button class="cancel" color="text" type="button" @click="${this.handleCancel}">Cancel</ui-button>`;
+        }
+        renderLoader() {
+            return html ` <ui-progress indeterminate class="login-progress" aria-label="Creating organization"></ui-progress> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _reason_extraInitializers);
+        }
+    };
+})();
+/**
+ * An App screen (HTML Element) allowing the user to create a new organization during the setup process.
+ *
+ * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
+ *
+ * @fires create - Dispatched when the user submits the form with a valid organization name.
+ *                 The event detail contains `{ organization: string }`.
+ * @fires cancel - Dispatched when the user cancels the operation (only available when `reason` is 'add').
+ *
+ * @example
+ * ```html
+ * <organization-create-screen
+ *   reason="setup"
+ *   @create="${this.handleCreate}"
+ * ></organization-create-screen>
+ * ```
+ */
+export default OrganizationCreateScreen;
+//# sourceMappingURL=OrganizationCreateScreen.js.map

package/build/src/elements/setup/internals/OrganizationCreateScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationCreateScreen.js","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/OrganizationCreateScreen.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, LitElement, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { userContext, type IUser } from '../../../providers/user.js'\n\nexport type OrgCreateReason = 'setup' | 'add'\n\n/**\n * An App screen (HTML Element) allowing the user to create a new organization during the setup process.\n *\n * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.\n *\n * @fires create - Dispatched when the user submits the form with a valid organization name.\n *                 The event detail contains `{ organization: string }`.\n * @fires cancel - Dispatched when the user cancels the operation (only available when `reason` is 'add').\n *\n * @example\n * ```html\n * <organization-create-screen\n *   reason=\"setup\"\n *   @create=\"${this.handleCreate}\"\n * ></organization-create-screen>\n * ```\n */\nexport default class OrganizationCreateScreen extends LitElement {\n  /**\n   * The current user information.\n   *\n   * This property consumes the `userContext`.\n   */\n  @property({ type: Object, attribute: false })\n  @consume({ context: userContext, subscribe: true })\n  accessor user: IUser | undefined\n\n  /**\n   * Computed user name for welcome message.\n   */\n  get userName(): string {\n    return this.user?.name || ''\n  }\n\n  /**\n   * Computed intro message based on the reason for creating the organization.\n   */\n  get introMessage(): string {\n    if (this.reason === 'setup') {\n      // eslint-disable-next-line max-len\n      return 'Start with adding an organization to your account. Each organization you create has separate billing, teams, and APIs.'\n    }\n    return 'Each organization you create has separate billing, teams, and APIs.'\n  }\n\n  /**\n   * Indicates whether the screen is in the loading state.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor loading = false\n\n  /**\n   * The user-entered organization name. Can be set to pre-fill the input field.\n   * @attribute\n   */\n  @property({ type: String }) accessor organization: string | undefined\n  /**\n   * The reason for creating the organization, affecting the welcome message.\n   *\n   * Possible values are:\n   * - 'setup': for initial setup\n   * - 'add': for adding an additional organization\n   *\n   * @attribute\n   */\n  @property({ type: String }) accessor reason: OrgCreateReason = 'setup'\n\n  protected handleFormSubmit(e: SubmitEvent): void {\n    e.preventDefault()\n    const form = e.target as HTMLFormElement\n    const organization = String(form.organization.value).trim()\n    if (!organization) {\n      return\n    }\n    this.setupOrganization(organization)\n  }\n\n  setupOrganization(organization: string): void {\n    this.organization = organization\n    this.dispatchEvent(\n      new CustomEvent('create', {\n        detail: { organization },\n        bubbles: false,\n        composed: false,\n      })\n    )\n  }\n\n  protected handleCancel(): void {\n    if (this.reason !== 'add') {\n      return\n    }\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        bubbles: false,\n        composed: false,\n      })\n    )\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <div class=\"content\">\n        <div class=\"slide account-setup-slide\">\n          ${this.renderWelcomeMessage()} ${this.loading ? this.renderLoader() : this.renderForm()}\n        </div>\n      </div>\n    `\n  }\n\n  private renderWelcomeMessage(): TemplateResult {\n    const tagline = this.reason === 'setup' ? 'Setup your first organization' : 'Add another organization'\n    return html`\n      <h1 class=\"display-medium\">Welcome ${this.userName}.</h1>\n      <p class=\"title-large\">${tagline}.</p>\n    `\n  }\n\n  protected renderForm(): TemplateResult {\n    return html`\n      <p class=\"body-medium\">${this.introMessage}</p>\n      ${this.renderOrganizationInput()} ${this.renderInvitationInfo()}\n    `\n  }\n\n  protected renderInvitationInfo(): TemplateResult | typeof nothing {\n    if (this.reason !== 'setup') {\n      return nothing\n    }\n    return html`<p class=\"body-small\">\n      Expected to join an organization? Click on the registration link in the invitation email to get started.\n    </p>`\n  }\n\n  protected renderOrganizationInput(): TemplateResult {\n    const { organization = '' } = this\n    return html`\n      <form class=\"org-name-form\" @submit=${this.handleFormSubmit}>\n        <ui-outlined-text-field\n          label=\"Organization name\"\n          name=\"organization\"\n          autocomplete=\"organization\"\n          required\n          class=\"org-input\"\n          .value=\"${organization}\"\n        ></ui-outlined-text-field>\n        <ui-button class=\"next\" color=\"filled\" type=\"submit\">Next</ui-button>\n        ${this.renderCancelButton()}\n      </form>\n    `\n  }\n\n  protected renderCancelButton(): TemplateResult | typeof nothing {\n    if (this.reason !== 'add') {\n      return nothing\n    }\n    return html`<ui-button class=\"cancel\" color=\"text\" type=\"button\" @click=\"${this.handleCancel}\">Cancel</ui-button>`\n  }\n\n  protected renderLoader(): TemplateResult {\n    return html` <ui-progress indeterminate class=\"login-progress\" aria-label=\"Creating organization\"></ui-progress> `\n  }\n}\n"]}

package/build/src/elements/setup/internals/OrganizationCreateScreen.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=OrganizationCreateScreen.styles.d.ts.map

package/build/src/elements/setup/internals/OrganizationCreateScreen.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationCreateScreen.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/OrganizationCreateScreen.styles.ts"],"names":[],"mappings":";AAEA,wBAAoB"}

package/build/src/elements/setup/internals/OrganizationCreateScreen.styles.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export default css ``;
+//# sourceMappingURL=OrganizationCreateScreen.styles.js.map

package/build/src/elements/setup/internals/OrganizationCreateScreen.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationCreateScreen.styles.js","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/OrganizationCreateScreen.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA,EAAE,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css``\n"]}

package/build/src/elements/setup/internals/OrganizationSelectionScreen.d.ts

@@ -0,0 +1,41 @@
+import { TemplateResult, LitElement } from 'lit';
+import type { IOrganization } from '@api-client/core/models/store/Organization.js';
+/**
+ * An App screen (HTML Element) allowing the user to select an organization.
+ * Primary use-case is during the initial setup when no organization is selected yet.
+ *
+ * Note, this element does not handle the actual API logic, it only provides the UI and dispatches events.
+ */
+export default class OrganizationSelectionScreen extends LitElement {
+    /**
+     * The list of organizations to select from.
+     *
+     * This property consumes the `organizationsContext`.
+     */
+    accessor organizations: IOrganization[] | undefined;
+    /**
+     * Indicates whether the screen is in the loading state.
+     * @attribute
+     */
+    accessor loading: boolean;
+    /**
+     * The currently selected organization key, if any. Can be used to pre-select an organization in the list.
+     * When the user makes a selection, an `organization-selected` event is dispatched and this property is updated.
+     * @attribute
+     */
+    accessor selected: string | undefined;
+    /**
+     * Handles the organization selection form submission.
+     * @param e The submit event
+     */
+    protected handleOrgSelection(e: SubmitEvent): Promise<void>;
+    /**
+     * Selects the organization and persists the state.
+     * @param organization The organization key to select
+     */
+    protected selectOrganization(organization: string): void;
+    render(): TemplateResult;
+    protected renderForm(): TemplateResult;
+    protected renderLoader(): TemplateResult;
+}
+//# sourceMappingURL=OrganizationSelectionScreen.d.ts.map

package/build/src/elements/setup/internals/OrganizationSelectionScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationSelectionScreen.d.ts","sourceRoot":"","sources":["../../../../../src/elements/setup/internals/OrganizationSelectionScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAA;AAMlF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,UAAU;IACjE;;;;OAIG;IAGH,QAAQ,CAAC,aAAa,EAAE,aAAa,EAAE,GAAG,SAAS,CAAA;IAEnD;;;OAGG;IAC0B,QAAQ,CAAC,OAAO,UAAQ;IAErD;;;;OAIG;IACyB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAEjE;;;OAGG;cACa,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAUjE;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAW/C,MAAM,IAAI,cAAc;IAWjC,SAAS,CAAC,UAAU,IAAI,cAAc;IAoBtC,SAAS,CAAC,YAAY,IAAI,cAAc;CAGzC"}