@digital-realty/ix-widget 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ix-widget
+
+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,30 @@
+# \<ix-widget>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-widget
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-widget/ix-widget.js';
+</script>
+
+<ix-widget></ix-widget>
+```
+### In React
+```html
+<script type="module">
+  import { IxWidget } from '@digital-realty/ix-widget/IxWidget'
+</script>
+```
+
+
+## Demo and Documentation
+
+Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-widget--default).

package/dist/IxWidget.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class IxWidget extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: string;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/IxWidget.js

@@ -0,0 +1,85 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+export class IxWidget extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'default';
+    }
+    render() {
+        return html `<div class="card" type=${this.type}>
+      <slot></slot>
+    </div>`;
+    }
+}
+IxWidget.styles = css `
+    .card {
+      border-radius: 0.75rem;
+      background: var(--ix-widget-background, white);
+      padding: var(--ix-widget-padding, 16px 24px 32px);
+      border: var(--ix-widget-border, none);
+    }
+
+    [type='status-counter'].card {
+      margin-bottom: 0;
+      --ix-widget-padding: 0;
+      --ix-widget-padding: 1rem;
+    }
+
+    @media (min-width: 1350px) {
+      [type='status-counter'].card {
+        --ix-widget-padding: 36.5px 20px 36.5px 24px;
+      }
+    }
+
+    [type='status-counter-group'].card {
+      --ix-widget-padding: 0;
+      --ix-widget-background: transparent;
+    }
+
+    @media (max-width: 1349px) {
+      [type='status-counter-group'].card {
+        --ix-widget-padding: 1rem;
+        --ix-widget-background: white;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+          rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+          rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+      }
+    }
+
+    [type='info-card'].card {
+      display: block;
+      max-width: 348px;
+      border-radius: 0.5rem;
+      border: 1px solid #e0e0e0;
+      position: relative;
+      overflow: auto;
+      aspect-ratio: 1 / 1.47;
+    }
+    [type='info-card-2'].card {
+      display: block;
+      max-width: 348px;
+      border-radius: 0.5rem;
+      border: 1px solid #e0e0e0;
+      position: relative;
+      overflow: hidden;
+      aspect-ratio: 1 / 0.85;
+    }
+    [type='action-list'].card {
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+        rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+    }
+    [type='news-feed'].card {
+      display: flex;
+      flex-direction: column;
+      background: rgb(255, 255, 255);
+      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+        rgb(225, 228, 232) 0px 0px 0px 1px inset;
+      border-radius: 12px;
+      padding-bottom: 11px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], IxWidget.prototype, "type", void 0);
+//# sourceMappingURL=IxWidget.js.map

