@momentum-design/components 0.28.2 → 0.28.4

package/dist/react/index.d.ts

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ThemeProvider } from './themeprovider';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ThemeProvider } from './themeprovider';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/themeprovider/index.d.ts

@@ -23,7 +23,7 @@ import Component from '../../components/themeprovider';
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
  * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `normal`
+ * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the

package/dist/react/themeprovider/index.js

@@ -26,7 +26,7 @@ import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
  * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
- * default: `normal`
+ * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the

package/dist/utils/mixins/FormInternalsMixin.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface AssociatedFormControl {
+    autofocus: boolean;
+    disabled: boolean;
+    name: string;
+    value: string | string[];
+    pattern?: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number;
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    validationMessage?: string;
+    readonly form: HTMLFormElement | null;
+    readonly validity: ValidityState;
+    readonly willValidate: boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | FormData | File, mode: 'restore' | 'autocomplete'): void;
+}
+export interface FormInternalsMixinInterface {
+    name: string;
+    value: string;
+    form: HTMLFormElement | null;
+    validity: ValidityState;
+    validationMessage: string;
+    willValidate: boolean;
+    internals: ElementInternals;
+    inputElement: HTMLInputElement;
+    setValidity(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+}
+export declare const FormInternalsMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FormInternalsMixinInterface> & T;

package/dist/utils/mixins/FormInternalsMixin.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property, query } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
+export const FormInternalsMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        /** @internal */
+        get form() {
+            return this.internals.form;
+        }
+        get validity() {
+            return this.internals.validity;
+        }
+        get willValidate() {
+            return this.internals.willValidate;
+        }
+        constructor(...args) {
+            super(args);
+            /**
+         * Indicates the name of the component group.
+         * They are used to group elements in a form together.
+         * @default ''
+         */
+            this.name = '';
+            /**
+         * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
+         * @default ''
+         */
+            this.value = '';
+            /** @internal */
+            this.internals = this.attachInternals();
+            this.id = `mdc-input-${uuidv4()}`;
+        }
+        /**
+       * Sets the validity of the input field based on the input field's validity.
+       * @returns void
+       */
+        setValidity() {
+            if (this.inputElement) {
+                this.internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage, this.inputElement);
+            }
+        }
+        checkValidity() {
+            this.setValidity();
+            return this.internals.checkValidity();
+        }
+        reportValidity() {
+            this.setValidity();
+            return this.internals.reportValidity();
+        }
+    }
+    /** @internal */
+    InnerMixinClass.formAssociated = true;
+    __decorate([
+        property({ reflect: true, type: String }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "name", void 0);
+    __decorate([
+        property({ reflect: true, type: String }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "value", void 0);
+    __decorate([
+        property({ reflect: true, type: String, attribute: 'validation-message' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "validationMessage", void 0);
+    __decorate([
+        query('input'),
+        __metadata("design:type", HTMLInputElement)
+    ], InnerMixinClass.prototype, "inputElement", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.2"
+  "version": "0.28.4"
 }

package/dist/utils/mixins/NameMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface NameMixinInterface {
-    name: string;
-}
-export declare const NameMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<NameMixinInterface> & T;

package/dist/utils/mixins/NameMixin.js

@@ -1,29 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { property } from 'lit/decorators.js';
-export const NameMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates the name of the component group (ex: checkbox, radio group).
-             * They are used to group elements in a form together.
-             * @default ''
-             */
-            this.name = '';
-        }
-    }
-    __decorate([
-        property({ reflect: true, type: String }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "name", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};

package/dist/utils/mixins/ReadonlyMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface ReadonlyMixinInterface {
-    readonly: boolean;
-}
-export declare const ReadonlyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ReadonlyMixinInterface> & T;

package/dist/utils/mixins/ReadonlyMixin.js

@@ -1,29 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { property } from 'lit/decorators.js';
-export const ReadonlyMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates whether the component is readonly.
-             * When the component is readonly, it is not editable.
-             * @default false
-             */
-            this.readonly = false;
-        }
-    }
-    __decorate([
-        property({ reflect: true, type: Boolean }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "readonly", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};

package/dist/utils/mixins/RequiredMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface RequiredMixinInterface {
-    required: boolean;
-}
-export declare const RequiredMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RequiredMixinInterface> & T;

package/dist/utils/mixins/RequiredMixin.js

@@ -1,29 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { property } from 'lit/decorators.js';
-export const RequiredMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates whether the component is required.
-             * When the component is required, it is a mandatory field.
-             * @default false
-             */
-            this.required = false;
-        }
-    }
-    __decorate([
-        property({ reflect: true, type: Boolean }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "required", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};

package/dist/utils/mixins/ValueMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface ValueMixinInterface {
-    value: string;
-}
-export declare const ValueMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ValueMixinInterface> & T;

package/dist/utils/mixins/ValueMixin.js

@@ -1,28 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { property } from 'lit/decorators.js';
-export const ValueMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
-             * @default ''
-             */
-            this.value = '';
-        }
-    }
-    __decorate([
-        property({ reflect: true, type: String }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "value", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};