@api-client/ui 0.0.4 → 0.0.7

package/src/elements/dialog/SetCookieAction.element.ts

@@ -0,0 +1,183 @@
+import { TemplateResult, html, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { ISetCookieStep, SetCookieStep } from "@api-client/core/build/browser.js";
+import type { SameSiteValue } from "@api-client/core/build/src/cookies/CookieParser.js";
+import UiDialog from "../../ui/dialog/UiDialog.js";
+import type Input from '../../ui/input/Input.js';
+import type CheckboxElement from '../../ui/input/CheckboxElement.js';
+import '../../define/ui/ui-text-field.js';
+import '../../define/ui/ui-checkbox.js';
+
+/**
+ * A dialog used by the Flow builder to configure the Set Cookie action.
+ */
+export default class SetCookieAction extends UiDialog {
+  @property({ type: Object }) step?: ISetCookieStep;
+
+  override dialogValue: ISetCookieStep = new SetCookieStep().toJSON();
+
+  constructor() {
+    super();
+    this.dismissLabel = 'Cancel';
+    this.confirmLabel = 'Save';
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('step')) {
+      this.setupDialogValue();
+    }
+    super.willUpdate(cp);
+  }
+
+  protected setupDialogValue(): void {
+    const { step } = this;
+    if (!step) {
+      this.dialogValue = new SetCookieStep().toJSON();
+    } else {
+      this.dialogValue = new SetCookieStep(step).toJSON();
+    }
+  }
+
+  protected handleValueChange(e: Event): void {
+    const input = e.target as Input;
+    const name = input.name as 'name' | 'url' | 'expires';
+    this.dialogValue[name] = input.value;
+  }
+
+  protected handleBooleanChange(e: Event): void {
+    const input = e.target as CheckboxElement;
+    const name = input.name as 'hostOnly' | 'httpOnly' | 'secure' | 'session';
+    this.dialogValue[name] = input.checked as boolean;
+  }
+
+  protected handleSameSiteChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.sameSite = input.value as SameSiteValue;
+  }
+
+  override renderIcon(): TemplateResult {
+    const classes: ClassInfo = {
+      icon: true,
+      'with-icon': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
+    `;
+  }
+
+  override renderTitle(): TemplateResult {
+    const classes: ClassInfo = {
+      title: true,
+      'with-title': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="title"><span>Configure Set Cookie Action</span></div>
+    `;
+  }
+
+  override renderBody(): TemplateResult {
+    const { name = '', url = '', expires = '', hostOnly = false, httpOnly = false, sameSite = 'None', secure = false, session = false } = this.dialogValue;
+
+    return html`
+    <div class="content">
+      <div class="param-row">
+        <ui-text-field
+          name="name"
+          label="Cookie name"
+          type="text"
+          required
+          .value="${live(name)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="The name of the cookie to set."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="url"
+          label="Cookie URL"
+          type="url"
+          .value="${live(url)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="When the URL is not set then the request URL is used."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="expires"
+          label="Expires"
+          .value="${live(expires)}"
+          @change="${this.handleValueChange}"
+          class="input"
+          supportingText="A valid cookie date or relative time like 4d, 600s, etc."
+        ></ui-text-field>
+      </div>
+
+      <div class="param-row">
+        <ui-text-field
+          name="sameSite"
+          label="Same site"
+          .value="${live(sameSite)}"
+          @change="${this.handleSameSiteChange}"
+          class="input"
+          .list="${['Lax', 'Strict', 'None']}"
+        ></ui-text-field>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="hostOnly"
+            .checked="${hostOnly}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Host only cookie"
+          ></ui-checkbox>
+          Host only
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="httpOnly"
+            .checked="${httpOnly}"
+            @change="${this.handleBooleanChange}"
+            aria-label="HTTP only cookie"
+          ></ui-checkbox>
+          HTTP only
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="secure"
+            .checked="${secure}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Secure cookie"
+          ></ui-checkbox>
+          Secure
+        </label>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <ui-checkbox
+            name="session"
+            .checked="${session}"
+            @change="${this.handleBooleanChange}"
+            aria-label="Session cookie"
+          ></ui-checkbox>
+          Session
+        </label>
+      </div>
+
+    </div>
+    `;
+  }
+}

package/src/elements/environment/EnvironmentEditor.styles.ts

