@startinblox/components-ds4go 3.0.3 → 3.1.0

package/src/styles/cards/ds4go-card-catalog.scss

@@ -0,0 +1,149 @@
+@mixin card-content-max-height($height) {
+  max-height: $height;
+  tems-division {
+    max-height: $height;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  height: fit-content;
+}
+
+article {
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  width: 100%;
+  display: flex;
+  font-family: var(--font-family-body);
+  &.vertical {
+    min-width: 295px;
+    .card-content {
+      max-height: 180px;
+      tems-division {
+        max-height: 180px;
+      }
+    }
+  }
+  &.horizontal,
+  &.billImage {
+    header {
+      width: auto;
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+    }
+    header.image {
+      flex-shrink: 0;
+      width: 33%;
+      height: 100%;
+    }
+    main {
+      flex-grow: 1;
+      .card-content {
+        max-height: 78px;
+        tems-division {
+          max-height: 78px;
+        }
+      }
+    }
+  }
+  &.billImage {
+    header.image {
+      width: 50%;
+    }
+    .card-content {
+      max-height: 206px;
+      tems-division {
+        max-height: 206px;
+      }
+    }
+  }
+  header {
+    display: flex;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 16px;
+  }
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-400);
+    flex: 1;
+    .content {
+      flex: 1;
+    }
+    .card-content {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+    .date {
+      width: fit-content;
+      display: flex;
+      gap: 24px;
+      flex-direction: row;
+      color: var(--color-text-disabled-on);
+      font-size: var(--typography-size-body-sm);
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-body-sm);
+      text-transform: uppercase;
+    }
+  }
+  .tags,
+  .action {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--scale-200);
+  }
+  .action ::slotted(*) {
+    width: 100%;
+    padding: var(--scale-400);
+    border-top: var(--border-width-sm) solid var(--color-border-primary);
+  }
+  .action slot:not(:has-slotted) {
+    display: none;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    header {
+      width: 100%;
+      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
+      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+      &.image {
+        height: 167px;
+      }
+    }
+    main {
+      padding: var(--scale-600);
+      padding-bottom: var(--scale-800);
+    }
+  }
+
+  &.vertical,
+  &.billImage {
+    .date {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &.horizontal,
+  &.billImage {
+    main {
+      padding: var(--scale-600);
+      padding-bottom: var(--scale-800);
+    }
+  }
+  div:has(slot:not(:has-slotted)) {
+    display: none;
+  }
+}

package/src/styles/fact-bundle-creation.scss

@@ -37,13 +37,13 @@ section {
 .card-grid-vertical {
   justify-content: stretch;
 
-  tems-card-catalog {
+  ds4go-card-catalog {
     width: 354px;
     height: fit-content;
   }
 }
 
-tems-card-catalog {
+ds4go-card-catalog {
   cursor: pointer;
 
   &[selected] {
@@ -67,6 +67,10 @@ div.select {
   width: 100%;
 }
 
+div:has(> tems-textarea) {
+  margin-bottom: -2px;
+}
+
 select {
   width: 100%;
   background-color: var(--color-surface-primary);

package/src/styles/modal/ds4go-customer-modal.scss

@@ -0,0 +1,91 @@
+@use "sass:meta";
+
+@include meta.load-css("../_helpers/flex");
+
+.modal {
+  width: 90vw;
+  height: 90vh;
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-primary);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-600);
+  padding: var(--scale-600) var(--scale-900);
+
+  color: var(--color-text-body);
+  font-family: var(--font-family-body);
+  font-size: var(--typography-size-body-md);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body-md);
+  letter-spacing: var(--font-letter-spacing-default);
+
+  .topbar {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: var(--scale-400);
+
+    tems-button:nth-child(2) {
+      margin-left: auto;
+    }
+  }
+
+  .modal-content-wrapper {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .modal-box {
+      flex: 1;
+      display: flex;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-400);
+      height: fit-content;
+      width: 100%;
+    }
+
+    tems-division {
+      width: fit-content;
+      div {
+        display: block;
+        height: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+
+    .card-grid-vertical ds4go-card-catalog {
+      width: 354px;
+      height: auto;
+    }
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  div.modal {
+    width: fit-content;
+    max-width: 80vw;
+    height: fit-content;
+    max-height: 80vw;
+  }
+}

package/src/styles/modal/ds4go-fact-bundle-modal.scss

@@ -74,7 +74,7 @@
       justify-content: stretch;
     }
 
-    .card-grid-vertical tems-card-catalog {
+    .card-grid-vertical ds4go-card-catalog {
       width: 354px;
       height: auto;
     }

package/vite.config.ts

@@ -31,13 +31,13 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@components": "/src/components",
-      "@cypress": "/cypress",
-      "@helpers": "/src/helpers",
-      "@mocks": "/src/mocks",
-      "@stories": "/stories",
-      "@styles": "/src/styles",
-      "@src": "/src",
+      "@components": resolve(__dirname, "./src/components"),
+      "@cypress": resolve(__dirname, "./cypress"),
+      "@helpers": resolve(__dirname, "./src/helpers"),
+      "@mocks": resolve(__dirname, "./src/mocks"),
+      "@stories": resolve(__dirname, "./stories"),
+      "@styles": resolve(__dirname, "./src/styles"),
+      "@src": resolve(__dirname, "./src"),
     },
   },
 });

package/src/components/solid-boilerplate.ts

@@ -1,76 +0,0 @@
-import { Task } from "@lit/task";
-import type { PropertiesPicker } from "@src/component";
-import { css, html, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import "@src/initializer";
-import * as utils from "@helpers";
-
-@customElement("solid-boilerplate")
-export class SolidBoilerplate extends utils.OrbitComponent {
-  async _afterAttach() {
-    // Eg. https://api.server/some-keyword/1/ should trigger an update:
-    utils.setupCacheInvalidation(this, {
-      keywords: ["some-keyword", "for-invalidating", "cache"],
-    });
-    return Promise.resolve();
-  }
-
-  static styles = css`
-    div {
-      background-color: red;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  `;
-
-  cherryPickedProperties: PropertiesPicker[] = [{ key: "name", value: "name" }];
-
-  _getResource = new Task(this, {
-    task: async ([dataSrc]) => {
-      if (
-        !dataSrc ||
-        !this.orbit ||
-        (!this.noRouter &&
-          this.route &&
-          this.currentRoute &&
-          !this.route.startsWith(this.currentRoute))
-      )
-        return;
-
-      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
-        if (!dataSrc) return;
-        this.datas = await this._getProxyValue(dataSrc);
-        this.hasCachedDatas = true;
-      }
-
-      if (this.oldDataSrc !== dataSrc) {
-        this.oldDataSrc = dataSrc;
-      }
-
-      return utils.sort(this.datas, "name", "asc");
-    },
-    args: () => [this.dataSrc, this.caching, this.currentRoute],
-  });
-
-  render() {
-    return (
-      this.gatekeeper() ||
-      this._getResource.render({
-        pending: () => html`<solid-loader></solid-loader>`,
-        complete: (datas) => {
-          if (!datas) {
-            return nothing;
-          }
-
-          return html`<div>
-            <sample-objects .objects=${datas}></sample-objects>
-          </div>`;
-        },
-      })
-    );
-  }
-}