package/dist/IxWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAqE8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AA1EM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkElB,AAlEY,CAkEX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class IxWidget extends LitElement {\n  static styles = css`\n    .card {\n      border-radius: 0.75rem;\n      background: var(--ix-widget-background, white);\n      padding: var(--ix-widget-padding, 16px 24px 32px);\n      border: var(--ix-widget-border, none);\n    }\n\n    [type='status-counter'].card {\n      margin-bottom: 0;\n      --ix-widget-padding: 0;\n      --ix-widget-padding: 1rem;\n    }\n\n    @media (min-width: 1350px) {\n      [type='status-counter'].card {\n        --ix-widget-padding: 36.5px 20px 36.5px 24px;\n      }\n    }\n\n    [type='status-counter-group'].card {\n      --ix-widget-padding: 0;\n      --ix-widget-background: transparent;\n    }\n\n    @media (max-width: 1349px) {\n      [type='status-counter-group'].card {\n        --ix-widget-padding: 1rem;\n        --ix-widget-background: white;\n        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n          rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,\n          rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n      }\n    }\n\n    [type='info-card'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: auto;\n      aspect-ratio: 1 / 1.47;\n    }\n    [type='info-card-2'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: hidden;\n      aspect-ratio: 1 / 0.85;\n    }\n    [type='action-list'].card {\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n        rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n    }\n    [type='news-feed'].card {\n      display: flex;\n      flex-direction: column;\n      background: rgb(255, 255, 255);\n      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n        rgb(225, 228, 232) 0px 0px 0px 1px inset;\n      border-radius: 12px;\n      padding-bottom: 11px;\n    }\n  `;\n\n  @property({ type: String }) type = 'default';\n\n  protected override render() {\n    return html`<div class=\"card\" type=${this.type}>\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/assets/columns.d.ts

@@ -0,0 +1,5 @@
+export declare const columns: {
+    name: string;
+    header: string;
+    bodyRenderer: (row: any) => import("lit").TemplateResult<1>;
+}[];

package/dist/assets/columns.js

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import { html } from 'lit';
+export const columns = [
+    {
+        name: 'title',
+        header: 'Subject',
+        bodyRenderer: row => html ` <span>${row.title}</span>`,
+    },
+    {
+        name: 'status',
+        header: 'Status',
+        bodyRenderer: row => html ` <span
+      style="display: flex;
+    flex-direction: row;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 2px 12px;
+    width: 185px;
+    height: 28px;
+    left: 0px;
+    top: 0px;
+    border-radius: 68px;
+    flex: 0 0 auto;
+    order: 0;
+    -webkit-box-flex: 0;
+    color: white;
+    -webkit-box-pack: center;
+    justify-content: center;
+    background: rgb(76, 175, 80);
+    margin: -6px 0;"
+      >${row.status}</span
+    >`,
+    },
+    {
+        name: 'type',
+        header: 'Ticket Type',
+        bodyRenderer: row => html ` <span>${row.ticketType}</span>`,
+    },
+    {
+        name: 'updated',
+        header: 'Updated On',
+        bodyRenderer: row => html ` <span>${row.updatedOn.split(' ')[0]}</span>`,
+    },
+];
+//# sourceMappingURL=columns.js.map

package/dist/assets/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sourceRoot":"","sources":["../../src/assets/columns.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,KAAK,SAAS;KACtD;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;SAmBpB,GAAG,CAAC,MAAM;MACb;KACH;IACD;QACE,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,aAAa;QACrB,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,UAAU,SAAS;KAC3D;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,YAAY;QACpB,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;KACxE;CACF,CAAC","sourcesContent":["// @ts-nocheck\nimport { html } from 'lit';\n\nexport const columns = [\n  {\n    name: 'title',\n    header: 'Subject',\n    bodyRenderer: row => html` <span>${row.title}</span>`,\n  },\n  {\n    name: 'status',\n    header: 'Status',\n    bodyRenderer: row => html` <span\n      style=\"display: flex;\n    flex-direction: row;\n    -webkit-box-align: center;\n    align-items: center;\n    padding: 2px 12px;\n    width: 185px;\n    height: 28px;\n    left: 0px;\n    top: 0px;\n    border-radius: 68px;\n    flex: 0 0 auto;\n    order: 0;\n    -webkit-box-flex: 0;\n    color: white;\n    -webkit-box-pack: center;\n    justify-content: center;\n    background: rgb(76, 175, 80);\n    margin: -6px 0;\"\n      >${row.status}</span\n    >`,\n  },\n  {\n    name: 'type',\n    header: 'Ticket Type',\n    bodyRenderer: row => html` <span>${row.ticketType}</span>`,\n  },\n  {\n    name: 'updated',\n    header: 'Updated On',\n    bodyRenderer: row => html` <span>${row.updatedOn.split(' ')[0]}</span>`,\n  },\n];\n"]}

package/dist/assets/contacts.d.ts

@@ -0,0 +1,17 @@
+export declare const contacts: {
+    id: string;
+    title: string;
+    status: string;
+    site: string;
+    requestType: string;
+    category: string;
+    isBulkRequest: boolean;
+    createdOn: string;
+    updatedOn: string;
+    closedOn: string;
+    createdBy: string;
+    ticketType: string;
+    description: string;
+    accessRequestedFor: string;
+    location: string;
+}[];

package/dist/assets/contacts.js

