@api-client/ui 0.0.14 → 0.0.17

package/build/src/elements/environment/EnvironmentEditor.js

@@ -0,0 +1,515 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Environment, Server, RequestAuthorization, } from '@api-client/core/browser.js';
+import { live } from 'lit/directives/live.js';
+import ApiElement from '../ApiElement.js';
+import { Events } from '../../events/Events.js';
+import elementStyles from './EnvironmentEditor.styles.js';
+import { authTypeToLabel } from '../authorization/AuthLabels.js';
+import '../../define/environment/server-editor.js';
+import '../../define/environment/variables-editor.js';
+import '../../md/icons/ui-icon.js';
+import '../../md/text-field/ui-text-field.js';
+import '../../md/switch/ui-switch.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/button/ui-filled-tonal-button.js';
+import '../../md/divider/ui-divider.js';
+import '../../md/tabs/ui-tabs.js';
+import '../../md/tabs/ui-tab.js';
+import '../../define/authorization/basic-authorization.js';
+import '../../define/authorization/bearer-authorization.js';
+import '../../define/authorization/ntlm-authorization.js';
+import '../../define/authorization/apikey-authorization.js';
+import '../../define/authorization/oauth2-authorization.js';
+import '../../define/authorization/oidc-authorization.js';
+import '../../define/authorization/cc-authorization.js';
+let EnvironmentEditor = (() => {
+    let _classSuper = ApiElement;
+    let _environment_decorators;
+    let _environment_initializers = [];
+    let _environment_extraInitializers = [];
+    let _oauth2RedirectUri_decorators;
+    let _oauth2RedirectUri_initializers = [];
+    let _oauth2RedirectUri_extraInitializers = [];
+    let _encapsulateHelp_decorators;
+    let _encapsulateHelp_initializers = [];
+    let _encapsulateHelp_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    return class EnvironmentEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _environment_decorators = [property({ type: Object })];
+            _oauth2RedirectUri_decorators = [property({ type: String })];
+            _encapsulateHelp_decorators = [state()];
+            _selected_decorators = [property({ type: String })];
+            __esDecorate(this, null, _environment_decorators, { kind: "accessor", name: "environment", static: false, private: false, access: { has: obj => "environment" in obj, get: obj => obj.environment, set: (obj, value) => { obj.environment = value; } }, metadata: _metadata }, _environment_initializers, _environment_extraInitializers);
+            __esDecorate(this, null, _oauth2RedirectUri_decorators, { kind: "accessor", name: "oauth2RedirectUri", static: false, private: false, access: { has: obj => "oauth2RedirectUri" in obj, get: obj => obj.oauth2RedirectUri, set: (obj, value) => { obj.oauth2RedirectUri = value; } }, metadata: _metadata }, _oauth2RedirectUri_initializers, _oauth2RedirectUri_extraInitializers);
+            __esDecorate(this, null, _encapsulateHelp_decorators, { kind: "accessor", name: "encapsulateHelp", static: false, private: false, access: { has: obj => "encapsulateHelp" in obj, get: obj => obj.encapsulateHelp, set: (obj, value) => { obj.encapsulateHelp = value; } }, metadata: _metadata }, _encapsulateHelp_initializers, _encapsulateHelp_extraInitializers);
+            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static get styles() {
+            return [elementStyles];
+        }
+        #environment_accessor_storage = __runInitializers(this, _environment_initializers, new Environment().toJSON()
+        /**
+         * Redirect URL for the OAuth2 authorization.
+         * If can be also set by dispatching `oauth2-redirect-url-changed`
+         * with `value` property on the `detail` object.
+         * @attribute
+         */
+        );
+        /**
+         * The environment schema to edit.
+         */
+        get environment() { return this.#environment_accessor_storage; }
+        set environment(value) { this.#environment_accessor_storage = value; }
+        #oauth2RedirectUri_accessor_storage = (__runInitializers(this, _environment_extraInitializers), __runInitializers(this, _oauth2RedirectUri_initializers, void 0));
+        /**
+         * Redirect URL for the OAuth2 authorization.
+         * If can be also set by dispatching `oauth2-redirect-url-changed`
+         * with `value` property on the `detail` object.
+         * @attribute
+         */
+        get oauth2RedirectUri() { return this.#oauth2RedirectUri_accessor_storage; }
+        set oauth2RedirectUri(value) { this.#oauth2RedirectUri_accessor_storage = value; }
+        #encapsulateHelp_accessor_storage = (__runInitializers(this, _oauth2RedirectUri_extraInitializers), __runInitializers(this, _encapsulateHelp_initializers, void 0));
+        get encapsulateHelp() { return this.#encapsulateHelp_accessor_storage; }
+        set encapsulateHelp(value) { this.#encapsulateHelp_accessor_storage = value; }
+        #selected_accessor_storage = (__runInitializers(this, _encapsulateHelp_extraInitializers), __runInitializers(this, _selected_initializers, void 0));
+        /**
+         * @attribute
+         */
+        get selected() { return this.#selected_accessor_storage; }
+        set selected(value) { this.#selected_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _selected_extraInitializers);
+            this.encapsulateHelp = false;
+            this.selected = 'server';
+        }
+        updateName(value) {
+            this.environment.info.name = value;
+            this.notifyChange();
+            Events.HttpProject.State.nameChanged(this.environment.key, this.environment.kind, this);
+        }
+        updateEncapsulated(value) {
+            this.environment.encapsulated = value;
+            this.notifyChange();
+        }
+        deleteServer() {
+            this.environment.server = undefined;
+            this.requestUpdate();
+            this.notifyChange();
+        }
+        updateVariables(value) {
+            if (value) {
+                this.environment.variables = value;
+            }
+            this.notifyChange();
+            // when modifying variables they won't be reflected in the server editor.
+            const node = this.shadowRoot?.querySelector('server-editor');
+            if (node) {
+                node.generateValue();
+            }
+        }
+        handleServerChange(e) {
+            const editor = e.target;
+            const value = editor.getSchema();
+            this.environment.server = value;
+            this.notifyChange();
+        }
+        handleVariableChange(e) {
+            const editor = e.target;
+            const { variables } = editor;
+            this.updateVariables(variables);
+        }
+        _createServerHandler() {
+            const server = new Server();
+            this.environment.server = server.toJSON();
+            this.requestUpdate();
+        }
+        handleEncapsulatedChange(e) {
+            const input = e.target;
+            this.updateEncapsulated(!!input.checked);
+        }
+        handleNameChange(e) {
+            const input = e.target;
+            this.updateName(input.value);
+            input.checkValidity();
+        }
+        handleToggleHelp() {
+            this.encapsulateHelp = !this.encapsulateHelp;
+        }
+        handleServerDelete() {
+            this.deleteServer();
+        }
+        handleAuthAdd(e) {
+            const target = e.detail.item;
+            if (!target) {
+                return;
+            }
+            const selected = target.dataset.type;
+            if (!selected) {
+                return;
+            }
+            this.addAuthorization(selected);
+        }
+        /**
+         * Adds a new authorization object to the request for the given type.
+         *
+         * @returns The created instance of the authorization.
+         */
+        addAuthorization(type) {
+            const cnf = RequestAuthorization.fromTypedConfig(type, {}, false);
+            cnf.enabled = true;
+            if (!this.environment.authorization) {
+                this.environment.authorization = [];
+            }
+            this.environment.authorization.push(cnf.toJSON());
+            this.notifyChange();
+            this.requestUpdate();
+            return cnf;
+        }
+        handleAuthChange(e) {
+            const editor = e.target;
+            const { authorization } = editor;
+            this.updateAuthorization(authorization, editor.checkValidity());
+        }
+        handleAuthDelete(e) {
+            const editor = e.target;
+            const { authorization } = editor;
+            if (!authorization) {
+                return;
+            }
+            this.removeAuthorization(authorization.type);
+        }
+        /**
+         * Updates authorization schema on the editor.
+         * @param schema The new schema to replace the old one
+         * @param isValid Whether the schema is valid.
+         */
+        updateAuthorization(schema, isValid) {
+            const { authorization } = this.environment;
+            if (!authorization) {
+                return;
+            }
+            const index = authorization.findIndex((i) => i.type === schema.type);
+            if (index === -1) {
+                return;
+            }
+            schema.valid = isValid;
+            authorization[index] = schema;
+            this.notifyChange();
+        }
+        /**
+         * Removes authorization schema from the editor.
+         * @param type The authorization type to remove.
+         */
+        removeAuthorization(type) {
+            const { authorization } = this.environment;
+            if (!authorization) {
+                return;
+            }
+            const index = authorization.findIndex((i) => i.type === type);
+            if (index === -1) {
+                return;
+            }
+            authorization.splice(index, 1);
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        handleTabSelection(e) {
+            const { item } = e.detail;
+            const { page } = item.dataset;
+            if (!page) {
+                return;
+            }
+            this.selected = page;
+        }
+        render() {
+            return html ` ${this.renderHeader()} ${this.renderEnvironmentEditor()} ${this.renderTabs()} ${this.renderPage()} `;
+        }
+        renderHeader() {
+            return html `<div class="section-title">Environment</div>`;
+        }
+        renderPage() {
+            switch (this.selected) {
+                case 'authorization':
+                    return this.renderAuthorization();
+                case 'variables':
+                    return this.renderVariables();
+                default:
+                    return this.renderServerTemplate();
+            }
+        }
+        renderEnvironmentEditor() {
+            return html `
+      <section aria-label="Environment configuration">${this.renderNameInput()} ${this.renderEncapsulate()}</section>
+    `;
+        }
+        renderNameInput() {
+            const { environment } = this;
+            return html ` <div class="form-item">
+      <ui-text-field
+        name="name"
+        label="Environment name"
+        required
+        .value="${live(environment.info.name || '')}"
+        @change="${this.handleNameChange}"
+      ></ui-text-field>
+    </div>`;
+        }
+        renderEncapsulate() {
+            const { encapsulateHelp } = this;
+            return html `
+      <div class="encapsulate-item">${this.renderEncapsulateInput()} ${this.renderEncapsulateInfoToggle()}</div>
+      ${encapsulateHelp
+                ? html `
+            <div class="help-banner">
+              By default when running requests in a folder the application reads all environments up to the project
+              root. The variables are then combined into a single object. When <i>encapsulated</i> is enabled, the
+              program stops reading environments above the folder the environment is defined.
+            </div>
+          `
+                : ''}
+    `;
+        }
+        renderEncapsulateInput() {
+            const { environment } = this;
+            return html `
+      <label>
+        <ui-switch
+          name="encapsulated"
+          .checked="${environment.encapsulated || false}"
+          @change="${this.handleEncapsulatedChange}"
+          aria-label="Encapsulate the environment"
+        ></ui-switch>
+        Encapsulate the environment
+      </label>
+    `;
+        }
+        renderEncapsulateInfoToggle() {
+            return html `
+      <ui-icon-button aria-label="Show or hide help topic" @click="${this.handleToggleHelp}">
+        <ui-icon icon="info" role="presentation"></ui-icon>
+      </ui-icon-button>
+    `;
+        }
+        renderServerTemplate() {
+            const { server } = this.environment;
+            return html `
+      <section aria-label="Server information" id="server" class="editor-container">
+        ${server ? this.renderServerEditor(server) : this.renderNoServer()}
+      </section>
+    `;
+        }
+        renderNoServer() {
+            return html `
+      <div class="section-title">Server</div>
+      <p class="empty-info">No server defined.</p>
+      <ui-filled-tonal-button @click="${this._createServerHandler}">Create server</ui-filled-tonal-button>
+    `;
+        }
+        renderServerEditor(server) {
+            const { uri, basePath, description, protocol } = server;
+            return html `
+      <server-editor
+        .uri="${uri}"
+        .basePath="${basePath}"
+        .description="${description}"
+        .protocol="${protocol}"
+        .variables="${this.environment.variables}"
+        @change="${this.handleServerChange}"
+        @delete="${this.handleServerDelete}"
+      ></server-editor>
+    `;
+        }
+        renderVariables() {
+            return html `
+      <section aria-label="Variables" id="variables" class="editor-container">${this.renderVariablesEditor()}</section>
+    `;
+        }
+        renderVariablesEditor() {
+            const { variables } = this.environment;
+            return html `<variables-editor .variables="${variables}" @change="${this.handleVariableChange}"></variables-editor>`;
+        }
+        renderAuthorization() {
+            const { authorization = [] } = this.environment;
+            return html `
+      <section id="authorization" aria-label="Authorization" class="editor-container">
+        <div class="section-title">Authorization</div>
+        <p class="auth-info">
+          The authorization is applied to all requests in the current folder when the request is executed.
+        </p>
+        ${this.renderAuthorizationActions(authorization)} ${this.renderAuthorizationList(authorization)}
+      </section>
+    `;
+        }
+        renderAuthorizationActions(current = []) {
+            const all = ['basic', 'oauth 2', 'open id', 'bearer', 'api key', 'ntlm', 'client certificate'];
+            const toRender = all.filter((type) => !current.some((i) => i.type === type));
+            return html `
+      <ui-dropdown-list verticalAlign="top" @select="${this.handleAuthAdd}" class="auth-dropdown" closeOnOutsideClick>
+        <ui-filled-tonal-button
+          title="Add authorization option"
+          aria-label="Opens a menu to select authorization option"
+          ?disabled="${!toRender.length}"
+        >
+          <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
+          Add
+        </ui-filled-tonal-button>
+        <ui-list slot="dropdown" role="menu"> ${this.renderAuthorizationOptions(toRender)} </ui-list>
+      </ui-dropdown-list>
+    `;
+        }
+        renderAuthorizationOptions(available) {
+            return html `
+      ${available.map((type) => html ` <ui-list-item role="menuitem" data-type="${type}"> ${authTypeToLabel(type)} </ui-list-item> `)}
+    `;
+        }
+        renderAuthorizationList(authorization = []) {
+            if (!Array.isArray(authorization) || !authorization.length) {
+                return [this.renderEmptyAuthorization()];
+            }
+            return authorization.map((item, index) => {
+                let content;
+                switch (item.type) {
+                    case 'basic':
+                        content = this.renderBasicAuthorization(item);
+                        break;
+                    case 'bearer':
+                        content = this.renderBearerAuthorization(item);
+                        break;
+                    case 'ntlm':
+                        content = this.renderNtlmAuthorization(item);
+                        break;
+                    case 'oauth 2':
+                        content = this.renderOauthAuthorization(item);
+                        break;
+                    case 'open id':
+                        content = this.renderOidcAuthorization(item);
+                        break;
+                    case 'client certificate':
+                        content = this.renderCCAuthorization(item);
+                        break;
+                    case 'api key':
+                        content = this.renderApiKeyAuthorization(item);
+                        break;
+                    default:
+                }
+                if (content) {
+                    const isLast = authorization.length === index + 1;
+                    return html ` ${content} ${!isLast ? html `<ui-divider></ui-divider>` : ''} `;
+                }
+                return html ``;
+            });
+        }
+        renderEmptyAuthorization() {
+            return html ``;
+        }
+        renderBasicAuthorization(auth) {
+            return html `
+      <basic-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+      ></basic-authorization>
+    `;
+        }
+        renderBearerAuthorization(auth) {
+            return html `
+      <bearer-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+      ></bearer-authorization>
+    `;
+        }
+        renderNtlmAuthorization(auth) {
+            return html `
+      <ntlm-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+      ></ntlm-authorization>
+    `;
+        }
+        renderOauthAuthorization(auth) {
+            return html `
+      <oauth2-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+        .defaultRedirectUri="${this.oauth2RedirectUri}"
+      ></oauth2-authorization>
+    `;
+        }
+        renderOidcAuthorization(auth) {
+            return html `
+      <oidc-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+        .defaultRedirectUri="${this.oauth2RedirectUri}"
+      ></oidc-authorization>
+    `;
+        }
+        renderCCAuthorization(auth) {
+            return html `
+      <cc-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+      ></cc-authorization>
+    `;
+        }
+        renderApiKeyAuthorization(auth) {
+            return html `
+      <apikey-authorization
+        .authorization="${auth}"
+        class="auth-panel"
+        canDelete
+        canToggle
+        @change="${this.handleAuthChange}"
+        @delete="${this.handleAuthDelete}"
+      ></apikey-authorization>
+    `;
+        }
+        renderTabs() {
+            return html `
+      <ui-tabs .selected="${this.selected}" @select="${this.handleTabSelection}">
+        <ui-tab aria-controls="server" data-page="server">Server</ui-tab>
+        <ui-tab aria-controls="variables" data-page="variables">Variables</ui-tab>
+        <ui-tab aria-controls="authorization" data-page="authorization">Authorization</ui-tab>
+      </ui-tabs>
+    `;
+        }
+    };
+})();
+/**
+ * An element that renders a form to set up an environment.
+ */
+export default EnvironmentEditor;
+//# sourceMappingURL=EnvironmentEditor.js.map

package/build/src/elements/environment/EnvironmentEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentEditor.js","sourceRoot":"","sources":["../../../../src/elements/environment/EnvironmentEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, CSSResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport {\n  IEnvironment,\n  Environment,\n  IServer,\n  Server,\n  IProperty,\n  IRequestAuthorization,\n  AuthorizationType,\n  RequestAuthorization,\n} from '@api-client/core/browser.js'\nimport { live } from 'lit/directives/live.js'\nimport ApiElement from '../ApiElement.js'\nimport ServerEditor from './ServerEditor.js'\nimport VariablesEditor from './VariablesEditor.js'\nimport { Events } from '../../events/Events.js'\nimport Input from '../../md/input/Input.js'\nimport elementStyles from './EnvironmentEditor.styles.js'\nimport SwitchElement from '../../md/switch/internals/SwitchElement.js'\nimport { authTypeToLabel } from '../authorization/AuthLabels.js'\nimport { Authorization } from '../authorization/ui/Authorization.js'\nimport { TabSelectionDetail } from '../../md/tabs/internals/Tabs.js'\n\nimport '../../define/environment/server-editor.js'\nimport '../../define/environment/variables-editor.js'\nimport '../../md/icons/ui-icon.js'\nimport '../../md/text-field/ui-text-field.js'\nimport '../../md/switch/ui-switch.js'\nimport '../../md/icon-button/ui-icon-button.js'\nimport '../../md/button/ui-filled-tonal-button.js'\nimport '../../md/divider/ui-divider.js'\nimport '../../md/tabs/ui-tabs.js'\nimport '../../md/tabs/ui-tab.js'\nimport '../../define/authorization/basic-authorization.js'\nimport '../../define/authorization/bearer-authorization.js'\nimport '../../define/authorization/ntlm-authorization.js'\nimport '../../define/authorization/apikey-authorization.js'\nimport '../../define/authorization/oauth2-authorization.js'\nimport '../../define/authorization/oidc-authorization.js'\nimport '../../define/authorization/cc-authorization.js'\n\ntype EditorPage = 'server' | 'variables' | 'authorization'\n\n/**\n * An element that renders a form to set up an environment.\n */\nexport default class EnvironmentEditor extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [elementStyles]\n  }\n\n  /**\n   * The environment schema to edit.\n   */\n  @property({ type: Object }) accessor environment: IEnvironment = new Environment().toJSON()\n\n  /**\n   * Redirect URL for the OAuth2 authorization.\n   * If can be also set by dispatching `oauth2-redirect-url-changed`\n   * with `value` property on the `detail` object.\n   * @attribute\n   */\n  @property({ type: String }) accessor oauth2RedirectUri: string | undefined\n\n  @state() accessor encapsulateHelp: boolean\n\n  /**\n   * @attribute\n   */\n  @property({ type: String }) accessor selected: EditorPage\n\n  constructor() {\n    super()\n    this.encapsulateHelp = false\n    this.selected = 'server'\n  }\n\n  updateName(value: string): void {\n    this.environment.info.name = value\n    this.notifyChange()\n    Events.HttpProject.State.nameChanged(this.environment.key, this.environment.kind, this)\n  }\n\n  updateEncapsulated(value: boolean): void {\n    this.environment.encapsulated = value\n    this.notifyChange()\n  }\n\n  deleteServer(): void {\n    this.environment.server = undefined\n    this.requestUpdate()\n    this.notifyChange()\n  }\n\n  updateVariables(value?: IProperty[]): void {\n    if (value) {\n      this.environment.variables = value\n    }\n    this.notifyChange()\n    // when modifying variables they won't be reflected in the server editor.\n    const node = this.shadowRoot?.querySelector('server-editor')\n    if (node) {\n      node.generateValue()\n    }\n  }\n\n  protected handleServerChange(e: Event): void {\n    const editor = e.target as ServerEditor\n    const value = editor.getSchema()\n    this.environment.server = value\n    this.notifyChange()\n  }\n\n  protected handleVariableChange(e: Event): void {\n    const editor = e.target as VariablesEditor\n    const { variables } = editor\n    this.updateVariables(variables)\n  }\n\n  protected _createServerHandler(): void {\n    const server = new Server()\n    this.environment.server = server.toJSON()\n    this.requestUpdate()\n  }\n\n  protected handleEncapsulatedChange(e: Event): void {\n    const input = e.target as SwitchElement\n    this.updateEncapsulated(!!input.checked)\n  }\n\n  protected handleNameChange(e: Event): void {\n    const input = e.target as Input\n    this.updateName(input.value)\n    input.checkValidity()\n  }\n\n  protected handleToggleHelp(): void {\n    this.encapsulateHelp = !this.encapsulateHelp\n  }\n\n  protected handleServerDelete(): void {\n    this.deleteServer()\n  }\n\n  protected handleAuthAdd(e: CustomEvent): void {\n    const target = e.detail.item as HTMLElement | undefined\n    if (!target) {\n      return\n    }\n    const selected = target.dataset.type as AuthorizationType | undefined\n    if (!selected) {\n      return\n    }\n    this.addAuthorization(selected)\n  }\n\n  /**\n   * Adds a new authorization object to the request for the given type.\n   *\n   * @returns The created instance of the authorization.\n   */\n  addAuthorization(type: AuthorizationType): RequestAuthorization {\n    const cnf = RequestAuthorization.fromTypedConfig(type, {}, false)\n    cnf.enabled = true\n    if (!this.environment.authorization) {\n      this.environment.authorization = []\n    }\n    this.environment.authorization.push(cnf.toJSON())\n    this.notifyChange()\n    this.requestUpdate()\n    return cnf\n  }\n\n  protected handleAuthChange(e: Event): void {\n    const editor = e.target as Authorization\n    const { authorization } = editor\n    this.updateAuthorization(authorization as IRequestAuthorization, editor.checkValidity())\n  }\n\n  protected handleAuthDelete(e: Event): void {\n    const editor = e.target as Authorization\n    const { authorization } = editor\n    if (!authorization) {\n      return\n    }\n    this.removeAuthorization(authorization.type)\n  }\n\n  /**\n   * Updates authorization schema on the editor.\n   * @param schema The new schema to replace the old one\n   * @param isValid Whether the schema is valid.\n   */\n  updateAuthorization(schema: IRequestAuthorization, isValid: boolean): void {\n    const { authorization } = this.environment\n    if (!authorization) {\n      return\n    }\n    const index = authorization.findIndex((i) => i.type === schema.type)\n    if (index === -1) {\n      return\n    }\n    schema.valid = isValid\n    authorization[index] = schema\n    this.notifyChange()\n  }\n\n  /**\n   * Removes authorization schema from the editor.\n   * @param type The authorization type to remove.\n   */\n  removeAuthorization(type: string): void {\n    const { authorization } = this.environment\n    if (!authorization) {\n      return\n    }\n    const index = authorization.findIndex((i) => i.type === type)\n    if (index === -1) {\n      return\n    }\n    authorization.splice(index, 1)\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected handleTabSelection(e: CustomEvent<TabSelectionDetail>): void {\n    const { item } = e.detail\n    const { page } = item.dataset\n    if (!page) {\n      return\n    }\n    this.selected = page as EditorPage\n  }\n\n  protected override render(): TemplateResult {\n    return html` ${this.renderHeader()} ${this.renderEnvironmentEditor()} ${this.renderTabs()} ${this.renderPage()} `\n  }\n\n  protected renderHeader(): TemplateResult {\n    return html`<div class=\"section-title\">Environment</div>`\n  }\n\n  protected renderPage(): TemplateResult {\n    switch (this.selected) {\n      case 'authorization':\n        return this.renderAuthorization()\n      case 'variables':\n        return this.renderVariables()\n      default:\n        return this.renderServerTemplate()\n    }\n  }\n\n  protected renderEnvironmentEditor(): TemplateResult {\n    return html`\n      <section aria-label=\"Environment configuration\">${this.renderNameInput()} ${this.renderEncapsulate()}</section>\n    `\n  }\n\n  protected renderNameInput(): TemplateResult {\n    const { environment } = this\n    return html` <div class=\"form-item\">\n      <ui-text-field\n        name=\"name\"\n        label=\"Environment name\"\n        required\n        .value=\"${live(environment.info.name || '')}\"\n        @change=\"${this.handleNameChange}\"\n      ></ui-text-field>\n    </div>`\n  }\n\n  protected renderEncapsulate(): TemplateResult {\n    const { encapsulateHelp } = this\n    return html`\n      <div class=\"encapsulate-item\">${this.renderEncapsulateInput()} ${this.renderEncapsulateInfoToggle()}</div>\n      ${encapsulateHelp\n        ? html`\n            <div class=\"help-banner\">\n              By default when running requests in a folder the application reads all environments up to the project\n              root. The variables are then combined into a single object. When <i>encapsulated</i> is enabled, the\n              program stops reading environments above the folder the environment is defined.\n            </div>\n          `\n        : ''}\n    `\n  }\n\n  protected renderEncapsulateInput(): TemplateResult {\n    const { environment } = this\n    return html`\n      <label>\n        <ui-switch\n          name=\"encapsulated\"\n          .checked=\"${environment.encapsulated || false}\"\n          @change=\"${this.handleEncapsulatedChange}\"\n          aria-label=\"Encapsulate the environment\"\n        ></ui-switch>\n        Encapsulate the environment\n      </label>\n    `\n  }\n\n  protected renderEncapsulateInfoToggle(): TemplateResult {\n    return html`\n      <ui-icon-button aria-label=\"Show or hide help topic\" @click=\"${this.handleToggleHelp}\">\n        <ui-icon icon=\"info\" role=\"presentation\"></ui-icon>\n      </ui-icon-button>\n    `\n  }\n\n  protected renderServerTemplate(): TemplateResult {\n    const { server } = this.environment\n    return html`\n      <section aria-label=\"Server information\" id=\"server\" class=\"editor-container\">\n        ${server ? this.renderServerEditor(server) : this.renderNoServer()}\n      </section>\n    `\n  }\n\n  protected renderNoServer(): TemplateResult {\n    return html`\n      <div class=\"section-title\">Server</div>\n      <p class=\"empty-info\">No server defined.</p>\n      <ui-filled-tonal-button @click=\"${this._createServerHandler}\">Create server</ui-filled-tonal-button>\n    `\n  }\n\n  protected renderServerEditor(server: IServer): TemplateResult {\n    const { uri, basePath, description, protocol } = server\n    return html`\n      <server-editor\n        .uri=\"${uri}\"\n        .basePath=\"${basePath}\"\n        .description=\"${description}\"\n        .protocol=\"${protocol}\"\n        .variables=\"${this.environment.variables}\"\n        @change=\"${this.handleServerChange}\"\n        @delete=\"${this.handleServerDelete}\"\n      ></server-editor>\n    `\n  }\n\n  protected renderVariables(): TemplateResult {\n    return html`\n      <section aria-label=\"Variables\" id=\"variables\" class=\"editor-container\">${this.renderVariablesEditor()}</section>\n    `\n  }\n\n  protected renderVariablesEditor(): TemplateResult {\n    const { variables } = this.environment\n    return html`<variables-editor .variables=\"${variables}\" @change=\"${this.handleVariableChange}\"></variables-editor>`\n  }\n\n  protected renderAuthorization(): TemplateResult {\n    const { authorization = [] } = this.environment\n    return html`\n      <section id=\"authorization\" aria-label=\"Authorization\" class=\"editor-container\">\n        <div class=\"section-title\">Authorization</div>\n        <p class=\"auth-info\">\n          The authorization is applied to all requests in the current folder when the request is executed.\n        </p>\n        ${this.renderAuthorizationActions(authorization)} ${this.renderAuthorizationList(authorization)}\n      </section>\n    `\n  }\n\n  protected renderAuthorizationActions(current: IRequestAuthorization[] = []): TemplateResult {\n    const all = ['basic', 'oauth 2', 'open id', 'bearer', 'api key', 'ntlm', 'client certificate']\n    const toRender: string[] = all.filter((type) => !current.some((i) => i.type === type))\n    return html`\n      <ui-dropdown-list verticalAlign=\"top\" @select=\"${this.handleAuthAdd}\" class=\"auth-dropdown\" closeOnOutsideClick>\n        <ui-filled-tonal-button\n          title=\"Add authorization option\"\n          aria-label=\"Opens a menu to select authorization option\"\n          ?disabled=\"${!toRender.length}\"\n        >\n          <ui-icon icon=\"arrowDropDown\" slot=\"icon\" role=\"presentation\"></ui-icon>\n          Add\n        </ui-filled-tonal-button>\n        <ui-list slot=\"dropdown\" role=\"menu\"> ${this.renderAuthorizationOptions(toRender)} </ui-list>\n      </ui-dropdown-list>\n    `\n  }\n\n  protected renderAuthorizationOptions(available: string[]): TemplateResult {\n    return html`\n      ${available.map(\n        (type) => html` <ui-list-item role=\"menuitem\" data-type=\"${type}\"> ${authTypeToLabel(type)} </ui-list-item> `\n      )}\n    `\n  }\n\n  protected renderAuthorizationList(authorization: IRequestAuthorization[] = []): TemplateResult[] {\n    if (!Array.isArray(authorization) || !authorization.length) {\n      return [this.renderEmptyAuthorization()]\n    }\n    return authorization.map((item, index) => {\n      let content: TemplateResult | undefined\n      switch (item.type) {\n        case 'basic':\n          content = this.renderBasicAuthorization(item)\n          break\n        case 'bearer':\n          content = this.renderBearerAuthorization(item)\n          break\n        case 'ntlm':\n          content = this.renderNtlmAuthorization(item)\n          break\n        case 'oauth 2':\n          content = this.renderOauthAuthorization(item)\n          break\n        case 'open id':\n          content = this.renderOidcAuthorization(item)\n          break\n        case 'client certificate':\n          content = this.renderCCAuthorization(item)\n          break\n        case 'api key':\n          content = this.renderApiKeyAuthorization(item)\n          break\n        default:\n      }\n      if (content) {\n        const isLast = authorization.length === index + 1\n        return html` ${content} ${!isLast ? html`<ui-divider></ui-divider>` : ''} `\n      }\n      return html``\n    })\n  }\n\n  protected renderEmptyAuthorization(): TemplateResult {\n    return html``\n  }\n\n  protected renderBasicAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <basic-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n      ></basic-authorization>\n    `\n  }\n\n  protected renderBearerAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <bearer-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n      ></bearer-authorization>\n    `\n  }\n\n  protected renderNtlmAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <ntlm-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n      ></ntlm-authorization>\n    `\n  }\n\n  protected renderOauthAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <oauth2-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n        .defaultRedirectUri=\"${this.oauth2RedirectUri}\"\n      ></oauth2-authorization>\n    `\n  }\n\n  protected renderOidcAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <oidc-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n        .defaultRedirectUri=\"${this.oauth2RedirectUri}\"\n      ></oidc-authorization>\n    `\n  }\n\n  protected renderCCAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <cc-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n      ></cc-authorization>\n    `\n  }\n\n  protected renderApiKeyAuthorization(auth: IRequestAuthorization): TemplateResult {\n    return html`\n      <apikey-authorization\n        .authorization=\"${auth}\"\n        class=\"auth-panel\"\n        canDelete\n        canToggle\n        @change=\"${this.handleAuthChange}\"\n        @delete=\"${this.handleAuthDelete}\"\n      ></apikey-authorization>\n    `\n  }\n\n  protected renderTabs(): TemplateResult {\n    return html`\n      <ui-tabs .selected=\"${this.selected}\" @select=\"${this.handleTabSelection}\">\n        <ui-tab aria-controls=\"server\" data-page=\"server\">Server</ui-tab>\n        <ui-tab aria-controls=\"variables\" data-page=\"variables\">Variables</ui-tab>\n        <ui-tab aria-controls=\"authorization\" data-page=\"authorization\">Authorization</ui-tab>\n      </ui-tabs>\n    `\n  }\n}\n"]}

package/build/src/elements/environment/EnvironmentEditor.styles.d.ts.map

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

package/build/src/elements/environment/EnvironmentEditor.styles.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    max-width: 900px;
+  }
+
+  ui-text-field {
+    margin: 0;
+    width: 100%;
+  }
+
+  .section-title {
+    font-family: var(--md-sys-typescale-title-large-font);
+    font-weight: var(--md-sys-typescale-title-large-weight);
+    font-size: var(--md-sys-typescale-title-large-size);
+    letter-spacing: var(--md-sys-typescale-title-large-tracking);
+    line-height: var(--md-sys-typescale-title-large-height);
+
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    height: 48px;
+  }
+
+  .form-item,
+  .encapsulate-item {
+    margin-bottom: 20px;
+  }
+
+  .encapsulate-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .encapsulate-item label {
+    font-family: var(--md-sys-typescale-label-large-font);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    font-size: var(--md-sys-typescale-label-large-size);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+    line-height: var(--md-sys-typescale-label-large-height);
+  }
+
+  .empty-info,
+  .help-banner {
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+  }
+
+  .auth-info {
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    line-height: var(--md-sys-typescale-body-small-height);
+  }
+
+  ui-switch {
+    margin-right: 12px;
+  }
+
+  ui-divider {
+    margin: 40px 0;
+  }
+`;
+//# sourceMappingURL=EnvironmentEditor.styles.js.map

package/build/src/elements/environment/EnvironmentEditor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentEditor.styles.js","sourceRoot":"","sources":["../../../../src/elements/environment/EnvironmentEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    max-width: 900px;\n  }\n\n  ui-text-field {\n    margin: 0;\n    width: 100%;\n  }\n\n  .section-title {\n    font-family: var(--md-sys-typescale-title-large-font);\n    font-weight: var(--md-sys-typescale-title-large-weight);\n    font-size: var(--md-sys-typescale-title-large-size);\n    letter-spacing: var(--md-sys-typescale-title-large-tracking);\n    line-height: var(--md-sys-typescale-title-large-height);\n\n    display: flex;\n    align-items: center;\n    margin-bottom: 20px;\n    height: 48px;\n  }\n\n  .form-item,\n  .encapsulate-item {\n    margin-bottom: 20px;\n  }\n\n  .encapsulate-item {\n    display: flex;\n    align-items: center;\n  }\n\n  .encapsulate-item label {\n    font-family: var(--md-sys-typescale-label-large-font);\n    font-weight: var(--md-sys-typescale-label-large-weight);\n    font-size: var(--md-sys-typescale-label-large-size);\n    letter-spacing: var(--md-sys-typescale-label-large-tracking);\n    line-height: var(--md-sys-typescale-label-large-height);\n  }\n\n  .empty-info,\n  .help-banner {\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n  }\n\n  .auth-info {\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  ui-switch {\n    margin-right: 12px;\n  }\n\n  ui-divider {\n    margin: 40px 0;\n  }\n`\n"]}