@@ -3,6 +3,7 @@ import { css } from 'lit';
 export default css`
 :host {
   display: block;
+  max-width: 900px;
 }
 
 ui-text-field {
@@ -19,7 +20,11 @@ ui-text-field {
   line-height: var(--md-sys-typescale-title-large-height);
   text-transform: var(--md-sys-typescale-title-large-text-transform);
   text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+  
+  display: flex;
+  align-items: center;
   margin-bottom: 20px;
+  height: 48px;
 }
 
 .form-item,

package/src/elements/environment/EnvironmentEditor.ts

@@ -1,14 +1,17 @@
-/* eslint-disable class-methods-use-this */
-import { LitElement, html, TemplateResult, CSSResult } from 'lit';
+import { html, TemplateResult, CSSResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { IEnvironment, Environment, IServer, Server, IProperty, IRequestAuthorization, AuthorizationType, RequestAuthorization } from '@api-client/core/build/browser.js';
 import { live } from 'lit/directives/live.js';
+import ApiElement from '../ApiElement.js';
 import ServerEditor from './ServerEditor.js';
 import VariablesEditor from './VariablesEditor.js';
 import { Events } from '../../events/Events.js';
 import Input from '../../ui/input/Input.js';
 import elementStyles from './EnvironmentEditor.styles.js';
 import SwitchElement from '../../ui/input/SwitchElement.js';
+import { authTypeToLabel } from '../authorization/AuthLabels.js';
+import { Authorization } from '../authorization/ui/Authorization.js';
+import { TabSelectionDetail } from '../../ui/tabs/UiTabs.js';
 import '../../define/environment/server-editor.js';
 import '../../define/environment/variables-editor.js';
 import '../../define/ui/ui-icon.js';
@@ -17,13 +20,22 @@ import '../../define/ui/ui-switch.js';
 import '../../define/ui/ui-icon-button.js';
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-divider.js';
-import { authTypeToLabel } from '../authorization/AuthLabels.js';
-import { Authorization } from '../authorization/ui/Authorization.js';
+import '../../define/ui/ui-tabs.js';
+import '../../define/ui/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';
+
+type EditorPage = 'server' | 'variables' | 'authorization';
 
 /**
  * An element that renders a form to set up an environment.
  */
-export default class EnvironmentEditor extends LitElement {
+export default class EnvironmentEditor extends ApiElement {
   static override get styles(): CSSResult[] {
     return [elementStyles];
   }
@@ -37,10 +49,22 @@ export default class EnvironmentEditor extends LitElement {
    * 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
    */
   @property({ type: String }) oauth2RedirectUri?: string;
 
-  @state() encapsulateHelp = false;
+  @state() encapsulateHelp: boolean;
+
+  /**
+   * @attribute
+   */
+  @property({ type: String }) selected: EditorPage;
+
+  constructor() {
+    super();
+    this.encapsulateHelp = false;
+    this.selected = 'server';
+  }
 
   updateName(value: string): void {
     this.environment.info.name = value;
@@ -71,10 +95,6 @@ export default class EnvironmentEditor extends LitElement {
     }
   }
 
-  protected notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   protected handleServerChange(e: Event): void {
     const editor = e.target as ServerEditor;
     const value = editor.getSchema();
@@ -195,16 +215,21 @@ export default class EnvironmentEditor extends LitElement {
     this.requestUpdate();
   }
 
+  protected handleTabSelection(e: CustomEvent<TabSelectionDetail>): void {
+    const { item } = e.detail;
+    const { page } = item.dataset;
+    if (!page) {
+      return;
+    }
+    this.selected = page as EditorPage;
+  }
+
   protected override render(): TemplateResult {
     return html`
     ${this.renderHeader()}
     ${this.renderEnvironmentEditor()}
-    <ui-divider></ui-divider>
-    ${this.renderServerTemplate()}
-    <ui-divider></ui-divider>
-    ${this.renderVariables()}
-    <ui-divider></ui-divider>
-    ${this.renderAuthorization()}
+    ${this.renderTabs()}
+    ${this.renderPage()}
     `;
   }
 
@@ -212,6 +237,14 @@ export default class EnvironmentEditor extends LitElement {
     return html`<div class="section-title">Environment</div>`;
   }
 
+  protected renderPage(): TemplateResult {
+    switch (this.selected) {
+      case 'authorization': return this.renderAuthorization();
+      case 'variables': return this.renderVariables();
+      default: return this.renderServerTemplate();
+    }
+  }
+
   protected renderEnvironmentEditor(): TemplateResult {
     return html`
     <section aria-label="Environment configuration">
