@infineon/infineon-design-system-stencil 30.6.2--canary.1658.4e0299382cc78146674b539e7aec5baa0c8f1d1c.0 → 30.7.0--canary.1659.b0566d16d24e575a317729dc3e9da288c96252e2.0

package/dist/components/ifx-list-notification.js

@@ -1,107 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
-
-const listGroupNotificationCss = ".list-group-notification{width:350px;height:88px;padding:16px;margin-bottom:8px;background-color:#FFFFFF;border:1px solid #EEEDED;font-family:var(--ifx-font-family)}.list-group-notification .description__section{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.list-group-notification.flush{border:none;border-bottom:1px solid #EEEDED}.list-group-notification .heading__section{display:flex;justify-content:space-between;margin-bottom:8px;color:#0A8276}.list-group-notification .heading__section-title{flex:1;margin:0;font-weight:600;line-height:1.2;font-size:1rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.list-group-notification .heading__section-time{flex:none;margin-left:2px;font-size:0.875rem;line-height:1.25rem;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
-const IfxListNotificationStyle0 = listGroupNotificationCss;
-
-const ListGroupNotification = /*@__PURE__*/ proxyCustomElement(class ListGroupNotification extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.titleText = "";
-        this.isFlush = false;
-        this.creationTime = undefined;
-        this.postTime = undefined;
-        this.shownTime = undefined;
-    }
-    setDisplayTime(seconds, minutes, hours, days) {
-        if (seconds <= 60) {
-            this.shownTime = `Just now`;
-        }
-        else if (minutes <= 60) {
-            this.shownTime = `${minutes} min. ago`;
-        }
-        else if (hours <= 24) {
-            this.shownTime = hours > 1 ? `${hours} hr. ago` : `${hours} hrs. ago`;
-        }
-        else if (days) {
-            this.shownTime = hours < 48 ? `1 day ago` : `${days} days ago`;
-            if (hours > 168) {
-                this.shownTime = `${new Date().getDay()}.${new Date().getMonth()}.${new Date().getFullYear()}`;
-            }
-        }
-    }
-    stringToDate(dataString) {
-        if (!dataString)
-            return null;
-        let dateParts = dataString.split("/");
-        if (dateParts[2]) {
-            if (dateParts[2].split(" ")[1]) {
-                let timeParts = dateParts[2].split(" ")[1].split(":");
-                dateParts[2] = dateParts[2].split(" ")[0];
-                return new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], timeParts[0], timeParts[1], timeParts[2]);
-            }
-        }
-    }
-    getElapsedTime(time) {
-        let date = this.stringToDate(time);
-        if (date) {
-            let miliseconds = Date.now() - date.getTime();
-            let seconds = Math.floor(miliseconds / 1000);
-            let minutes = Math.floor(miliseconds / 60000);
-            let hours = Math.floor(minutes / 60);
-            let days = Math.floor(hours / 24);
-            this.setDisplayTime(seconds, minutes, hours, days);
-        }
-    }
-    setTimeInterval(time) {
-        this.postTime = window.setInterval(() => {
-            this.getElapsedTime(time);
-        }, 1000);
-    }
-    ;
-    componentWillLoad() {
-        this.getElapsedTime(this.creationTime);
-        this.setTimeInterval(this.creationTime); //if time update on refresh, delete this & clear interval
-        const ifxListGroup = this.el.closest('ifx-list-group');
-        if (ifxListGroup.flush) {
-            this.isFlush = true;
-        }
-        else
-            this.isFlush = false;
-    }
-    disconnectedCallback() {
-        window.clearInterval(this.postTime);
-    }
-    render() {
-        return (h("div", { key: '91e1c400374162be139fed99ce0d7e4495b46eb6', class: `list-group-notification ${this.isFlush ? 'flush' : ""}` }, h("div", { key: 'f15575375e0698d0bedb1989e86bfcc24347d1a6', class: "heading__section" }, h("h6", { key: 'ea441212ebfe13f6d2714417dbe3f2770598fd6d', class: "heading__section-title" }, this.titleText), h("div", { key: '0dffec118ce4c588e992531d68492382ad20476d', class: "heading__section-time" }, this.shownTime)), h("div", { key: '063ccfbb83b2a2d839e6e230ec88fba4b9d59a1d', class: "description__section" }, h("slot", { key: 'e449dec2d47fba283a71b1f284963652d39b8ac8' }))));
-    }
-    get el() { return this; }
-    static get style() { return IfxListNotificationStyle0; }
-}, [1, "ifx-list-notification", {
-        "titleText": [1, "title-text"],
-        "isFlush": [4, "is-flush"],
-        "creationTime": [8, "creation-time"],
-        "postTime": [32],
-        "shownTime": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ifx-list-notification"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ifx-list-notification":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ListGroupNotification);
-            }
-            break;
-    } });
-}
-
-const IfxListNotification = ListGroupNotification;
-const defineCustomElement = defineCustomElement$1;
-
-export { IfxListNotification, defineCustomElement };
-
-//# sourceMappingURL=ifx-list-notification.js.map

