@duetds/components 6.6.2 → 6.7.1

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,261 @@
+/*!
+ * 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() {
+    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" }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none" }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none" }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}` }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none" }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}` }, 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 }, 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/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
             }
           }
         }

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -73,15 +73,15 @@
   justify-content: center;
   width: 48px;
   height: calc(100% - 2px);
-  color: #00294d;
+  color: rgb(0, 41, 77);
   cursor: pointer;
   background: transparent !important;
-  border-left: 1px solid #cfd2d4 !important;
+  border-left: 1px solid rgb(207, 210, 212) !important;
   border-radius: 0 4px 4px 0 !important;
 }
 .duet-theme-turva .duet-date-button {
-  color: #171c3a;
-  border-color: #cfcfd1;
+  color: rgb(23, 28, 58);
+  border-color: rgb(207, 207, 209);
 }
 .duet-date-button::before {
   position: absolute;
@@ -95,11 +95,11 @@
 .duet-date-button:disabled {
   pointer-events: none;
   cursor: default;
-  background: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
   border: 0 !important;
 }
 .duet-theme-turva .duet-date-button:disabled {
-  background: #f5f5f7 !important;
+  background: rgb(245, 245, 247) !important;
 }
 .duet-date-button:disabled::before {
   display: none;
@@ -114,14 +114,14 @@
   transform: translateY(0);
 }
 .duet-date-button:focus {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
   border-color: transparent;
   outline: 0;
-  box-shadow: 0 0 0 2px #0077b3;
+  box-shadow: 0 0 0 2px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-date-button:focus {
-  color: #171c3a;
-  box-shadow: 0 0 0 2px #171c3a;
+  color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px rgb(23, 28, 58);
 }
 
 .duet-date-dialog {
@@ -181,14 +181,14 @@
   padding: 16px 16px 20px;
   margin-top: 8px;
   margin-left: auto;
-  background: white;
-  border: 1px solid #e1e3e6;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(225, 227, 230);
   border-radius: 4px;
   box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   transform: none;
 }
 .duet-theme-turva .duet-date-dialog-wrapper {
-  border-color: #e4e4e6;
+  border-color: rgb(228, 228, 230);
 }
 @media (max-width: 35.9375em) {
   .duet-date-dialog-wrapper {
@@ -223,14 +223,14 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   border-spacing: 0;
   border-collapse: collapse;
 }
 .duet-date-table.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);
 }
 .duet-date-table th {
   padding-bottom: 8px;
@@ -259,7 +259,7 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25 !important;
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   text-align: center;
   vertical-align: initial !important;
   cursor: pointer;
@@ -269,74 +269,74 @@
 }
 .duet-theme-turva .duet-date-table-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-  color: #171c3a !important;
+  color: rgb(23, 28, 58) !important;
 }
 .duet-date-table-button:hover {
-  background: #e6f2f8 !important;
+  background: rgb(230, 242, 248) !important;
 }
 .duet-theme-turva .duet-date-table-button:hover {
-  background: #f9e6ea !important;
+  background: rgb(249, 230, 234) !important;
 }
 .duet-date-table-button.today {
   z-index: 200;
-  color: #004d80 !important;
-  background: #f3f9fc !important;
-  box-shadow: 0 0 0 1px #0077b3 !important;
+  color: rgb(0, 77, 128) !important;
+  background: rgb(243, 249, 252) !important;
+  box-shadow: 0 0 0 1px rgb(0, 119, 179) !important;
 }
 .duet-theme-turva .duet-date-table-button.today {
-  color: #940925 !important;
-  background: #fcf3f4 !important;
-  box-shadow: 0 0 0 1px #c60c30 !important;
+  color: rgb(148, 9, 37) !important;
+  background: rgb(252, 243, 244) !important;
+  box-shadow: 0 0 0 1px rgb(198, 12, 48) !important;
 }
 .duet-date-table-button[aria-pressed=true], .duet-date-table-button:focus {
-  color: white !important;
-  background: #0077b3 !important;
+  color: rgb(255, 255, 255) !important;
+  background: rgb(0, 119, 179) !important;
   outline: 0;
 }
 .duet-theme-turva .duet-date-table-button[aria-pressed=true], .duet-theme-turva .duet-date-table-button:focus {
-  color: white !important;
-  background: #c60c30 !important;
+  color: rgb(255, 255, 255) !important;
+  background: rgb(198, 12, 48) !important;
 }
 .duet-date-table-button:active {
   z-index: 200;
-  color: white !important;
-  background: #0077b3 !important;
-  box-shadow: 0 0 5px #0077b3 !important;
+  color: rgb(255, 255, 255) !important;
+  background: rgb(0, 119, 179) !important;
+  box-shadow: 0 0 5px rgb(0, 119, 179) !important;
 }
 .duet-theme-turva .duet-date-table-button:active {
-  color: white !important;
-  background: #c60c30 !important;
-  box-shadow: 0 0 5px #c60c30 !important;
+  color: rgb(255, 255, 255) !important;
+  background: rgb(198, 12, 48) !important;
+  box-shadow: 0 0 5px rgb(198, 12, 48) !important;
 }
 .duet-date-table-button:focus {
   z-index: 200;
-  box-shadow: 0 0 5px #0077b3 !important;
+  box-shadow: 0 0 5px rgb(0, 119, 179) !important;
 }
 .duet-theme-turva .duet-date-table-button:focus {
-  box-shadow: 0 0 5px #c60c30 !important;
+  box-shadow: 0 0 5px rgb(198, 12, 48) !important;
 }
 .duet-date-table-button.disabled {
-  color: #909599 !important;
+  color: rgb(144, 149, 153) !important;
   cursor: default;
   background: transparent !important;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-date-table-button.disabled {
-  color: #747475 !important;
+  color: rgb(116, 116, 117) !important;
   background: transparent !important;
   box-shadow: none !important;
 }
 .duet-date-table-button.outside {
-  color: #909599 !important;
+  color: rgb(144, 149, 153) !important;
   pointer-events: none;
   cursor: default;
-  background: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
   box-shadow: none;
   opacity: 0.75;
 }
 .duet-theme-turva .duet-date-table-button.outside {
-  color: #747475;
-  background: #f5f5f7;
+  color: rgb(116, 116, 117);
+  background: rgb(245, 245, 247);
   box-shadow: none;
 }
 
@@ -371,13 +371,13 @@
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   pointer-events: none;
   border-radius: 4px;
 }
 .duet-theme-turva .duet-date-dialog-select .duet-date-dialog-select-label {
   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);
 }
 .duet-date-dialog-select span {
   margin-right: 4px;
@@ -394,10 +394,10 @@
   opacity: 0;
 }
 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #0077b3;
+  box-shadow: 0 0 0 2px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #171c3a;
+  box-shadow: 0 0 0 2px rgb(23, 28, 58);
 }
 
 .duet-date-dialog-mobile-header {
@@ -412,7 +412,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-bottom: 1px solid #cfd2d4;
+  border-bottom: 1px solid rgb(207, 210, 212);
 }
 @media (min-width: 36em) {
   .duet-date-dialog-mobile-header {
@@ -427,7 +427,7 @@
   }
 }
 .duet-theme-turva .duet-date-dialog-mobile-header {
-  border-color: #cfcfd1;
+  border-color: rgb(207, 207, 209);
 }
 .duet-date-dialog-mobile-header duet-label {
   display: inline-block;
@@ -449,9 +449,9 @@
   width: 24px;
   height: 24px !important;
   padding: 0 !important;
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   cursor: pointer;
-  background: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
   border-radius: 50%;
   -webkit-appearance: none;
   appearance: none;
@@ -462,17 +462,17 @@
   }
 }
 .duet-theme-turva .duet-date-picker-close {
-  background: #f5f5f7 !important;
+  background: rgb(245, 245, 247) !important;
 }
 .duet-date-picker-close:hover {
-  background: #f5f8fa !important;
+  background: rgb(245, 248, 250) !important;
 }
 .duet-theme-turva .duet-date-picker-close:hover {
-  background: #f5f5f7 !important;
+  background: rgb(245, 245, 247) !important;
 }
 .duet-date-picker-close:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #0077b3;
+  box-shadow: 0 0 0 2px rgb(0, 119, 179);
 }
 @media (min-width: 36em) {
   .duet-date-picker-close:focus {
@@ -480,5 +480,5 @@
   }
 }
 .duet-theme-turva .duet-date-picker-close:focus {
-  box-shadow: 0 0 0 2px #171c3a;
+  box-shadow: 0 0 0 2px rgb(23, 28, 58);
 }