@@ -0,0 +1,88 @@
+export const contacts = [
+    {
+        id: 'WO10133499',
+        title: 'Request for New Permanent badge',
+        status: 'In Progress',
+        site: 'IAD035',
+        requestType: 'Permanent Badge',
+        category: 'New Badge',
+        isBulkRequest: false,
+        createdOn: '2024-05-17 15:53:29',
+        updatedOn: '2024-05-17 15:58:16',
+        closedOn: '',
+        createdBy: 'magic link1',
+        ticketType: 'Facility Access',
+        description: 'Request for New Permanent badge',
+        accessRequestedFor: 'asd asd',
+        location: 'LinkedIn Office 230-A',
+    },
+    {
+        id: 'WO10133500',
+        title: 'Request for Terminate Permanent badge',
+        status: 'Approved',
+        site: 'IAD035',
+        requestType: 'Permanent Badge',
+        category: 'Terminate All Access',
+        isBulkRequest: false,
+        createdOn: '2024-05-17 15:55:14',
+        updatedOn: '2024-05-17 15:55:59',
+        closedOn: '',
+        createdBy: 'magic link1',
+        ticketType: 'Facility Access',
+        description: 'Request for Terminate Permanent badge',
+        accessRequestedFor: 'asd asd',
+        location: 'S190 Data Center LinkedIn E',
+    },
+    {
+        id: 'WO10128046',
+        title: 'CS8',
+        status: 'New',
+        site: 'IAD035',
+        requestType: 'Accounts Receivable',
+        category: 'General Billing Inquiry',
+        isBulkRequest: false,
+        createdOn: '2024-05-07 14:47:35',
+        updatedOn: '2024-05-17 14:47:35',
+        closedOn: '',
+        createdBy: 'magic link1',
+        ticketType: 'Customer Support',
+        description: 'CS8',
+        accessRequestedFor: ' ',
+        location: 'LinkedIn Office 230',
+    },
+    {
+        id: 'WO10128045',
+        title: 'CS8',
+        status: 'New',
+        site: 'IAD035',
+        requestType: 'Accounts Receivable',
+        category: 'General Billing Inquiry',
+        isBulkRequest: false,
+        createdOn: '2024-05-07 14:47:35',
+        updatedOn: '2024-05-17 14:47:35',
+        closedOn: '',
+        createdBy: 'magic link1',
+        ticketType: 'Customer Support',
+        description: 'CS8',
+        accessRequestedFor: ' ',
+        location: 'G100 Data Center LinkedIn K',
+    },
+    {
+        id: 'WO10127822',
+        title: 'Customer Support Title',
+        status: 'New',
+        site: 'IAD035',
+        requestType: 'Accounts Receivable',
+        category: 'General Billing Inquiry',
+        isBulkRequest: false,
+        createdOn: '2024-05-07 13:27:55',
+        updatedOn: '2024-05-17 13:27:55',
+        closedOn: '',
+        createdBy: 'magic link1',
+        ticketType: 'Customer Support',
+        description: 'Customer Support Title',
+        accessRequestedFor: ' ',
+        location: 'LinkedIn Office 230-A',
+    },
+];
+//# sourceMappingURL=contacts.js.map