@@ -279,7 +312,7 @@ export default class EnvironmentEditor extends LitElement {
   protected renderServerTemplate(): TemplateResult {
     const { server } = this.environment;
     return html`
-    <section aria-label="Server information">
+    <section aria-label="Server information" id="server" class="editor-container">
       ${server ? this.renderServerEditor(server) : this.renderNoServer()}
     </section>
     `;
@@ -310,7 +343,7 @@ export default class EnvironmentEditor extends LitElement {
 
   protected renderVariables(): TemplateResult {
     return html`
-    <section aria-label="Variables">
+    <section aria-label="Variables" id="variables" class="editor-container">
       ${this.renderVariablesEditor()}
     </section>
     `;
@@ -324,10 +357,12 @@ export default class EnvironmentEditor extends LitElement {
   protected renderAuthorization(): TemplateResult {
     const { authorization = [] } = this.environment;
     return html`
-    <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 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>
     `;
   }
 
@@ -403,6 +438,8 @@ export default class EnvironmentEditor extends LitElement {
     <basic-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></basic-authorization>
@@ -414,6 +451,8 @@ export default class EnvironmentEditor extends LitElement {
     <bearer-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></bearer-authorization>
@@ -425,6 +464,8 @@ export default class EnvironmentEditor extends LitElement {
     <ntlm-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></ntlm-authorization>
@@ -436,6 +477,8 @@ export default class EnvironmentEditor extends LitElement {
     <oauth2-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -448,6 +491,8 @@ export default class EnvironmentEditor extends LitElement {
     <oidc-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -460,6 +505,8 @@ export default class EnvironmentEditor extends LitElement {
     <cc-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></cc-authorization>
@@ -471,9 +518,21 @@ export default class EnvironmentEditor extends LitElement {
     <apikey-authorization
       .authorization="${auth}"
       class="auth-panel"
+      canDelete
+      canToggle
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></apikey-authorization>
     `;
   }
+
+  protected renderTabs(): TemplateResult {
+    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>
+    `;
+  }
 }

package/src/elements/environment/ServerEditor.ts

@@ -1,10 +1,10 @@
-/* eslint-disable class-methods-use-this */
-import { LitElement, html, TemplateResult, CSSResult, PropertyValues } from 'lit';
+import { html, TemplateResult, CSSResult, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { IServer, Server, IProperty } from '@api-client/core/build/browser.js';
 import elementStyles from './ServerEditor.styles.js';
 import Input from '../../ui/input/Input.js';
+import ApiElement from '../ApiElement.js';
 import '../../define/ui/ui-text-field.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-icon-button.js';
@@ -17,7 +17,7 @@ export const DefaultProtocols = ['http:', 'https:'];
  * @fires change - When a value change.
  * @fires delete - When the user requested server definition delete.
  */
-export default class ServerEditor extends LitElement {
+export default class ServerEditor extends ApiElement {
   static override get styles(): CSSResult[] {
     return [elementStyles];
   }
@@ -139,11 +139,7 @@ export default class ServerEditor extends LitElement {
     this.updateProperty('protocol', input.value);
     input.checkValidity();
   }
-
-  protected notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
+  
   protected handleDelete(): void {
     this.dispatchEvent(new Event('delete'));
   }

package/src/elements/environment/VariablesEditor.ts

@@ -49,7 +49,7 @@ export default class VariablesEditor extends ApiElement {
       return;
     }
     variables[index][field] = value;
-    this.notifyChanged();
+    this.notifyChange();
   }
 
   /**
@@ -61,7 +61,7 @@ export default class VariablesEditor extends ApiElement {
       return;
     }
     variables.splice(index, 1);
-    this.notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -78,11 +78,7 @@ export default class VariablesEditor extends ApiElement {
       return;
     }
     variable.enabled = enabled;
-    this.notifyChanged();
-  }
-  
-  protected notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   protected handleAddVariable(): void {

package/src/elements/highlight/Prism.styles.ts

@@ -15,10 +15,16 @@ export default css`
     line-height: 1.5;
     tab-size: 4;
     hyphens: auto;
-    background-color: var(--prism-container-background-color);
     display: block;
-    font-family: var(--font-code-family, monospace);
-    font-size: var(--font-code-font-size, 10pt);
+    
+    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    font-style: var(--md-sys-typescale-body-medium-font-family-style);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+    text-transform: var(--md-sys-typescale-body-medium-text-transform);
+    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
   }
 
   pre[class*='language-']::-moz-selection,
@@ -53,7 +59,8 @@ export default css`
 
   :not(pre) > code[class*='language-'],
   pre[class*='language-'] {
-    background: var(--prism-container-pre-background-color, #f5f2f0);
+    background: var(--md-sys-color-background, #f5f2f0);
+    color: var(--md-sys-color-on-background);
   }
   /* Inline code */
 
@@ -109,7 +116,7 @@ export default css`
   .language-css .token.string,
   .style .token.string {
     color: var(--code-operator-value-color, #a67f59);
-    background: var(--code-operator-value-background-color, hsla(0, 0%, 100%, 0.5));
+    background-color: var(--code-operator-value-background-color, hsla(0, 0%, 100%, 0.5));
   }
 
   .token.atrule,

package/src/elements/http/BodyEditor.ts

@@ -223,13 +223,6 @@ export default class BodyEditor extends ApiElement {
     this.valueInternal = file;
   }
 
-  /**
-   * Dispatches the `input` event
-   */
-  protected notifyInput(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   protected handleTypeChange(e: CustomEvent): void {
     const target = e.detail.item as HTMLElement | undefined;
     if (!target) {
@@ -255,28 +248,28 @@ export default class BodyEditor extends ApiElement {
         value = model[0].value;
       }
       this.value = value;
-      this.notifyInput();
+      this.notifyChange();
     }
     this.requestUpdate();
     await this.updateComplete;
     // this.notifyResize();
     if (id === 'file') {
       this.restoreFileModel();
-      this.notifyInput();
+      this.notifyChange();
     } else if (id === 'urlEncode') {
       const editor = (this.shadowRoot as ShadowRoot).querySelector('http-body-urlencoded-editor');
       if (!editor) {
         throw new Error(`Invalid state. The <http-body-urlencoded-editor> element was removed from the DOM.`);
       }
       this.value = editor.value;
-      this.notifyInput();
+      this.notifyChange();
     } else if (id === 'multipart') {
       const editor = (this.shadowRoot as ShadowRoot).querySelector('http-body-multipart-editor');
       if (!editor) {
         throw new Error(`Invalid state. The <http-body-multipart-editor> element was removed from the DOM.`);
       }
       this.value = editor.value;
-      this.notifyInput();
+      this.notifyChange();
     }
     this.dispatchEvent(new Event('select'));
   }
@@ -308,7 +301,7 @@ export default class BodyEditor extends ApiElement {
     const payload = await PayloadSerializer.stringifyFile(file);
     const model = [ payload ];
     this.setMetaModel('file', model);
-    this.notifyInput();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -318,7 +311,7 @@ export default class BodyEditor extends ApiElement {
   protected handleClearFile(): void {
     this.value = '';
     this.setMetaModel('file', []);
-    this.notifyInput();
+    this.notifyChange();
   }
 
   /**
@@ -378,7 +371,7 @@ export default class BodyEditor extends ApiElement {
       autoEncode: this.autoEncode,
     };
     this.setMetaModel('urlEncode', [info]);
-    this.notifyInput();
+    this.notifyChange();
     // do not request update here.
   }
 
@@ -392,7 +385,7 @@ export default class BodyEditor extends ApiElement {
     this.valueInternal = value;
     const model: IRawBody[] = [{ value: value as string }];
     this.setMetaModel('raw', model);
-    this.notifyInput();
+    this.notifyChange();
   }
 
   /**
@@ -405,7 +398,7 @@ export default class BodyEditor extends ApiElement {
     const { value, model } = editor;
     this.valueInternal = value;
     this.setMetaModel('multipart', model);
-    this.notifyInput();
+    this.notifyChange();
   }
 
   /**
@@ -511,7 +504,7 @@ export default class BodyEditor extends ApiElement {
         Events.Http.Request.State.contentTypeChange(type, this);
       }
     }
-    this.notifyInput();
+    this.notifyChange();
   }
 
   protected handleDragOver(e: DragEvent): void {

package/src/elements/http/BodyMultipartEditor.ts

@@ -1,24 +1,11 @@
 /* eslint-disable no-param-reassign */
-/* eslint-disable class-methods-use-this */
-/**
-@license
-Copyright 2020 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-import { LitElement, html, TemplateResult, nothing } from 'lit';
+import { html, TemplateResult, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IMultipartBody, ISafePayload, PayloadSerializer, IFileMeta, IBlobMeta, HttpDefinitions } from '@api-client/core/build/browser.js';
 import { live } from 'lit/directives/live.js';
 import SwitchElement from '../../ui/input/SwitchElement.js';
 import Input from '../../ui/input/Input.js';
+import ApiElement from '../ApiElement.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-switch.js';
 import '../../define/ui/ui-icon-button.js';
@@ -65,7 +52,7 @@ let mimeSuggestions: string[] = [];
  * the `value` property change. Because of that you should never set the value on the editor but only manipulate the 
  * `model` property.
  */
-export default class BodyMultipartEditor extends LitElement {
+export default class BodyMultipartEditor extends ApiElement {
   /**
    * When set the editor is in read only mode.
    * @attribute
@@ -235,10 +222,6 @@ export default class BodyMultipartEditor extends LitElement {
     this.requestUpdate();
   }
 
-  protected notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   /**
    * Removes all parameters.
    */