chore: moving the http-method-label element

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
api-components · jarrodek · Oct 24, 2021 · Oct 9, 2021 · Oct 9, 2021 · Oct 10, 2021
commit 9f0ce0c4d667952f3d9f85c9d62e0b0960c8f2bc
diff --git a/demo/http-label.html b/demo/http-label.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>http-method-label demo</title>
+  <style>
+  html {
+    --http-method-label-options-background-color: #ff9c9c1f;
+    --http-method-label-options-color: #ff9c9c;
+    --http-method-label-head-background-color: rgba(0, 150, 136, 0.12);
+    --http-method-label-head-color: rgba(0, 150, 136, 1);
+    --http-method-label-trace-background-color: rgba(76, 175, 80, 0.12);
+    --http-method-label-trace-color: #4CAF50;
+  }
+  .vertical-section-container {
+    max-width: 600px;
+  }
+  </style>
+
+  <script type="module">
+  import '../http-method-label.js';
+  import '@advanced-rest-client/arc-demo-helper/arc-demo-helper.js';
+  </script>
+</head>
+<body unresolved>
+  <div class="vertical-section-container centered">
+    <h3>The `http-method-label`</h3>
+    <arc-demo-helper>
+      <template>
+        <http-method-label method="get"></http-method-label>
+        <http-method-label method="POST"></http-method-label>
+        <http-method-label method="Put"></http-method-label>
+        <http-method-label method="delete"></http-method-label>
+        <http-method-label method="patch"></http-method-label>
+        <http-method-label method="options"></http-method-label>
+        <http-method-label method="head"></http-method-label>
+        <http-method-label method="trace"></http-method-label>
+        <http-method-label method="connect"></http-method-label>
+        <http-method-label method="publish"></http-method-label>
+        <http-method-label method="subscribe"></http-method-label>
+        <style>
+          http-method-label { margin-right: 12px; }
+        </style>
+      </template>
+    </arc-demo-helper>
+
+    <h3>Custom styling</h3>
+    <arc-demo-helper>
+      <template>
+        <http-method-label method="warning"></http-method-label>
+        <http-method-label method="danger"></http-method-label>
+        <style>
+        http-method-label[method="warning"] {
+          color: white;
+          background-color: orange;
+        }
+        http-method-label[method="danger"] {
+          color: white;
+          background-color: red;
+        }
+        </style>
+      </template>
+    </arc-demo-helper>
+  </div>
+</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -37,6 +37,8 @@ <h2>Documentation viewers</h2>
         <dd>A start page with API general info</dd>
         <dt><a href="server-selector.html">Api server selector</a></dt>
         <dd>An element to render a list of API servers</dd>
+        <dt><a href="http-label.html">HTTP operation label</a></dt>
+        <dd>An element to render a pill with HTTP operation name</dd>
       </dl>
       <h2>Request editor</h2>
       <dl>

diff --git a/http-method-label.d.ts b/http-method-label.d.ts
@@ -0,0 +1,7 @@
+import Element from './src/elements/HttpMethodLabelElement.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "http-method-label": Element;
+  }
+}
diff --git a/http-method-label.js b/http-method-label.js
@@ -0,0 +1,3 @@
+import Element from './src/elements/HttpMethodLabelElement.js';
+
+window.customElements.define('http-method-label', Element);
diff --git a/index.d.ts b/index.d.ts
@@ -16,6 +16,7 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
+export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
 export * from './src/events/EventTypes';
 export * from './src/events/RequestEvents';
 export * as InputCache from './src/lib/InputCache';
@@ -27,3 +28,4 @@ export { AmfSerializer } from './src/helpers/AmfSerializer';
 export { ns } from './src/helpers/Namespace';
 export * as Amf from './src/helpers/amf';
 export * as Api from './src/helpers/api';
+export * as HttpStyles from './src/elements/styles/HttpLabel';
diff --git a/index.js b/index.js
@@ -16,6 +16,7 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement.js';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
+export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/RequestEvents.js';
 export * as InputCache from './src/lib/InputCache.js';
@@ -24,3 +25,4 @@ export * as Utils from './src/lib/Utils.js';
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
 export { AmfSerializer } from './src/helpers/AmfSerializer.js';
 export { ns } from './src/helpers/Namespace.js';
