@dso-toolkit/core 53.0.0 → 54.0.0

package/dist/collection/components/selectable/selectable.css

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  padding-left: 32px;
   position: relative;
 }
 :host .dso-selectable-options {
@@ -135,8 +134,8 @@
 }
 :host > dso-info {
   float: none;
-  margin: 8px 16px 0 -32px;
-  width: calc(100% + 32px);
+  margin: 8px 16px 0 0;
+  width: 100%;
 }
 :host[invalid] {
   --dso-selectable-color: #ce3f51;
@@ -152,22 +151,36 @@
   box-sizing: border-box;
 }
 
-.dso-selectable-input-wrapper {
+.dso-selectable-container {
   display: inline-block;
-  margin-left: -32px;
+  position: relative;
+  padding-inline-start: 32px;
+}
+.dso-selectable-container.has-info-button {
+  padding-inline-end: 32px;
+}
+.dso-selectable-container .dso-selectable-input-wrapper {
+  display: inline;
+  margin-inline: -32px;
   min-height: 24px;
-  padding-left: 32px;
+  padding-inline: 32px;
 }
-.dso-selectable-input-wrapper:focus-within {
+.dso-selectable-container .dso-selectable-input-wrapper:focus-within {
   border-radius: 2px;
   outline-offset: 3px;
   outline: 3px solid #008ccc;
 }
-.dso-selectable-input-wrapper input[type=radio]:focus + label::before,
-.dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
+.dso-selectable-container .dso-selectable-input-wrapper input[type=radio]:focus + label::before,
+.dso-selectable-container .dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
   box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
   height: 20px;
   left: 2px;
   top: 2px;
   width: 20px;
+}
+
+dso-info-button {
+  position: absolute;
+  right: 0;
+  top: 0;
 }

package/dist/collection/components/selectable/selectable.js

@@ -1,4 +1,5 @@
 import { h, Fragment, forceUpdate, } from "@stencil/core";
+import clsx from "clsx";
 import { createIdentifier } from "../../utils/create-identifier";
 export class Selectable {
   constructor() {
@@ -42,7 +43,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
+    return (h(Fragment, null, h("div", { class: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" }))))));
   }
   getIdentifier() {
     var _a;

package/dist/collection/index.js

@@ -3,6 +3,7 @@ export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable/expandable.interfaces";
 export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";

package/dist/components/dropdown-menu.js

@@ -45,6 +45,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     this.open = false;
     this.dropdownAlign = "left";
+    this.dropdownOptionsOffset = 2;
     this.checkable = false;
     this.boundary = undefined;
     this.strategy = "auto";
@@ -57,6 +58,19 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
     });
   }
+  watchOptionsOffset() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, this.dropdownOptionsOffset],
+          },
+        },
+      ],
+    });
+  }
   watchStrategy() {
     this.setStrategy();
   }
@@ -129,7 +143,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         {
           name: "offset",
           options: {
-            offset: [0, 2], // 2px margin between button and options
+            offset: [0, this.dropdownOptionsOffset],
           },
         },
         {
@@ -200,12 +214,14 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get host() { return this; }
   static get watchers() { return {
     "dropdownAlign": ["watchPosition"],
+    "dropdownOptionsOffset": ["watchOptionsOffset"],
     "strategy": ["watchStrategy"]
   }; }
   static get style() { return dropdownMenuCss; }
 }, [1, "dso-dropdown-menu", {
     "open": [1540],
     "dropdownAlign": [1, "dropdown-align"],
+    "dropdownOptionsOffset": [2, "dropdown-options-offset"],
     "checkable": [4],
     "boundary": [1],
     "strategy": [1]