@duetds/components 4.36.1 → 5.0.2

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

@@ -351,63 +351,8 @@
 .duet-date-dialog-buttons {
   white-space: nowrap;
 }
-.duet-date-dialog-buttons button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  min-height: auto !important;
-  padding: 0 !important;
-  margin: 0 0 0 8px !important;
-  color: #00294d;
-  cursor: pointer;
-  background: #f5f8fa;
-  border-radius: 50%;
-  transition: background-color 300ms ease !important;
-}
-.duet-theme-turva .duet-date-dialog-buttons button {
-  color: #171c3a;
-  background: #f5f5f7;
-}
-.duet-date-dialog-buttons button duet-icon {
-  display: block;
-}
-@media (max-width: 35.9375em) {
-  .duet-date-dialog-buttons button {
-    width: 40px;
-    height: 40px;
-  }
-}
-.duet-date-dialog-buttons button:not(:disabled):hover {
-  background: #e9ecee !important;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:not(:disabled):hover {
-  background: #e9e9eb !important;
-}
-.duet-date-dialog-buttons button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:focus {
-  box-shadow: 0 0 0 2px #171c3a;
-}
-.duet-date-dialog-buttons button:active:focus {
-  background: #dddfe1;
-  box-shadow: none;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:active:focus {
-  background: #ddddde;
-}
-.duet-date-dialog-buttons button:disabled {
-  color: #909599;
-  cursor: default;
-  background: #f5f8fa;
-  opacity: 0.75;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:disabled {
-  color: #747475;
-  background: #f5f5f7;
+.duet-date-dialog-buttons ::part(button) {
+  border: 0;
 }
 
 .duet-date-dialog-select {

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

@@ -434,12 +434,8 @@ export class DuetDatePicker {
                   h("span", null, this.focusedDay.getFullYear()),
                   h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))),
             h("div", { class: "duet-date-dialog-buttons" },
-              h("button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" },
-                h("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }),
-                h("duet-visually-hidden", null, text.prevMonthLabel)),
-              h("button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" },
-                h("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }),
-                h("duet-visually-hidden", null, text.nextMonthLabel)))),
+              h("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel),
+              h("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))),
           h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })),
         h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }

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

@@ -4,10 +4,11 @@
 import { h } from "@stencil/core";
 //simple functional component that renders the data in the table
 export const TableData = ({ data, groupId, alignment }, _children) => {
+  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
   if (typeof data === "string") {
-    return (h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
+    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
   }
   else {
-    return (h("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
   }
 };

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

@@ -1,4 +1,4 @@
-duet-editable-table {
+:host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -9,6 +9,25 @@ duet-editable-table {
   appearance: none;
 }
 
+.duet-editable-table-actions-menu {
+  position: relative;
+  padding: 0 !important;
+  margin: 0;
+}
+.duet-editable-table-actions-menu-button {
+  position: relative;
+  right: -16px;
+  float: right;
+  padding: 0;
+}
+.duet-editable-table-actions-menu-icon .duet-icon {
+  max-width: 16px;
+  max-height: 16px;
+}
+.duet-editable-table-row.duet-table-action-row .duet-text-right {
+  text-align: right;
+}
+
 .duet-editable-table-header tr .duet-editable-table-header-hidden {
   padding: 0 !important;
   font-size: 0;