+export * as HttpStyles from './src/elements/styles/HttpLabel.js';
diff --git a/src/elements/HttpMethodLabelElement.d.ts b/src/elements/HttpMethodLabelElement.d.ts
@@ -0,0 +1,43 @@
+import {LitElement, TemplateResult} from 'lit-element';
+
+export const updateAccessibility: unique symbol;
+
+/**
+ * The element displays a label for the HTTP method. If the method is one of the
+ * predefined methods then it will use predefined colors to mark the method.
+ *
+ * ### Example
+ *
+ * ```html
+ * <http-method-label method="GET"></http-method-label>
+ * ```
+ *
+ * If the method is not one of the predefined methods it can be styled using regular
+ * css.
+ *
+ * ```html
+ * <style>
+ * http-method-label[method="test"] {
+ *    color: white;
+ *    background-color: orange;
+ * }
+ * </style>
+ * <http-method-label method="TEST"></http-method-label>
+ * ```
+ */
+export default class HttpMethodLabelElement extends LitElement {
+  /**
+   * HTTP method name to display
+   * @attribute
+   */
+  method: string|undefined;
+  constructor();
+  render(): TemplateResult;
+
+  /**
+   * Updates "title" and `aria-label` attributes when method changes.
+   *
+   * @param method Current method
+   */
+  [updateAccessibility](method: string): void;
+}
diff --git a/src/elements/HttpMethodLabelElement.js b/src/elements/HttpMethodLabelElement.js
@@ -0,0 +1,154 @@
+/**
+@license
+Copyright 2016 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, css } from 'lit-element';
+import {
+  hostDefaultStyles,
+  labelCommon,
+  labelGet,
+  labelPost,
+  labelPut,
+  labelDelete,
+  labelPatch,
+  labelOptions,
+  labelHead,
+  labelTrace,
+  labelConnect,
+  labelSubscribe,
+  labelPublish,
+} from './styles/HttpLabel.js';
+
+/* eslint-disable max-len */
+/* eslint-disable class-methods-use-this */
+
+export const updateAccessibility = Symbol('updateAccessibility');
+
+/**
+ * The element displays a label for the HTTP method. If the method is one of the
+ * predefined methods then it will use predefined colors to mark the method.
+ *
+ * ### Example
+ *
+ * ```html
+ * <http-method-label method="GET"></http-method-label>
+ * ```
+ *
+ * If the method is not one of the predefined methods it can be styled using regular
+ * css.
+ *
+ * ```html
+ * <style>
+ * http-method-label[method="test"] {
+ *    color: white;
+ *    background-color: orange;
+ * }
+ * </style>
+ * <http-method-label method="TEST"></http-method-label>
+ * ```
+ */
+export default class HttpMethodLabelElement extends LitElement {
+  get styles() {
+    return css`
+      :host {
+        ${hostDefaultStyles}
+        ${labelCommon}
+      }
+
+      :host([method='get']) {
+        ${labelGet}
+      }
+
+      :host([method='post']) {
+        ${labelPost}
+      }
+
+      :host([method='put']) {
+        ${labelPut}
+      }
+
+      :host([method='delete']) {
+        ${labelDelete}
+      }
+
+      :host([method='patch']) {
+        ${labelPatch}
+      }
+
+      :host([method='options']) {
+        ${labelOptions}
+      }
+
+      :host([method='head']) {
+        ${labelHead}
+      }
+
+      :host([method='trace']) {
+        ${labelTrace}
+      }
+
+      :host([method='connect']) {
+        ${labelConnect}
+      }
+
+      :host([method='subscribe']) {
+        ${labelSubscribe}
+      }
+
+      :host([method='publish']) {
+        ${labelPublish}
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * HTTP method name to render
+       */
+      method: { type: String, reflect: true },
+    };
+  }
+
+  set method(value) {
+    const old = this._method;
+    if (old === value) {
+      return;
+    }
+    this._method = value;
+    this.requestUpdate('method', old);
+    this[updateAccessibility](value);
+  }
+
+  get method() {
+    return this._method;
+  }
+
+  render() {
+    const { styles, method } = this;
+    return html`<style>${styles}</style>${method}`;
+  }
+
+  /**
+   * Updates "title" and `aria-label` attributes when method changes.
+   * @param {string} method Current method
+   */
+  [updateAccessibility](method) {
+    if (!method) {
+      this.removeAttribute('title');
+      this.removeAttribute('aria-label');
+    } else {
+      this.setAttribute('title', method);
+      this.setAttribute('aria-label', method);
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Element from './src/elements/HttpMethodLabelElement.js';

		window.customElements.define('http-method-label', Element);