package/dist/components/ifx-list-notification.js.map

@@ -1 +0,0 @@
-{"file":"ifx-list-notification.js","mappings":"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","names":[],"sources":["src/components/list-group/list-group-notification.scss?tag=ifx-list-notification&encapsulation=shadow","src/components/list-group/list-group-notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.list-group-notification {\n  width: 350px;\n  height: 88px;\n  padding: 16px;\n  margin-bottom: 8px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family);\n\n  & .description__section {\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.flush {\n    border: none;\n    border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  }\n\n  & .heading__section {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 8px;\n    color: tokens.$ifxColorOcean500;\n  }\n\n  & .heading__section-title {\n    flex: 1;\n    margin: 0;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 1.2;\n    font-size: tokens.$ifxFontSizeM;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  & .heading__section-time {\n    flex: none;\n    margin-left: 2px;\n    font-size: tokens.$ifxFontSizeS;\n    line-height: tokens.$ifxLineHeightS;\n    font-weight: 400;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}","import { Component, h, Element, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list-notification',\n  styleUrl: 'list-group-notification.scss',\n  shadow: true,\n})\n\nexport class ListGroupNotification {\n  @Element() el;\n  @Prop() titleText: string = \"\"\n  @Prop() isFlush: boolean = false;\n  @Prop() creationTime: any;\n  @State() postTime: number;\n  @State() shownTime: string;\n\n  setDisplayTime(seconds, minutes, hours, days) {\n    if (seconds <= 60) {\n      this.shownTime = `Just now`\n    } else if (minutes <= 60) {\n      this.shownTime = `${minutes} min. ago`\n    } else if (hours <= 24) {\n      this.shownTime = hours > 1 ? `${hours} hr. ago` : `${hours} hrs. ago`\n    } else if (days) {\n      this.shownTime = hours < 48 ? `1 day ago` : `${days} days ago`\n      if (hours > 168) {\n        this.shownTime = `${new Date().getDay()}.${new Date().getMonth()}.${new Date().getFullYear()}`\n      }\n    }\n  }\n\n  stringToDate(dataString) {\n    if (!dataString) return null\n    let dateParts = dataString.split(\"/\");\n    if (dateParts[2]) {\n      if (dateParts[2].split(\" \")[1]) {\n        let timeParts = dateParts[2].split(\" \")[1].split(\":\");\n        dateParts[2] = dateParts[2].split(\" \")[0];\n        return new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], timeParts[0], timeParts[1], timeParts[2]);\n      }\n    }\n  }\n\n  getElapsedTime(time) {\n    let date = this.stringToDate(time)\n    if (date) {\n      let miliseconds = Date.now() - date.getTime()\n      let seconds = Math.floor(miliseconds / 1000);\n      let minutes = Math.floor(miliseconds / 60000);\n      let hours = Math.floor(minutes / 60);\n      let days = Math.floor(hours / 24);\n      this.setDisplayTime(seconds, minutes, hours, days)\n    }\n  }\n\n  setTimeInterval(time) {\n    this.postTime = window.setInterval(() => {\n      this.getElapsedTime(time)\n    }, 1000)\n  };\n\n  componentWillLoad() {\n    this.getElapsedTime(this.creationTime)\n    this.setTimeInterval(this.creationTime) //if time update on refresh, delete this & clear interval\n    const ifxListGroup = this.el.closest('ifx-list-group')\n    if (ifxListGroup.flush) {\n      this.isFlush = true;\n    } else this.isFlush = false;\n  }\n\n  disconnectedCallback() {\n    window.clearInterval(this.postTime);\n  }\n\n  render() {\n    return (\n      <div class={`list-group-notification ${this.isFlush ? 'flush' : \"\"}`}>\n        <div class=\"heading__section\">\n          <h6 class=\"heading__section-title\">{this.titleText}</h6>\n          <div class=\"heading__section-time\">{this.shownTime}</div>\n        </div>\n        <div class=\"description__section\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}