@momentum-design/components 0.32.0 → 0.32.1

package/dist/components/textarea/textarea.constants.js

@@ -0,0 +1,25 @@
+import utils from '../../utils/tag-name';
+import { TYPE as FONT_TYPE } from '../text/text.constants';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
+const TAG_NAME = utils.constructTagName('textarea');
+const CLEAR_BUTTON_ICON = 'cancel-bold';
+const WRAP = {
+    HARD: 'hard',
+    SOFT: 'soft',
+};
+const AUTO_COMPLETE = {
+    OFF: 'off',
+    ON: 'on',
+};
+const DEFAULTS = {
+    ICON_SIZE_VALUE: 1,
+    ICON_SIZE_UNIT: 'rem',
+    CLEAR_BUTTON_ICON,
+    CLEAR_BUTTON_VARIANT: BUTTON_VARIANTS.TERTIARY,
+    CLEAR_BUTTON_SIZE: ICON_BUTTON_SIZES[20],
+    CHARACTER_COUNTER_TYPE: FONT_TYPE.BODY_MIDSIZE_REGULAR,
+    ROWS: 5,
+    COLS: 40,
+    WRAP: WRAP.SOFT,
+};
+export { TAG_NAME, WRAP, AUTO_COMPLETE, DEFAULTS };

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

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

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = [css `
+  :host {
+    --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-textarea-text-secondary-normal : var(--mds-color-theme-text-secondary-normal);
+    --mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-active);
+    --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
+    --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
+    --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
+  }
+
+  :host([disabled])::part(textarea),
+  :host([disabled])::part(textarea)::placeholder{
+    color: var(--mdc-input-disabled-text-color);
+  }
+
+  :host([disabled])::part(textarea),
+  :host([readonly])::part(textarea){
+    border-color: var(--mdc-textarea-disabled-border-color);
+    background: var(--mdc-textarea-disabled-background-color);
+  }
+
+  :host([disabled][help-text-type="default"])::part(textarea-container),
+  :host([disabled][help-text-type="success"])::part(textarea-container),
+  :host([disabled][help-text-type="warning"])::part(textarea-container),
+  :host([disabled][help-text-type="error"])::part(textarea-container),
+  :host([disabled][help-text-type="priority"])::part(textarea-container){
+    border-color: var(--mdc-textarea-disabled-border-color);
+  }
+
+  :host::part(textarea){
+    min-height: 6.25rem;
+    color: var(--mdc-textarea-text-color);
+    font-family: inherit;
+    font-size: var(--mdc-textarea-text-font-size);
+    line-height: var(--mdc-textarea-text-line-height);
+    background-color: var(--mdc-textarea-background-color);
+    resize: none;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+
+  :host::part(textarea-container) {
+    display: flex;
+    gap: 0.5rem;
+    border-radius: 0.5rem;
+    border: 0.0625rem solid var(--mdc-textarea-border-color);
+    overflow: hidden;
+    padding: 0.375rem 0.25rem 0.25rem 0.75rem;
+  }
+
+  :host(:not([disabled]))::part(textarea-container):hover{
+    background-color: var(--mdc-textarea-hover-background-color);
+  }
+
+  :host(:not([disabled]))::part(textarea-container):active, 
+  :host(:not([disabled]))::part(textarea-container):focus-within{
+    background-color: var(--mdc-textarea-focused-background-color);
+    border-color:  var(--mdc-textarea-focused-border-color);
+  }
+
+  :host::part(textarea-footer) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .textarea::placeholder{
+    color: var(--mdc-textarea-text-secondary-normal);
+  }
+
+  :host::part(character-counter){
+    margin-left: auto;
+    color: var(--mdc-textarea-text-secondary-normal);
+  }
+
+  :host([help-text-type="error"])::part(character-counter) {
+    color: var(--mdc-textarea-error-border-color);
+  }
+
+  :host([disabled])::part(character-counter){
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+
+  :host([help-text-type="error"])::part(textarea-container),
+  :host([help-text-type="error"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-error-border-color);
+  }
+  :host([help-text-type="warning"])::part(textarea-container),
+  :host([help-text-type="warning"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-warning-border-color);
+  }
+  :host([help-text-type="success"])::part(textarea-container),
+  :host([help-text-type="success"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-success-border-color);
+  }
+  :host([help-text-type="priority"])::part(textarea-container),
+  :host([help-text-type="priority"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-primary-border-color);
+  }
+
+  .hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+`, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { AUTO_COMPLETE, WRAP } from './textarea.constants';
+type WrapType = ValueOf<typeof WRAP>;
+type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
+export { WrapType, AutoCompleteType };

package/dist/components/textarea/textarea.types.js

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