@momentum-design/components 0.18.5 → 0.18.6

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

@@ -0,0 +1,25 @@
+declare const TAG_NAME: "mdc-input";
+declare const AUTO_CAPITALIZE: {
+    readonly OFF: "off";
+    readonly NONE: "none";
+    readonly ON: "on";
+    readonly SENTENCES: "sentences";
+    readonly WORDS: "words";
+    readonly CHARACTERS: "characters";
+};
+declare const PREFIX_TEXT_OPTIONS: {
+    MAX_LENGTH: number;
+    HELPERTEXT: string;
+    VALIDATION: "error";
+};
+declare const DEFAULTS: {
+    VALIDATION: "default";
+    ICON_SIZE_VALUE: number;
+    ICON_SIZE_UNIT: string;
+    CLEAR_BUTTON_ICON: string;
+    CLEAR_BUTTON_VARIANT: "tertiary";
+    CLEAR_BUTTON_SIZE: 20;
+    PREFIX_TEXT_TYPE: "body-midsize-regular";
+    PREFIX_TEXT_TAG: "span";
+};
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, DEFAULTS };

package/dist/components/input/input.constants.js

@@ -0,0 +1,29 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('input');
+const AUTO_CAPITALIZE = {
+    OFF: 'off',
+    NONE: 'none',
+    ON: 'on',
+    SENTENCES: 'sentences',
+    WORDS: 'words',
+    CHARACTERS: 'characters',
+};
+const PREFIX_TEXT_OPTIONS = {
+    MAX_LENGTH: 10,
+    HELPERTEXT: 'Prefix text should not exceed 10 characters',
+    VALIDATION: VALIDATION.ERROR,
+};
+const DEFAULTS = {
+    VALIDATION: VALIDATION.DEFAULT,
+    ICON_SIZE_VALUE: 1,
+    ICON_SIZE_UNIT: 'rem',
+    CLEAR_BUTTON_ICON: 'cancel-bold',
+    CLEAR_BUTTON_VARIANT: BUTTON_VARIANTS.TERTIARY,
+    CLEAR_BUTTON_SIZE: ICON_BUTTON_SIZES[20],
+    PREFIX_TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    PREFIX_TEXT_TAG: VALID_TEXT_TAGS.SPAN,
+};
+export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, DEFAULTS };

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/input/input.styles.js

@@ -0,0 +1,118 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = [css `
+  :host{
+    --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-input-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
+    --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-active);
+    --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
+    --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
+  }
+
+  :host, .input-container, .input-section, .input{
+    width: 100%;
+  }
+
+  :host([readonly]) .leading-icon {
+    color: var(--mdc-input-support-text-color);
+  }
+
+  :host([disabled]) .input,
+  :host([disabled]) .input::placeholder,
+  :host([disabled]) .prefix-text{
+    color: var(--mdc-input-disabled-text-color);
+  }
+
+  :host([disabled]) .input,
+  :host([readonly]) .input{
+    border-color: var(--mdc-input-disabled-border-color);
+    background: var(--mdc-input-disabled-background-color);
+  }
+
+  :host([disabled][help-text-type="default"]) .input-container,
+  :host([disabled][help-text-type="success"]) .input-container,
+  :host([disabled][help-text-type="warning"]) .input-container,
+  :host([disabled][help-text-type="error"]) .input-container,
+  :host([disabled][help-text-type="priority"]) .input-container{
+    border-color: var(--mdc-input-disabled-border-color);
+  }
+
+  .leading-icon{
+    aspect-ratio: 1;
+  }
+
+  .input-container{
+    height: 2rem;
+    border-radius: 0.5rem;
+    border: 0.0625rem solid var(--mdc-input-border-color);
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.34375rem 0.375rem 0.34375rem 0.75rem;
+  }
+
+  .input-section{
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .input {
+    border: none;
+    color: var(--mdc-input-text-color);
+    background-color: var(--mdc-input-background-color);
+    outline: none;
+  }
+
+  .input::selection { 
+    background-color: var(--mdc-input-selection-background-color);
+    color: var(--mdc-input-selection-text-color);
+  }
+
+  .prefix-text{
+    color: var(--mdc-input-support-text-color);
+    white-space: nowrap; // restirct prefix text to be in one line
+  }
+
+  :host(:not([disabled])) .input-container:hover{
+    background-color: var(--mdc-input-hover-background-color);
+  }
+
+  :host(:not([disabled])) .input-container:active, :host(:not([disabled])) .input-container:focus-within{
+    background-color: var(--mdc-input-focused-background-color);
+    border-color:  var(--mdc-input-focused-border-color);
+  }
+
+  .input::placeholder{
+    color: var(--mdc-input-support-text-color);
+  }
+
+  :host([help-text-type="error"]) .input-container {
+    border-color: var(--mdc-input-error-border-color);
+  }
+  :host([help-text-type="warning"]) .input-container {
+    border-color: var(--mdc-input-warning-border-color);
+  }
+  :host([help-text-type="success"]) .input-container {
+    border-color: var(--mdc-input-success-border-color);
+  }
+  :host([help-text-type="priority"]) .input-container {
+    border-color: var(--mdc-input-primary-border-color);
+  }
+
+  .hidden{
+    opacity: 0;
+    pointer-events: none;
+  }
+  `, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { AUTO_CAPITALIZE } from './input.constants';
+type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
+export { AutoCapitalizeType };

package/dist/components/input/input.types.js

@@ -0,0 +1 @@
+export {};