@digital-realty/ix-drawer 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ix-drawer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# \<ix-drawer>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-drawer
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-drawer/ix-drawer.js';
+</script>
+
+              <ix-drawer
+                .isVisible=${true}
+                .onClosed=${() => handleOnClosed()}
+              >
+                <div slot="content">
+                  <h5>Title in h5</h5>
+                  <p>
+                    Ipsum amet excepteur velit anim dolor fugiat non dolor non
+                    occaecat tempor deserunt sit consectetur. Qui deserunt
+                    aliqua ex fugiat amet quis non. Dolore excepteur mollit
+                    ipsum mollit elit officia exercitation adipisicing nisi
+                    laborum commodo officia. Excepteur nisi non laborum aute
+                    ullamco non aliquip incididunt. Incididunt eiusmod proident
+                    culpa voluptate proident fugiat deserunt dolore qui
+                    pariatur. Esse amet ad in anim cillum. Pariatur laborum
+                    tempor et labore. Adipisicing esse pariatur non eiusmod
+                    commodo. Lorem eu nulla qui eiusmod est do magna ea ut
+                    consectetur ut dolore consectetur aliquip. Minim laboris
+                    laboris magna sint laboris excepteur dolor sunt consectetur
+                    nulla commodo in cupidatat. Cupidatat duis elit culpa
+                    commodo fugiat eu. Consequat proident nisi proident nisi ad
+                    ut aliqua elit anim nisi veniam et et Lorem. Quis labore non
+                    laborum et amet in veniam tempor sint proident proident
+                    Lorem ut excepteur. Non voluptate aliquip consequat
+                    consequat adipisicing irure mollit eiusmod veniam non eu
+                    velit.
+                  </p>
+                </div>
+              </ix-drawer>
+```
+
+```JS
+import { IxDrawer } from 'ix-drawer'
+
+<IxDrawer>
+  <div slot="content">
+    <h5>Title in h5</h5>
+    <p>
+      Ipsum amet excepteur velit anim dolor fugiat non dolor non
+      occaecat tempor deserunt sit consectetur. Qui deserunt
+      aliqua ex fugiat amet quis non. Dolore excepteur mollit
+      ipsum mollit elit officia exercitation adipisicing nisi
+      laborum commodo officia. Excepteur nisi non laborum aute
+      ullamco non aliquip incididunt. Incididunt eiusmod proident
+      culpa voluptate proident fugiat deserunt dolore qui
+      pariatur. Esse amet ad in anim cillum. Pariatur laborum
+      tempor et labore. Adipisicing esse pariatur non eiusmod
+      commodo. Lorem eu nulla qui eiusmod est do magna ea ut
+      consectetur ut dolore consectetur aliquip. Minim laboris
+      laboris magna sint laboris excepteur dolor sunt consectetur
+      nulla commodo in cupidatat. Cupidatat duis elit culpa
+      commodo fugiat eu. Consequat proident nisi proident nisi ad
+      ut aliqua elit anim nisi veniam et et Lorem. Quis labore non
+      laborum et amet in veniam tempor sint proident proident
+      Lorem ut excepteur. Non voluptate aliquip consequat
+      consequat adipisicing irure mollit eiusmod veniam non eu
+      velit.
+    </p>
+  </div>
+</IxDrawer>
+```
+
+## Demo and Documentation
+
+Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-drawer--default).

package/dist/IxDrawer.d.ts

@@ -0,0 +1,10 @@
+import { LitElement, nothing } from 'lit';
+import '@digital-realty/ix-button/ix-button.js';
+import '@material/web/icon/icon.js';
+export declare class IxDrawer extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    isVisible: boolean;
+    onClosed: any;
+    renderHideButton(): symbol;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}

package/dist/IxDrawer.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IxDrawerStyles } from './styles/ix-drawer-styles.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@material/web/icon/icon.js';
+export class IxDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isVisible = false;
+    }
+    static get styles() {
+        return [IxDrawerStyles];
+    }
+    // eslint-disable-next-line class-methods-use-this
+    renderHideButton() {
+        return nothing;
+        // 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">
+              <div class="drawer-header__hide-btn">
+                ${this.renderHideButton()}
+              </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>
+      `;
+        return nothing;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], IxDrawer.prototype, "isVisible", void 0);
+__decorate([
+    property({ type: Function })
+], IxDrawer.prototype, "onClosed", void 0);
+//# sourceMappingURL=IxDrawer.js.map