package/dist/assets/contacts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts.js","sourceRoot":"","sources":["../../src/assets/contacts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,iCAAiC;QACxC,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE,WAAW;QACrB,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,qBAAqB;QAChC,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,iBAAiB;QAC7B,WAAW,EAAE,iCAAiC;QAC9C,kBAAkB,EAAE,SAAS;QAC7B,QAAQ,EAAE,uBAAuB;KAClC;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE,sBAAsB;QAChC,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,qBAAqB;QAChC,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,iBAAiB;QAC7B,WAAW,EAAE,uCAAuC;QACpD,kBAAkB,EAAE,SAAS;QAC7B,QAAQ,EAAE,6BAA6B;KACxC;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,qBAAqB;QAClC,QAAQ,EAAE,yBAAyB;QACnC,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,qBAAqB;QAChC,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,kBAAkB;QAC9B,WAAW,EAAE,KAAK;QAClB,kBAAkB,EAAE,GAAG;QACvB,QAAQ,EAAE,qBAAqB;KAChC;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,qBAAqB;QAClC,QAAQ,EAAE,yBAAyB;QACnC,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,qBAAqB;QAChC,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,kBAAkB;QAC9B,WAAW,EAAE,KAAK;QAClB,kBAAkB,EAAE,GAAG;QACvB,QAAQ,EAAE,6BAA6B;KACxC;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,wBAAwB;QAC/B,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,qBAAqB;QAClC,QAAQ,EAAE,yBAAyB;QACnC,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,qBAAqB;QAChC,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,UAAU,EAAE,kBAAkB;QAC9B,WAAW,EAAE,wBAAwB;QACrC,kBAAkB,EAAE,GAAG;QACvB,QAAQ,EAAE,uBAAuB;KAClC;CACF,CAAC","sourcesContent":["export const contacts = [\n  {\n    id: 'WO10133499',\n    title: 'Request for New Permanent badge',\n    status: 'In Progress',\n    site: 'IAD035',\n    requestType: 'Permanent Badge',\n    category: 'New Badge',\n    isBulkRequest: false,\n    createdOn: '2024-05-17 15:53:29',\n    updatedOn: '2024-05-17 15:58:16',\n    closedOn: '',\n    createdBy: 'magic link1',\n    ticketType: 'Facility Access',\n    description: 'Request for New Permanent badge',\n    accessRequestedFor: 'asd asd',\n    location: 'LinkedIn Office 230-A',\n  },\n  {\n    id: 'WO10133500',\n    title: 'Request for Terminate Permanent badge',\n    status: 'Approved',\n    site: 'IAD035',\n    requestType: 'Permanent Badge',\n    category: 'Terminate All Access',\n    isBulkRequest: false,\n    createdOn: '2024-05-17 15:55:14',\n    updatedOn: '2024-05-17 15:55:59',\n    closedOn: '',\n    createdBy: 'magic link1',\n    ticketType: 'Facility Access',\n    description: 'Request for Terminate Permanent badge',\n    accessRequestedFor: 'asd asd',\n    location: 'S190 Data Center LinkedIn E',\n  },\n  {\n    id: 'WO10128046',\n    title: 'CS8',\n    status: 'New',\n    site: 'IAD035',\n    requestType: 'Accounts Receivable',\n    category: 'General Billing Inquiry',\n    isBulkRequest: false,\n    createdOn: '2024-05-07 14:47:35',\n    updatedOn: '2024-05-17 14:47:35',\n    closedOn: '',\n    createdBy: 'magic link1',\n    ticketType: 'Customer Support',\n    description: 'CS8',\n    accessRequestedFor: ' ',\n    location: 'LinkedIn Office 230',\n  },\n  {\n    id: 'WO10128045',\n    title: 'CS8',\n    status: 'New',\n    site: 'IAD035',\n    requestType: 'Accounts Receivable',\n    category: 'General Billing Inquiry',\n    isBulkRequest: false,\n    createdOn: '2024-05-07 14:47:35',\n    updatedOn: '2024-05-17 14:47:35',\n    closedOn: '',\n    createdBy: 'magic link1',\n    ticketType: 'Customer Support',\n    description: 'CS8',\n    accessRequestedFor: ' ',\n    location: 'G100 Data Center LinkedIn K',\n  },\n  {\n    id: 'WO10127822',\n    title: 'Customer Support Title',\n    status: 'New',\n    site: 'IAD035',\n    requestType: 'Accounts Receivable',\n    category: 'General Billing Inquiry',\n    isBulkRequest: false,\n    createdOn: '2024-05-07 13:27:55',\n    updatedOn: '2024-05-17 13:27:55',\n    closedOn: '',\n    createdBy: 'magic link1',\n    ticketType: 'Customer Support',\n    description: 'Customer Support Title',\n    accessRequestedFor: ' ',\n    location: 'LinkedIn Office 230-A',\n  },\n];\n"]}