@duetds/components 4.32.0 → 4.34.0

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

@@ -121,14 +121,14 @@ export class DuetSelect {
     if (this.nativeSelect) {
       this.nativeSelect.value = this.value;
     }
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
   /**
@@ -176,8 +176,8 @@ export class DuetSelect {
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
         h("div", { class: "duet-select-wrapper" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)),
           h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy },
             this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)),
             !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -124,8 +124,8 @@
 }
 .duet-theme-turva .duet-tab-button.selected {
   color: white !important;
-  background-color: #444445;
-  border-color: #444445 !important;
+  background-color: #171c3a;
+  border-color: #171c3a !important;
 }
 .duet-tab-button:focus {
   z-index: 200;

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

@@ -177,59 +177,60 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
-.duet-table-minimal th, .duet-table-plain th {
+.duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
   padding: 16px !important;
   border-bottom: 1px solid #657787;
 }
-.duet-table-minimal th:first-child, .duet-table-plain th:first-child {
+.duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal th:last-child, .duet-table-plain th:last-child {
+.duet-table-fixed th:last-child, .duet-table-minimal th:last-child, .duet-table-plain th:last-child {
   padding-right: 0 !important;
 }
-.duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
+.duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
   border-bottom-color: #444445;
 }
-.duet-table-minimal tbody th, .duet-table-plain tbody th {
+.duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
   padding-top: 40px !important;
   border-bottom-color: #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
+.duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-minimal td, .duet-table-plain td {
+.duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
   padding: 16px !important;
 }
-.duet-table-minimal td:first-child, .duet-table-plain td:first-child {
+.duet-table-fixed td:first-child, .duet-table-minimal td:first-child, .duet-table-plain td:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal td:last-child, .duet-table-plain td:last-child {
+.duet-table-fixed td:last-child, .duet-table-minimal td:last-child, .duet-table-plain td:last-child {
   padding-right: 0 !important;
 }
-.duet-table-minimal tbody td, .duet-table-plain tbody td {
+.duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
   border-bottom: 1px solid #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
+.duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
+.duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
   padding-top: 0 !important;
 }
-.duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed td, .duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed tbody th,
 .duet-table-flattened.duet-table-minimal tbody th,
 .duet-table-flattened.duet-table-plain tbody th {
   border-bottom: 0;
 }
-.duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
+.duet-table-flattened.duet-table-fixed tr, .duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
   padding: 20px 0 !important;
 }
-.duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
+.duet-table-flattened.duet-table-fixed tbody th, .duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
   padding-top: 20px !important;
 }
-.duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
+.duet-table-flattened.duet-table-fixed tfoot td, .duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
   margin-bottom: 4px !important;
 }
-.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
+.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
   border-bottom: 0;
 }
 
@@ -263,6 +264,30 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
+.duet-table-fixed table {
+  table-layout: fixed;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td,
+.duet-table-fixed tbody tr td:first-child {
+  padding: 4px !important;
+  vertical-align: text-bottom;
+  border-bottom: 0 none;
+}
+.duet-table-fixed thead {
+  display: none;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td {
+  border-bottom: 0 none;
+}
+.duet-table-fixed:not(.duet-table-flattened) tfoot {
+  border-top: 1px solid #e1e3e6;
+}
+.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
+  border-top-color: #e4e4e6;
+}
+
 .duet-table-scrollable {
   position: relative;
   width: 100%;

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

@@ -64,7 +64,7 @@ export class DuetTable {
       return;
     }
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addListener(this.handleMediaQueryChange);
+    this.mq.addEventListener("change", this.handleMediaQueryChange);
     this.handleMediaQueryChange(this.mq);
     this.observer = new MutationObserver(() => this.copyHeadingsToCells());
     this.observer.observe(this.element, {
@@ -185,7 +185,7 @@ export class DuetTable {
       "mutable": false,
       "complexType": {
         "original": "DuetTableVariant",
-        "resolved": "\"plain\" | \"striped\"",
+        "resolved": "\"fixed\" | \"plain\" | \"striped\"",
         "references": {
           "DuetTableVariant": {
             "location": "local"

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

@@ -68,6 +68,25 @@ duet-tooltip {
   display: flex !important;
 }
 
+.duet-textarea-wrapper {
+  position: relative;
+}
+
+.duet-textarea-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-textarea {
   padding: 15px !important;
   position: relative;

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

@@ -105,7 +105,7 @@ export class DuetTextarea {
         cleanValue(this.nativeInput, this.disallowPatternRegex);
       }
       this.value = this.nativeInput.value;
-      this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+      this.isCaptionVisible = !!this.caption;
       this.duetInput.emit({
         originalEvent: ev,
         value: this.value,
@@ -144,7 +144,7 @@ export class DuetTextarea {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.disallowedPatternChange();
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     if (this.counter && this.maxlength == null) {
       console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
     }
@@ -183,8 +183,9 @@ export class DuetTextarea {
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
-        h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier }),
+        h("div", { class: "duet-textarea-wrapper" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)),
+          h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })),
         h("duet-grid", { alignment: "stretch" },
           h("duet-grid-item", { margin: "none", fill: true },
             h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))),

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

@@ -0,0 +1,64 @@
+*,
+*::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;
+}
+
+::slotted([slot=header]) {
+  margin-bottom: 16px;
+}
+
+::slotted([slot=fileheader]) {
+  margin: 16px 0 0 0;
+}
+
+::slotted([slot=filefooter]) {
+  margin-top: 16px;
+}
+
+.duet-upload {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.duet-upload-item-size {
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+.duet-upload-filelist {
+  margin-bottom: 25px;
+}
+.duet-upload-filelist-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 75px;
+  margin: 0 auto;
+  font-size: 1rem;
+  font-weight: 400;
+  background-color: #f5f8fa;
+}