@digital-realty/ix-drawer - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/IxDrawer.d.ts

 import { LitElement, nothing } from 'lit';
-import '@material/web/icon/icon.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-dialog/ix-dialog.js';
 export declare class IxDrawer extends LitElement {
     static get styles(): import("lit").CSSResult[];
+    protected minimised: boolean;
+    protected showDeleteConfirmationDialog: boolean;
     isVisible: boolean;
     onClosed: any;
-    renderHideButton(): symbol;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
+    minimisedTitle: string;
+    minimisedSubTitle: string;
+    minimisable: boolean;
+    onMinimised(): void;
+    handleOnCancel(): void;
+    handleOnDelete(): void;
+    renderMinimiseButton(): import("lit").TemplateResult<1> | typeof nothing;
+    renderMaximiseButton(): import("lit").TemplateResult<1>;
+    renderDeleteButton(): import("lit").TemplateResult<1>;
+    renderDeleteConfirmationDialog(): import("lit").TemplateResult<1>;
+    renderMinimisedContainer(): import("lit").TemplateResult<1>;
+    renderDrawerContainer(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
 }

dist/IxDrawer.js

 import { __decorate } from "tslib";
 import { LitElement, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { IxDrawerStyles } from './styles/ix-drawer-styles.js';
-import '@material/web/icon/icon.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-dialog/ix-dialog.js';
 export class IxDrawer extends LitElement {
     constructor() {
         super(...arguments);
+        this.minimised = false;
+        this.showDeleteConfirmationDialog = false;
         this.isVisible = false;
+        this.minimisedTitle = 'Draft';
+        this.minimisedSubTitle = '';
+        this.minimisable = false;
     }
@@ -14,34 +21,109 @@ static get styles() {
     }
-    // eslint-disable-next-line class-methods-use-this
-    renderHideButton() {
+    onMinimised() {
+        this.minimised = !this.minimised;
+    }
+    handleOnCancel() {
+        this.showDeleteConfirmationDialog = false;
+    }
+    handleOnDelete() {
+        this.showDeleteConfirmationDialog = true;
+    }
+    renderMinimiseButton() {
+        if (this.minimisable)
+            return html `<ix-button
+        data-testid="hideButton"
+        appearance="text"
+        has-icon
+        @click=${this.onMinimised}
+      >
+        <ix-icon slot="icon">fullscreen_exit</ix-icon>
+        HIDE
+      </ix-button>`;
         return nothing;
-        // import '@digital-realty/ix-button/ix-button.js';
-        // TO DO: this part will be completed with https://telxapp.atlassian.net/browse/IXUAT-8818
-        // return html`<ix-button appearance="text" has-icon @click=${this.onClosed}>
-        //   <md-icon slot="icon">fullscreen_exit</md-icon>
-        //   Hide
-        // </ix-button>`;
     }
-    render() {
-        if (this.isVisible)
-            return html `
-        <div class="drawer-container">
-          <aside class="drawer">
-            <div class="drawer-header">
-              <slot name="header"></slot>
-              <div class="drawer-header__hide-btn">
-                ${this.renderHideButton()}
+    renderMaximiseButton() {
+        return html `<div class="drawer__maximise-btn">
+      <ix-icon @click=${this.onMinimised}>fullscreen</ix-icon>
+    </div>`;
+    }
+    renderDeleteButton() {
+        return html `<svg
+        class="drawer__delete-btn"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        data-testid="deleteIcon"
+        @click=${this.handleOnDelete}
+      >
+        <path
+          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+        ></path>
+      </svg>
+      ${this.renderDeleteConfirmationDialog()}`;
+    }
+    renderDeleteConfirmationDialog() {
+        return html `
+      <ix-dialog .open=${this.showDeleteConfirmationDialog}>
+        <form slot="content" id="form-id" method="dialog">
+          <h2 class="drawer-delete-dialog__title">
+            Are you sure you want to proceed? All details provided will be lost.
+          </h2>
+        </form>
+        <div slot="actions">
+          <ix-button
+            appearance="text"
+            form="form-id"
+            @click=${this.handleOnCancel}
+            >NO</ix-button
+          >
+          <ix-button appearance="text" form="form-id" @click=${this.onClosed}
+            >YES</ix-button
+          >
+        </div>
+      </ix-dialog>
+    `;
+    }
+    renderMinimisedContainer() {
+        return html `<div class="drawer-minimised-container">
+      <div class="drawer-minimised-body">
+        <div>
+          <div class="drawer-minimised-title">${this.minimisedTitle}</div>
+          <div class="drawer-minimised-sub-title">
+            ${this.minimisedSubTitle}
+          </div>
+        </div>
+        <div class="drawer-minimised-actions">
+          ${this.renderDeleteButton()} ${this.renderMaximiseButton()}
+        </div>
+      </div>
+    </div>`;
+    }
+    renderDrawerContainer() {
+        return html `
+      <div class="drawer-container">
+        <aside class="drawer">
+          <div class="drawer-header">
+            <div class="drawer-header__minimise-btn">
+              ${this.renderMinimiseButton()}
+            </div>
+            <slot name="header"></slot>
+            <div class="drawer-header__close-btn">
+              <div class="drawer-header__close-btn-hover-layer">
+                <ix-icon @click=${this.onClosed}>Close</ix-icon>
               </div>
-              <div class="drawer-header__close-btn">
-                <div class="drawer-header__close-btn-hover-layer">
-                  <md-icon @click=${this.onClosed}>Close</md-icon>
-                </div>
-              </div>
             </div>
-            <div class="drawer-body">
-              <slot name="content"></slot>
-            </div>
-          </aside>
-        </div>
-      `;
+          </div>
+          <div class="drawer-body">
+            <slot name="content"></slot>
+          </div>
+        </aside>
+      </div>
+    `;
+    }
+    render() {
+        if (this.isVisible) {
+            if (this.minimised)
+                return this.renderMinimisedContainer();
+            return this.renderDrawerContainer();
+        }
         return nothing;
@@ -51,2 +133,8 @@ }
 __decorate([
+    state()
+], IxDrawer.prototype, "minimised", void 0);
+__decorate([
+    state()
+], IxDrawer.prototype, "showDeleteConfirmationDialog", void 0);
+__decorate([
     property({ type: Boolean })
@@ -57,2 +145,11 @@ ], IxDrawer.prototype, "isVisible", void 0);
 ], IxDrawer.prototype, "onClosed", void 0);
+__decorate([
+    property({ type: String })
+], IxDrawer.prototype, "minimisedTitle", void 0);
+__decorate([
+    property({ type: String })
+], IxDrawer.prototype, "minimisedSubTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDrawer.prototype, "minimisable", void 0);
 //# sourceMappingURL=IxDrawer.js.map

dist/styles/ix-drawer-styles.js

@@ -35,6 +35,7 @@ import { css } from 'lit';
   }
-  .drawer-header__hide-btn {
+  .drawer-header__minimise-btn {
     flex: 0;
   }
   .drawer-header__close-btn {
+    cursor: pointer;
     flex: 1;
@@ -57,3 +58,116 @@ }
   }
+
+  .drawer-minimised-container {
+    bottom: 24px;
+    position: absolute;
+    right: 24px;
+    z-index: 1200;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .drawer-minimised-body {
+    background-color: rgb(255, 255, 255);
+    height: 72px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 4px 24px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      rgb(225, 228, 232) 0px 0px 0px 1px inset;
+    border-radius: 16px;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+  }
+
+  .drawer-minimised-title {
+    color: rgba(9, 34, 65, 0.7);
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    font-family: 'Open Sans', sans-serif;
+  }
+
+  .drawer-minimised-sub-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    font-family: 'Open Sans', sans-serif;
+  }
+
+  .drawer-minimised-actions {
+    margin-left: 42px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+  }
+
+  .drawer-delete-dialog__title {
+    color: rgb(9, 34, 65);
+  }
+
+  .drawer__delete-btn {
+    user-select: none;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    fill: currentcolor;
+    flex-shrink: 0;
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    font-size: 1.5rem;
+    color: rgb(219, 0, 40);
+    cursor: pointer;
+    margin-right: 20px;
+  }
+
+  .drawer__maximise-btn {
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    font-family: 'Red Hat Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 1.5rem;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    min-height: 36px;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 50%;
+    padding: 0px;
+    min-width: 0px;
+    z-index: 1050;
+    color: rgb(255, 255, 255);
+    height: 40px !important;
+    width: 40px !important;
+    background-color: rgb(20, 86, 224) !important;
+    box-shadow: none !important;
+  }
+
+  ix-dialog {
+    form {
+      max-width: 500px;
+    }
+  }
 `;
 //# sourceMappingURL=ix-drawer-styles.js.map

package.json

@@ -6,3 +6,3 @@ {
   "author": "interxion",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
@@ -32,2 +32,5 @@ "main": "dist/index.js",
   "dependencies": {
+    "@digital-realty/ix-button": "*",
+    "@digital-realty/ix-dialog": "*",
+    "@digital-realty/ix-icon": "*",
     "@lit/react": "^1.0.2",
@@ -106,3 +109,3 @@ "@material/web": "^1.0.1",
   ],
-  "gitHead": "7885e9b97728dcce05cb20be90ef5338f6c76f19"
+  "gitHead": "8d163b068e310523d0cfda2b4f67f49b0ebd6913"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 3 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30004

increased by76.5%

Lines of code

356

increased by156.12%

Worsened metrics

Dependency count

7

increased by75%

Number of medium quality alerts

4

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@digital-realty/ix-button@*

• + Added@digital-realty/ix-dialog@*

• + Added@digital-realty/ix-icon@*

• + Added@digital-realty/ix-button@3.3.5(transitive)

• + Added@digital-realty/ix-dialog@1.1.12(transitive)

• + Added@digital-realty/ix-icon@1.1.4(transitive)

• + Added@digital-realty/ix-progress@1.2.4(transitive)

• + Added@material/web@1.2.0(transitive)

• + Added@ungap/structured-clone@1.2.1(transitive)