@duetds/components 6.10.2 → 6.10.4

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

@@ -0,0 +1,395 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { createID } from "../../utils/create-id";
+export class DuetChip {
+  constructor() {
+    /**
+     * Own Properties.
+     */
+    this.chipId = createID("DuetChip");
+    this.popupSetUp = () => {
+      const popup = this.element.querySelector("duet-popup-menu");
+      if (popup) {
+        this.popup = popup;
+        popup.controller = this.element;
+        const labelSpan = this.element.querySelector("span");
+        const originalText = labelSpan.textContent;
+        const originalValue = this.value;
+        if (!popup.id) {
+          popup.id = "popup-menu";
+        }
+        popup.addEventListener("duetToggle", (evt) => {
+          this.popupOpen = evt.detail.open;
+        });
+        const clearActive = () => {
+          popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+            item.active = false;
+          });
+        };
+        popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+          item.addEventListener("click", evt => {
+            var _a;
+            const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
+            if (!item.active) {
+              clearActive();
+              item.active = true;
+              labelSpan.textContent = item.innerText;
+              this.value = value;
+              this.checked = true;
+            }
+            else {
+              clearActive();
+              labelSpan.textContent = originalText;
+              this.value = originalValue;
+              this.checked = false;
+            }
+            this.emitChange(evt);
+            // A workaround to the difference of event handling between the browers.
+            // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
+            // open the popup again. Firefox does not have this behavior.
+            setTimeout(() => {
+              if (this.popup.isOpen()) {
+                this.popup.hide();
+              }
+            });
+          });
+        });
+      }
+    };
+    /**
+     * Component event handling.
+     */
+    this.onFocus = (ev) => {
+      this.focus = true;
+      this.duetFocus.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.focus = false;
+      this.duetBlur.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    this.emitChange = originalEvent => {
+      this.duetChange.emit({
+        originalEvent,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    /**
+     * Change checked state and emit duetChange event.
+     */
+    this.onFilterChange = (evt) => {
+      this.checked = !this.checked;
+      this.emitChange(evt);
+    };
+    /**
+     * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+     */
+    this.onFilterClick = (evt) => {
+      if (this.popup) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        this.popup.toggle();
+      }
+    };
+    /**
+     * Remove input chip
+     */
+    this.onRemoveClick = (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+      this.element.remove();
+    };
+    this.focus = false;
+    this.popup = undefined;
+    this.popupOpen = undefined;
+    this.accessibleLabel = undefined;
+    this.variation = "button";
+    this.icon = "";
+    this.theme = "";
+    this.identifier = undefined;
+    this.value = undefined;
+    this.name = undefined;
+    this.checked = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.popupSetUp();
+  }
+  render() {
+    var _a;
+    const identifier = this.identifier || this.chipId;
+    const classes = {
+      "duet-chip-container": true,
+      [`duet-chip-${this.variation}`]: true,
+      "duet-chip-focus": this.focus,
+      "duet-chip-has-icon": !!this.icon,
+      "duet-theme-turva": this.theme === "turva",
+      "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+      "duet-chip-filter-popup-open": this.popupOpen,
+    };
+    const focusHandlers = {
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+    };
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" }))))))));
+  }
+  static get is() { return "duet-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetChipVariation",
+          "resolved": "\"button\" | \"filter\" | \"input\"",
+          "references": {
+            "DuetChipVariation": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nWARNING: Input variation is still work-in-progress and subject to change."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display to the left of the chip content."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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 of the button."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the chip."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the html input when used as filter, or the button's value."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name attribute of the html input (filter) or button."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checked state of the filter chip."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focus": {},
+      "popup": {},
+      "popupOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checked property has changed (applicable only for the filter variation)."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the chip receives focus."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the chip loses focus."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -151,47 +151,49 @@
 .duet-theme-turva .info .duet-choice-label {
   border-color: rgb(228, 228, 230);
 }
-.duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(144, 149, 153);
-}
-.duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: rgb(144, 149, 153);
-}
-.duet-theme-turva .duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(116, 116, 117);
-}
-.duet-theme-turva .duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: rgb(116, 116, 117);
-}
-.duet-theme-turva .info .duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(116, 116, 117);
-}
 .duet-choice-label:active {
   opacity: 0.75;
   transition: none !important;
 }
