@momentum-design/components 0.117.3 → 0.118.0

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -29,16 +29,19 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
- *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
  */
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-        * Indicates the unique identifier for the native input element.
-        * Required for acccessibility.
-        * @internal
-        */
+         * Indicates the unique identifier for the native input element.
+         * Required for acccessibility.
+         * @internal
+         */
         this.inputId = `mdc-el-${uuidv4()}`;
         /**
          * The required attribute to indicate that the input field is required.
@@ -55,6 +58,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * @default 'top'
          */
         this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
+        this.toggletipStrategy = DEFAULTS.TOGGLETIP_STRATEGY;
         /** @internal */
         this.shouldRenderLabel = true;
     }
@@ -68,7 +72,9 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label"
+          >${this.label}</label
+        >`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -119,28 +125,32 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     renderLabel() {
         if (!this.label)
             return nothing;
+        const triggerId = `toggletip-trigger-${uuidv4()}`;
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
-      ${this.toggletipText
+      <slot name="toggletip">
+        ${this.toggletipText
             ? html ` <mdc-button
-              part="info-icon-btn"
-              prefix-icon="${DEFAULTS.INFO_ICON}"
-              size="${DEFAULTS.ICON_SIZE}"
-              variant="${BUTTON_VARIANTS.TERTIARY}"
-              aria-label="${ifDefined(this.infoIconAriaLabel)}"
-              ?disabled="${this.disabled}"
-              id="info-icon-id"
-            ></mdc-button>
-            <mdc-toggletip
-              part="label-toggletip"
-              triggerid="info-icon-id"
-              id="label-toggletip-id"
-              placement="${this.toggletipPlacement}"
-              show-arrow
-              >${this.toggletipText}</mdc-toggletip
-            >`
+                part="info-icon-btn"
+                prefix-icon="${DEFAULTS.INFO_ICON}"
+                size="${DEFAULTS.ICON_SIZE}"
+                variant="${BUTTON_VARIANTS.TERTIARY}"
+                aria-label="${ifDefined(this.infoIconAriaLabel)}"
+                ?disabled="${this.disabled}"
+                id="${triggerId}"
+              ></mdc-button>
+              <mdc-toggletip
+                part="label-toggletip"
+                triggerid="${triggerId}"
+                id="label-toggletip-id"
+                placement="${this.toggletipPlacement}"
+                strategy="${this.toggletipStrategy}"
+                show-arrow
+                >${this.toggletipText}</mdc-toggletip
+              >`
             : nothing}
+      </slot>
     </div>`;
     }
     /**
@@ -182,6 +192,10 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'toggletip-placement' }),
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "toggletipPlacement", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'toggletip-strategy' }),
+    __metadata("design:type", String)
+], FormfieldWrapper.prototype, "toggletipStrategy", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'info-icon-aria-label' }),
     __metadata("design:type", String)

package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts

@@ -14,6 +14,7 @@ declare const DEFAULTS: {
     readonly ICON_SIZE: 20;
     readonly INFO_ICON: Extract<IconNames, "info-badge-filled">;
     readonly TOGGLETIP_PLACEMENT: "top";
+    readonly TOGGLETIP_STRATEGY: "absolute";
 };
 declare const MDC_TEXT_OPTIONS: {
     readonly TAGNAME: "span";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -15,6 +15,7 @@ const DEFAULTS = {
     ICON_SIZE: 20,
     INFO_ICON: 'info-badge-filled',
     TOGGLETIP_PLACEMENT: 'top',
+    TOGGLETIP_STRATEGY: 'absolute',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

package/dist/components/input/input.component.d.ts

@@ -29,6 +29,15 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
  * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled

package/dist/components/input/input.component.js

@@ -44,6 +44,15 @@ import styles from './input.styles';
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
  * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled

package/dist/components/popover/popover.constants.d.ts

@@ -31,6 +31,7 @@ declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
     readonly COLOR: "tonal";
+    readonly STRATEGY: "absolute";
     readonly OFFSET: 4;
     readonly BOUNDARY: "clippingAncestors";
     readonly BOUNDARY_ROOT: "viewport";
@@ -54,7 +55,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_EXPANDED: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
-    readonly STRATEGY: "absolute";
     readonly IS_BACKDROP_INVISIBLE: true;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -33,6 +33,7 @@ const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
     COLOR: COLOR.TONAL,
+    STRATEGY: STRATEGY.ABSOLUTE,
     OFFSET: 4,
     BOUNDARY: 'clippingAncestors',
     BOUNDARY_ROOT: 'viewport',
@@ -56,7 +57,6 @@ const DEFAULTS = {
     DISABLE_ARIA_EXPANDED: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
-    STRATEGY: 'absolute',
     IS_BACKDROP_INVISIBLE: true,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };