@duetds/components 6.7.0 → 6.8.0

package/lib/collection/components/duet-combobox/duet-combobox.css

@@ -10,34 +10,34 @@
   position: relative;
   width: auto;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 :host a {
-  color: #00294d;
+  color: rgb(0, 41, 77);
   transition: none;
 }
 :host.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 :host.duet-theme-turva a {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.option .option-tags {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.option.selected {
-  background: #f4cfd6;
+  background: rgb(244, 207, 214);
 }
 :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover {
-  color: white;
-  background: #c60c30;
+  color: rgb(255, 255, 255);
+  background: rgb(198, 12, 48);
 }
 :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active .option-tags, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus .option-tags, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover .option-tags {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active a, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus a, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover a {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 
 .duet-combobox-list {
@@ -45,7 +45,7 @@
   top: calc(100% - 12px);
   height: 0;
   overflow: hidden;
-  background: white;
+  background: rgb(255, 255, 255);
   border-radius: 0 4px;
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.1);
   opacity: 0;
@@ -83,7 +83,7 @@
   float: right;
   padding-right: 0.875rem;
   font-weight: 400;
-  color: #909599;
+  color: rgb(144, 149, 153);
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.option-link {
   display: block;
@@ -91,21 +91,21 @@
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.selected {
   padding-left: 0;
-  background: #cde5f1;
+  background: rgb(205, 229, 241);
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.selected.option .option-icon {
   padding: 0 8px 0 8px;
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.selected.option .option-tags {
-  color: #909599;
+  color: rgb(144, 149, 153);
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.active, .duet-combobox-list .duet-combobox-listbox .list-item:focus, .duet-combobox-list .duet-combobox-listbox .list-item:hover {
-  color: white;
-  background: #0077b3;
+  color: rgb(255, 255, 255);
+  background: rgb(0, 119, 179);
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.active .option-tags, .duet-combobox-list .duet-combobox-listbox .list-item:focus .option-tags, .duet-combobox-list .duet-combobox-listbox .list-item:hover .option-tags {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 .duet-combobox-list .duet-combobox-listbox .list-item.active a, .duet-combobox-list .duet-combobox-listbox .list-item:focus a, .duet-combobox-list .duet-combobox-listbox .list-item:hover a {
-  color: white;
+  color: rgb(255, 255, 255);
 }

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -50,6 +50,7 @@ export class DuetCombobox {
     this.formatter = (item) => item && item.name ? item.name : "";
     this.value = undefined;
     this.minCharacters = 1;
+    this.openListOnClick = false;
   }
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
@@ -84,7 +85,12 @@ export class DuetCombobox {
     this.input = this.element.querySelector("duet-input");
     this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
     this.input.addEventListener("click", () => {
-      this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
+      if (!this.openListOnClick) {
+        this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
+      }
+      else {
+        this.listOpen = !this.listOpen;
+      }
     });
     this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
     //add correct aria attributes to the input element
@@ -460,7 +466,8 @@ export class DuetCombobox {
           "resolved": "(item: DuetComboboxItem) => string",
           "references": {
             "DuetComboboxItem": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         },
@@ -512,6 +519,24 @@ export class DuetCombobox {
         "attribute": "min-characters",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "openListOnClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines if items list should always open after clicking on input"
+        },
+        "attribute": "open-list-on-click",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -542,7 +567,8 @@ export class DuetCombobox {
           "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
           "references": {
             "DuetComboboxEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         }
@@ -565,7 +591,8 @@ export class DuetCombobox {
               "location": "global"
             },
             "DuetComboboxItem": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           },
           "return": "Promise<string>"

package/lib/collection/components/duet-contact-card/duet-contact-card.css

@@ -0,0 +1,85 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 12px !important;
+  display: block;
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+
+::slotted(*) {
+  padding-top: 1.5rem;
+}
+@media (min-width: 48em) {
+  ::slotted(*) {
+    grid-column: 2/span 2;
+    padding-top: 0;
+  }
+}
+
+.duet-contact-card {
+  display: grid;
+  grid-template-columns: 100%;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: rgb(0, 41, 77);
+}
+.duet-contact-card.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(23, 28, 58);
+}
+@media (min-width: 48em) {
+  .duet-contact-card {
+    grid-template-columns: min-content minmax(0, 1fr) auto;
+    gap: 20px;
+  }
+}
+.duet-contact-card .image {
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: 8px;
+  border-radius: 4px;
+}
+@media (min-width: 48em) {
+  .duet-contact-card .image {
+    width: 6rem;
+    height: 6rem;
+    padding-bottom: 0;
+  }
+}
+.duet-contact-card .description {
+  padding-bottom: 8px;
+}
+.duet-contact-card .email,
+.duet-contact-card .phone {
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  padding-bottom: 8px;
+  word-break: break-all;
+}

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -0,0 +1,263 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+export class DuetContactCard {
+  constructor() {
+    /**
+     * Own Properties.
+     */
+    this.phoneLabel = {
+      en: "Phone",
+      fi: "Puhelin",
+      sv: "Telefon",
+    };
+    this.language = getLanguage();
+    this.theme = "";
+    this.margin = "auto";
+    this.image = undefined;
+    this.name = undefined;
+    this.description = undefined;
+    this.email = undefined;
+    this.phone = undefined;
+    this.buttonText = undefined;
+    this.buttonIcon = "form-date";
+    this.buttonUrl = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const isTurva = this.theme === "turva";
+    const theme = isTurva ? "turva" : "default";
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        "duet-contact-card": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, "aria-role": "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", null, this.name && (h("duet-heading", { class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { class: "call-to-action" }, h("duet-button", { variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", null), h("slot", null))));
+  }
+  static get is() { return "duet-contact-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-contact-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-contact-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "image": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image."
+        },
+        "attribute": "image",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description."
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "email": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Email."
+        },
+        "attribute": "email",
+        "reflect": false
+      },
+      "phone": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Phone."
+        },
+        "attribute": "phone",
+        "reflect": false
+      },
+      "buttonText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button text."
+        },
+        "attribute": "button-text",
+        "reflect": false
+      },
+      "buttonIcon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button icon."
+        },
+        "attribute": "button-icon",
+        "reflect": false,
+        "defaultValue": "\"form-date\""
+      },
+      "buttonUrl": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button url."
+        },
+        "attribute": "button-url",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.css

@@ -44,18 +44,18 @@
 
 :host(.user-is-tabbing:focus) {
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 
 :host(.user-is-tabbing.duet-theme-turva:focus) {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 
 .duet-cookie-consent {
   padding: 20px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 0.875rem;
-  color: white !important;
+  color: rgb(255, 255, 255) !important;
   background-color: rgba(0, 21, 39, 0.9);
 }
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
@@ -93,7 +93,7 @@
 
 ::slotted(a) {
   font-weight: 600;
-  color: white !important;
+  color: rgb(255, 255, 255) !important;
   text-decoration: underline;
   white-space: nowrap;
 }
@@ -106,10 +106,10 @@
 
 ::slotted(a:focus) {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 
 .duet-theme-turva ::slotted(a:focus) {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -98,7 +98,8 @@ export class DuetCookieConsent {
           "resolved": "{ component: \"duet-cookie-consent\"; }",
           "references": {
             "DuetCookieConsentEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
             }
           }
         }