package/dist/IxDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../src/IxDrawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,wCAAwC,CAAC;AAChD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAK+B,cAAS,GAAG,KAAK,CAAC;IAuCjD,CAAC;IA3CC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IAMD,kDAAkD;IAClD,gBAAgB;QACd,OAAO,OAAO,CAAC;QAEf,0FAA0F;QAC1F,6EAA6E;QAC7E,mDAAmD;QACnD,SAAS;QACT,iBAAiB;IACnB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,SAAS;YAChB,OAAO,IAAI,CAAA;;;;;kBAKC,IAAI,CAAC,gBAAgB,EAAE;;;;oCAIL,IAAI,CAAC,QAAQ;;;;;;;;;OAS1C,CAAC;QAEJ,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AAvC8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAEjB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CAAe","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { IxDrawerStyles } from './styles/ix-drawer-styles.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@material/web/icon/icon.js';\n\nexport class IxDrawer extends LitElement {\n  static get styles() {\n    return [IxDrawerStyles];\n  }\n\n  @property({ type: Boolean }) isVisible = false;\n\n  @property({ type: Function }) onClosed: any;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderHideButton() {\n    return nothing;\n\n    // TO DO: this part will be completed with https://telxapp.atlassian.net/browse/IXUAT-8818\n    // return html`<ix-button appearance=\"text\" has-icon @click=${this.onClosed}>\n    //   <md-icon slot=\"icon\">fullscreen_exit</md-icon>\n    //   Hide\n    // </ix-button>`;\n  }\n\n  render() {\n    if (this.isVisible)\n      return html`\n        <div class=\"drawer-container\">\n          <aside class=\"drawer\">\n            <div class=\"drawer-header\">\n              <div class=\"drawer-header__hide-btn\">\n                ${this.renderHideButton()}\n              </div>\n              <div class=\"drawer-header__close-btn\">\n                <div class=\"drawer-header__close-btn-hover-layer\">\n                  <md-icon @click=${this.onClosed}>Close</md-icon>\n                </div>\n              </div>\n            </div>\n            <div class=\"drawer-body\">\n              <slot name=\"content\"></slot>\n            </div>\n          </aside>\n        </div>\n      `;\n\n    return nothing;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { IxDrawer } from './IxDrawer.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { IxDrawer } from './IxDrawer.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { IxDrawer } from './IxDrawer.js';\n"]}

package/dist/ix-drawer.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-drawer.js

@@ -0,0 +1,3 @@
+import { IxDrawer } from './IxDrawer.js';
+window.customElements.define('ix-drawer', IxDrawer);
+//# sourceMappingURL=ix-drawer.js.map

package/dist/ix-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-drawer.js","sourceRoot":"","sources":["../src/ix-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { IxDrawer } from './IxDrawer.js';\n\nwindow.customElements.define('ix-drawer', IxDrawer);\n"]}

package/dist/react/IxDrawer.d.ts

@@ -0,0 +1,4 @@
+import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
+export declare const IxDrawer: import("@lit/react").ReactWebComponent<IxDrawerLit, {
+    onclick: string;
+}>;

package/dist/react/IxDrawer.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxDrawer as IxDrawerLit } from '../IxDrawer.js';
+customElements.define('ix-drawer', IxDrawerLit);
+export const IxDrawer = createComponent({
+    tagName: 'ix-drawer',
+    elementClass: IxDrawerLit,
+    react: React,
+    events: {
+        onclick: 'onClick',
+    },
+});
+//# sourceMappingURL=IxDrawer.js.map

package/dist/react/IxDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxDrawer.js","sourceRoot":"","sources":["../../src/react/IxDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { IxDrawer as IxDrawerLit } from '../IxDrawer.js';\n\ncustomElements.define('ix-drawer', IxDrawerLit);\n\nexport const IxDrawer = createComponent({\n  tagName: 'ix-drawer',\n  elementClass: IxDrawerLit,\n  react: React,\n  events: {\n    onclick: 'onClick',\n  },\n});\n"]}

package/dist/styles/ix-drawer-styles.d.ts

@@ -0,0 +1 @@
+export declare const IxDrawerStyles: import("lit").CSSResult;

package/dist/styles/ix-drawer-styles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+export const IxDrawerStyles = css `
+  .drawer-container {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    scroll-behavior: auto;
+    overflow: auto;
+  }
+
+  .drawer {
+    width: 45%;
+    height: 100%;
+    float: right;
+    padding: 32px 40px 40px;
+    background-color: white;
+    border-radius: 20px 0px 0px 20px;
+    box-sizing: border-box;
+  }
+
+  .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .drawer-header__hide-btn {
+    flex: 0;
+  }
+  .drawer-header__close-btn {
+    flex: 1;
+  }
+  .drawer-header__close-btn-hover-layer {
+    width: 24px;
+    height: 24px;
+    border-radius: 9999px;
+    float: right;
+  }
+  .drawer-header__close-btn-hover-layer:hover {
+    transition: 0.15s;
+    background-color: lightgrey;
+  }
+
+  .drawer-body {
+    height: 100%;
+    overflow: auto;
+  }
+`;
+//# sourceMappingURL=ix-drawer-styles.js.map

package/dist/styles/ix-drawer-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-drawer-styles.js","sourceRoot":"","sources":["../../src/styles/ix-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDrawerStyles = css`\n  .drawer-container {\n    z-index: 1;\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, 0.2);\n    scroll-behavior: auto;\n    overflow: auto;\n  }\n\n  .drawer {\n    width: 45%;\n    height: 100%;\n    float: right;\n    padding: 32px 40px 40px;\n    background-color: white;\n    border-radius: 20px 0px 0px 20px;\n    box-sizing: border-box;\n  }\n\n  .drawer-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .drawer-header__hide-btn {\n    flex: 0;\n  }\n  .drawer-header__close-btn {\n    flex: 1;\n  }\n  .drawer-header__close-btn-hover-layer {\n    width: 24px;\n    height: 24px;\n    border-radius: 9999px;\n    float: right;\n  }\n  .drawer-header__close-btn-hover-layer:hover {\n    transition: 0.15s;\n    background-color: lightgrey;\n  }\n\n  .drawer-body {\n    height: 100%;\n    overflow: auto;\n  }\n`;\n"]}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@digital-realty/ix-drawer",
+  "description": "Webcomponent ix-drawer following open-wc recommendations",
+  "license": "MIT",
+  "author": "interxion",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-drawer.js": "./dist/ix-drawer.js",
+    "./IxDrawer": "./dist/react/IxDrawer.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+  },
+  "dependencies": {
+    "@digital-realty/ix-button": "*",
+    "@digital-realty/theme": "*",
+    "@lit/react": "^1.0.2",
+    "@material/web": "^1.0.1",
+    "lit": "^2.0.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/dev-server-storybook": "^0.5.4",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    },
+    "globals": {
+      "ShadowRootInit": true
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "6d563c5fc9147dc96c57c5f01604503118485d2d"
+}