-.checked .duet-choice-label {
+.checked > .duet-choice-label {
   color: rgb(0, 119, 179) !important;
   background: rgb(243, 249, 252);
   border-color: rgb(0, 119, 179) !important;
 }
-.checked .duet-choice-label .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .checked .duet-choice-label {
+.duet-theme-turva .checked > .duet-choice-label {
   color: rgb(23, 28, 58) !important;
   background: rgb(245, 245, 247);
   border-color: rgb(23, 28, 58) !important;
 }
-.duet-theme-turva .checked .duet-choice-label .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(198, 12, 48);
 }
-.checked.collapsible .duet-choice-label {
+.checked.collapsible > .duet-choice-label, .collapsible-force-expanded.collapsible > .duet-choice-label {
+  padding-bottom: calc(1rem + 2px);
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+  border-color: rgb(144, 149, 153);
+}
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
+  border-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
+  border-color: rgb(116, 116, 117);
+}
+.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+
 input:focus {
   outline: 0;
 }
@@ -236,12 +238,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(116, 116, 117) !important;
 }
 
-.checked input[disabled] + .duet-choice-label {
+.checked > input[disabled] + .duet-choice-label {
   background: rgb(225, 227, 230) !important;
   border-color: rgb(225, 227, 230) !important;
 }
 
-.duet-theme-turva .checked input[disabled] + .duet-choice-label {
+.duet-theme-turva .checked > input[disabled] + .duet-choice-label {
   background: rgb(228, 228, 230) !important;
   border-color: rgb(228, 228, 230) !important;
 }
@@ -258,12 +260,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
 }
-.checked .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(0, 119, 179);
   border-color: rgb(0, 119, 179);
   transition: none;
 }
-.duet-theme-turva .checked .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58) !important;
 }
@@ -276,10 +278,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
   border-color: rgb(207, 207, 209) !important;
 }
-.checked [disabled] + label .duet-checkmark-container {
+.checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 210, 212) !important;
 }
-.duet-theme-turva .checked [disabled] + label .duet-checkmark-container {
+.duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 207, 209) !important;
 }
 
@@ -341,7 +343,6 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-choice-card-info, .duet-choice-card-collapsible {
   padding: 20px !important;
   position: relative;
-  z-index: 200;
   width: 100%;
   font-weight: 400;
   color: rgb(0, 41, 77);
@@ -358,7 +359,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58);
 }
-.checked .duet-choice-card-info, .checked .duet-choice-card-collapsible {
+.checked > .duet-choice-card-info, .checked > .duet-choice-card-collapsible {
   display: block;
 }
 .duet-choice-card-info-expanded, .duet-choice-card-collapsible-expanded {
@@ -366,21 +367,33 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-collapsible {
   background: rgb(255, 255, 255);
-  border: 2px solid rgb(0, 119, 179);
+  border: 2px solid rgb(225, 227, 230);
   border-top: 0;
 }
 .duet-choice-card-collapsible.duet-theme-turva {
   background: rgb(255, 255, 255);
+  border-color: rgb(228, 228, 230);
+}
+.duet-choice-card-collapsible.checked {
+  border-color: rgb(0, 119, 179);
+}
+.duet-choice-card-collapsible.checked.duet-theme-turva {
   border-color: rgb(23, 28, 58);
 }
 .duet-choice-card-collapsible-disabled {
   background: rgb(245, 248, 250);
   border-color: rgb(225, 227, 230);
 }
+.duet-choice-card-collapsible-disabled.checked {
+  border-color: rgb(225, 227, 230);
+}
 .duet-choice-card-collapsible-disabled.duet-theme-turva {
   background: rgb(245, 245, 247);
   border-color: rgb(228, 228, 230);
 }
+.duet-choice-card-collapsible-disabled.duet-theme-turva.checked {
+  border-color: rgb(228, 228, 230);
+}
 .duet-choice-card-info {
   font-size: 0.875rem;
   line-height: 1.5;
@@ -392,6 +405,13 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+  border-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+
 .duet-choice-info-toggle {
   display: flex;
   flex-shrink: 0;
@@ -413,6 +433,9 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
 }
+.duet-theme-turva .duet-choice-info-toggle[aria-expanded=true] {
+  background: rgb(245, 245, 247);
+}
 .duet-choice-info-toggle[disabled] {
   pointer-events: none;
   background: rgb(245, 248, 250) !important;
@@ -434,10 +457,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 :host(.user-is-tabbing) .duet-choice-info-toggle:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-.duet-choice-label:not(.no-hover):hover .duet-choice-info-toggle {
-  border-left-color: rgb(144, 149, 153);
-}
-.checked .duet-choice-info-toggle {
+.checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
 .duet-choice-info-toggle duet-icon {
@@ -450,6 +470,13 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(198, 12, 48);
 }
 
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
+  border-left-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
+  border-left-color: rgb(116, 116, 117);
+}
+
 .duet-choice-input {
   position: absolute !important;
   width: 100%;