chore: adding importButton option

arc-archive · Dec 31, 2019 · 1b64287 · 1b64287
1 parent 766d0cb
commit 1b64287
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 10 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -7,7 +7,7 @@
       "properties": [
         {
           "name": "selected",
-          "type": "Booelan"
+          "type": "Boolean"
         },
         {
           "name": "type",
@@ -17,12 +17,20 @@
         },
         {
           "name": "hasItems",
-          "type": "Booelan",
+          "type": "Boolean",
           "readOnly": true
+        },
+        {
+          "name": "importButton",
+          "type": "Boolean"
         }
       ],
       "events": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "client-certificate-import"
+        }
+      ],
       "cssProperties": []
     }
   ]

diff --git a/demo/index.js b/demo/index.js
@@ -5,6 +5,9 @@ import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@advanced-rest-client/arc-models/client-certificate-model.js';
 import '@anypoint-web-components/anypoint-button/anypoint-button.js';
 import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@advanced-rest-client/client-certificates-panel/certificate-import.js';
+import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
+import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
 import '../cc-authorization-method.js';
 
 
@@ -17,6 +20,8 @@ class DemoPage extends ArcDemoPage {
       'outlined',
       'mainChangesCounter',
       'allowNone',
+      'allowImportButton',
+      'importOpened',
     ]);
     this._componentName = 'cc-authorization-method';
     this.demoStates = ['Filled', 'Outlined', 'Anypoint'];
@@ -28,6 +33,10 @@ class DemoPage extends ArcDemoPage {
     this._mainChangeHandler = this._mainChangeHandler.bind(this);
     this.generateData = this.generateData.bind(this);
     this.deleteData = this.deleteData.bind(this);
+    this._certImportHandler = this._certImportHandler.bind(this);
+    this._closeImportHandler = this._closeImportHandler.bind(this);
+
+    window.addEventListener('client-certificate-import', this._certImportHandler);
   }
 
   _toggleMainOption(e) {
@@ -66,6 +75,14 @@ class DemoPage extends ArcDemoPage {
     document.body.dispatchEvent(e);
   }
 
+  _certImportHandler() {
+    this.importOpened = true;
+  }
+
+  _closeImportHandler() {
+    this.importOpened = false;
+  }
+
   _demoTemplate() {
     const {
       demoStates,
@@ -75,6 +92,7 @@ class DemoPage extends ArcDemoPage {
       mainChangesCounter,
       demoState,
       allowNone,
+      allowImportButton,
     } = this;
     return html`
       <section class="documentation-section">
@@ -94,6 +112,7 @@ class DemoPage extends ArcDemoPage {
             ?compatibility="${compatibility}"
             ?outlined="${outlined}"
             ?none="${allowNone}"
+            ?importButton="${allowImportButton}"
             slot="content"
             @change="${this._mainChangeHandler}"
           ></cc-authorization-method>
@@ -107,7 +126,16 @@ class DemoPage extends ArcDemoPage {
           >
             Allow none
           </anypoint-checkbox>
+          <anypoint-checkbox
+            aria-describedby="textAreaOptionsLabel"
+            slot="options"
+            name="allowImportButton"
+            @change="${this._toggleMainOption}"
+          >
+            Allow import
+          </anypoint-checkbox>
         </arc-interactive-demo>
+
         <p>Change events counter: ${mainChangesCounter}</p>
 
         <div class="data-options">
@@ -116,6 +144,8 @@ class DemoPage extends ArcDemoPage {
           <anypoint-button @click="${this.deleteData}">Clear data</anypoint-button>
         </div>
       </section>
+
+      ${this._importDialog()}
     `;
   }
 
@@ -147,6 +177,18 @@ class DemoPage extends ArcDemoPage {
       </section>`;
   }
 
+  _importDialog() {
+    const { importOpened } = this;
+    return html`
+    <anypoint-dialog ?opened="${importOpened}">
+      <h2>Import a certificate</h2>
+      <anypoint-dialog-scrollable>
+        <certificate-import @close="${this._closeImportHandler}"></certificate-import>
+      </anypoint-dialog-scrollable>
+    </anypoint-dialog>
+    `;
+  }
+
   contentTemplate() {
     return html`
       <h2>Client certificate authorization method</h2>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,18 +46,20 @@
     "@advanced-rest-client/date-time": "^3.0.2",
     "@anypoint-web-components/anypoint-item": "^1.0.5",
     "@anypoint-web-components/anypoint-radio-button": "^0.1.4",
+    "@anypoint-web-components/anypoint-button": "^1.0.15",
     "lit-element": "^2.0.1",
     "lit-html": "^1.0.0"
   },
   "devDependencies": {
     "@advanced-rest-client/arc-data-generator": "^3.0.6",
     "@advanced-rest-client/arc-demo-helper": "^1.0.17",
     "@advanced-rest-client/arc-models": "^3.0.3",
+    "@advanced-rest-client/client-certificates-panel": "^1.0.5",
     "@advanced-rest-client/eslint-config": "^1.1.4",
     "@advanced-rest-client/prettier-config": "^0.1.0",
     "@advanced-rest-client/testing-karma-sl": "^1.1.0",
-    "@anypoint-web-components/anypoint-button": "^1.0.15",
     "@anypoint-web-components/anypoint-checkbox": "^1.0.2",
+    "@anypoint-web-components/anypoint-dialog": "^0.1.1",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@open-wc/testing": "^2.0.0",