@govtechsg/sgds-web-component 3.3.0 → 3.3.1

package/{src/internals → components}/OverflowMenu/sgds-overflow-menu.d.ts

@@ -1,7 +1,7 @@
 import SgdsElement from "../../base/sgds-element";
-import { SgdsDropdown } from "../../components/Dropdown/sgds-dropdown";
-import { SgdsDropdownItem } from "../../components/Dropdown/sgds-dropdown-item";
-import { SgdsIcon } from "../../components/Icon/sgds-icon";
+import SgdsDropdown from "../Dropdown/sgds-dropdown";
+import SgdsDropdownItem from "../Dropdown/sgds-dropdown-item";
+import SgdsIcon from "../Icon/sgds-icon";
 /**
  * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.
  * @slot default - The overflow menu items. Pass in sgds-dropdown-items in this slot

package/{internals → components}/OverflowMenu/sgds-overflow-menu.js

@@ -3,9 +3,9 @@ import { html } from 'lit';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './overflow-menu.js';
 import { property } from 'lit/decorators.js';
-import { SgdsDropdown } from '../../components/Dropdown/sgds-dropdown.js';
-import { SgdsDropdownItem } from '../../components/Dropdown/sgds-dropdown-item.js';
-import { SgdsIcon } from '../../components/Icon/sgds-icon.js';
+import { SgdsDropdown } from '../Dropdown/sgds-dropdown.js';
+import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 
 /**
  * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.

package/components/OverflowMenu/sgds-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-overflow-menu.js","sources":["../../../src/components/OverflowMenu/sgds-overflow-menu.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport overflowMenuStyles from \"./overflow-menu.css\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.\n * @slot default - The overflow menu items. Pass in sgds-dropdown-items in this slot\n */\nexport class SgdsOverflowMenu extends SgdsElement {\n  static styles = [...SgdsElement.styles, overflowMenuStyles];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  render() {\n    return html`\n      <sgds-dropdown>\n        <button slot=\"toggler\" class=\"overflow-btn\">\n          <sgds-icon name=\"three-dots\" size=${this.size}></sgds-icon>\n        </button>\n        <slot></slot>\n      </sgds-dropdown>\n    `;\n  }\n}\n\nexport default SgdsOverflowMenu;\n"],"names":["overflowMenuStyles"],"mappings":";;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAS6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;KAYrE;IAVC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAG+B,4CAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;;KAIlD,CAAC;KACH;;AAnBM,gBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAC5D;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,eAAe,EAAE,YAAY;AAC7B,IAAA,oBAAoB,EAAE,gBAAgB;AACtC,IAAA,WAAW,EAAE,QAAQ;AACtB,CAJkB,CAIjB;AAEyC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Select/index.umd.js

@@ -8429,6 +8429,7 @@
                   //working
                   this.dropdownConfig = {
                       placement: "bottom-start",
+                      strategy: "fixed",
                       modifiers: !this.noFlip
                           ? this.modifierOpt
                           : [
@@ -8526,7 +8527,7 @@
       state()
   ], DropdownElement.prototype, "dropdownConfig", void 0);
   __decorate([
-      property()
+      property({ type: Array })
   ], DropdownElement.prototype, "modifierOpt", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
@@ -8680,6 +8681,19 @@
       state()
   ], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
 
+  const referenceTargetWidth = {
+      name: "sameWidthAsTarget",
+      enabled: true,
+      phase: "beforeWrite",
+      requires: ["computeStyles"],
+      fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      effect: ({ state }) => {
+          state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+      }
+  };
+
   class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
       constructor() {
           super();
@@ -8731,7 +8745,8 @@
                   options: {
                       offset: [0, 8]
                   }
-              }
+              },
+              referenceTargetWidth
           ];
       }
       connectedCallback() {
@@ -11386,7 +11401,7 @@
       property({ type: String, reflect: true })
   ], SgdsIcon.prototype, "size", void 0);
 
-  var css_248z$1 = css`:host{display:block;position:relative}.select{flex-direction:column;gap:var(--sgds-form-gap-md)}.select .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.select{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;caret-color:transparent;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.select-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
+  var css_248z$1 = css`:host{display:block;position:relative}.select{flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.select{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;caret-color:transparent;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.select-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 
   var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;