@duetds/components 6.0.7 → 6.2.0

package/lib/collection/components/duet-menu-bar-menu-link/duet-menu-bar-menu-link.js

@@ -0,0 +1,129 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBarMenuLink {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Active
+     */
+    this.active = false;
+    /**
+     * Href
+     */
+    this.href = "#";
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: { "duet-menu-bar-menu-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, role: "menuitem" },
+        this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }),
+        h("slot", null))));
+  }
+  static get is() { return "duet-menu-bar-menu-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-menu-bar-menu-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-menu-bar-menu-link.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": "\"\""
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "\"#\""
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon"
+      },
+      "attribute": "icon",
+      "reflect": true,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,257 @@
+*,
+*::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-right: 16px !important;
+  margin-bottom: 12px !important;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+:host:last-child, :host:last-of-type {
+  margin-right: 0 !important;
+}
+@media (min-width: 36em) {
+  :host {
+    width: calc(50% - 16px - 3px);
+  }
+  :host.duet-expand {
+    width: 100% !important;
+  }
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+
+.duet-multiselect-tooltip {
+  position: absolute;
+  top: 12px;
+  right: 0;
+}
+@media (min-width: 48em) {
+  .duet-multiselect-tooltip {
+    position: relative;
+    top: 4px;
+    right: auto;
+  }
+}
+
+.duet-multiselect-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
+.duet-multiselect-container {
+  position: relative;
+  width: 100%;
+}
+
+.duet-multiselect-wrapper {
+  position: relative;
+  width: 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: 400;
+  line-height: 1.25;
+}
+.duet-theme-turva .duet-multiselect-wrapper {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.duet-multiselect {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 8rem;
+  padding: 12px 14px !important;
+  overflow: hidden;
+  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: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+  color: #00294d;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #909599;
+  border-radius: 4px;
+  transition: 150ms ease;
+}
+.duet-multiselect:hover {
+  border-color: #909599;
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-theme-turva .duet-multiselect:hover {
+  border-color: #747475;
+  box-shadow: 0 0 0 1px #747475;
+}
+.has-error .duet-multiselect:hover {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect:hover {
+  box-shadow: 0 0 0 1px #e02a0d;
+}
+.duet-multiselect:focus, .duet-multiselect.duet-multiselect-active {
+  border-color: #0077b3;
+  outline: 0;
+  box-shadow: 0 0 0 1px #0077b3;
+  transition: none;
+}
+.duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
+  border-color: #171c3a;
+  box-shadow: 0 0 0 1px #171c3a;
+}
+.has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect:focus, .duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active {
+  box-shadow: 0 0 0 1px #e02a0d;
+}
+.duet-multiselect[disabled] {
+  color: #00294d !important;
+  cursor: default !important;
+  background: #f5f8fa !important;
+  border-color: #f5f8fa !important;
+  box-shadow: none !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: #00294d !important;
+}
+.duet-theme-turva .duet-multiselect[disabled] {
+  color: #171c3a !important;
+  background: #f5f5f7 !important;
+  border-color: #f5f5f7 !important;
+  -webkit-text-fill-color: #171c3a !important;
+}
+.duet-multiselect > :first-child {
+  flex: 1;
+}
+.duet-multiselect .duet-multiselect-badge {
+  position: absolute;
+  right: 3rem;
+}
+.has-error .duet-multiselect {
+  border-color: #de2362 !important;
+}
+.has-error .duet-multiselect .duet-multiselect-icon {
+  color: #de2362 !important;
+}
+.duet-theme-turva.has-error .duet-multiselect {
+  border-color: #e02a0d !important;
+}
+.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon {
+  color: #e02a0d !important;
+}
+.duet-theme-turva .duet-multiselect {
+  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;
+  border-color: #747475;
+}
+.duet-multiselect svg {
+  width: 20px;
+  height: 20px;
+  color: #00294d;
+  pointer-events: none;
+}
+.duet-theme-turva .duet-multiselect svg {
+  color: #171c3a;
+}
+.duet-multiselect svg.duet-multiselect-icon--rotate {
+  transform: rotate(180deg);
+}
+
+.duet-multiselect-checkboxes {
+  position: absolute;
+  z-index: 700;
+  width: 100%;
+  padding: 16px;
+  margin: 8px 0 0;
+  visibility: hidden;
+  background: white;
+  border: 1px solid #e1e3e6;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
+  opacity: 0;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
+  transform: scale(0.96) translateZ(0) translateY(-20px);
+  transform-origin: top right;
+}
+.duet-theme-turva .duet-multiselect-checkboxes {
+  background: white;
+  border-color: #e4e4e6;
+  box-shadow: 0 4px 10px 0 rgba(23, 28, 58, 0.15);
+}
+.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
+  visibility: visible;
+  opacity: 1;
+  transition-property: transform, opacity;
+  transform: scale(1.0001) translateZ(0) translateY(0);
+}
+
+.duet-multiselect-help {
+  display: block;
+  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;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #657787;
+  border-radius: 4px;
+}
+.duet-multiselect-help span {
+  display: block;
+  margin-top: 8px;
+}
+.duet-theme-turva .duet-multiselect-help {
+  color: #747475;
+}
+.has-error .duet-multiselect-help {
+  color: #de2362;
+}
+.duet-theme-turva.has-error .duet-multiselect-help {
+  color: #e02a0d;
+}
+
+.duet-label-hidden duet-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}