lightning-base-components 1.16.3-alpha → 1.16.4-alpha

package/src/lightning/input/input-checkbox.slds.css

@@ -1,32 +1,216 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) {
+  /**
+   * Host mapping to composed sds-icon
+   *
+   * Static fallbacks in place for accessibility
+   */
+  --sds-c-icon-color-background: var(
+    --sds-c-inputcheckbox-color-background,
+    var(--sds-s-input-color-background, var(--sds-g-color-neutral-base-1))
+  );
+  --sds-c-icon-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground, transparent);
+  --sds-c-icon-color-border: var(
+    --sds-c-inputcheckbox-color-border,
+    var(--sds-s-input-color-border, var(--sds-g-color-neutral-base-contrast-4))
+  );
+  --sds-c-icon-sizing: var(--sds-c-inputcheckbox-sizing, 1rem);
+  --sds-c-icon-spacing: var(--sds-c-inputcheckbox-spacing);
+  --sds-c-icon-radius-border: var(--sds-c-inputcheckbox-radius-border, var(--sds-s-input-radius-border));
+}
+
+:host([data-render-mode="shadow"]:hover) {
+  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-hover);
+  --sds-c-inputcheckbox-color-background: var(
+    --sds-c-inputcheckbox-color-background-hover,
+    var(--sds-s-input-color-background-hover)
+  );
+  --sds-c-inputcheckbox-color-border: var(
+    --sds-c-inputcheckbox-color-border-hover,
+    var(--sds-s-input-color-border-hover)
+  );
+  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-hover);
+}
+
+:host([data-render-mode="shadow"][checked]) {
+  --sds-c-inputcheckbox-mark-color-foreground: var(
+    --sds-c-inputcheckbox-mark-color-foreground-checked,
+    var(--sds-g-color-neutral-base-1)
+  );
+  --sds-c-inputcheckbox-color-background: var(
+    --sds-c-inputcheckbox-color-background-checked,
+    var(--sds-g-color-neutral-base-contrast-4)
+  );
+  --sds-c-inputcheckbox-color-border: var(
+    --sds-c-inputcheckbox-color-border-checked,
+    var(--sds-g-color-neutral-base-contrast-4)
+  );
+  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-checked);
+}
+
+:host([data-render-mode="shadow"][checked]:hover) {
+  --sds-c-inputcheckbox-mark-color-foreground-checked: var(
+    --sds-c-inputcheckbox-mark-color-foreground-checked-hover
+  );
+  --sds-c-inputcheckbox-color-background-checked: var(--sds-c-inputcheckbox-color-background-checked-hover);
+  --sds-c-inputcheckbox-color-border-checked: var(--sds-c-inputcheckbox-color-border-checked-hover);
+  --sds-c-inputcheckbox-label-color-checked: var(
+    --sds-c-inputcheckbox-label-color-checked-hover,
+    var(--sds-c-inputcheckbox-label-color-hover)
+  );
+}
+
+:host([data-render-mode="shadow"][indeterminate]) {
+  --sds-c-inputcheckbox-mark-color-foreground: var(
+    --sds-c-inputcheckbox-mark-color-foreground-indeterminate,
+    #fff
+  );
+  --sds-c-inputcheckbox-color-background: var(
+    --sds-c-inputcheckbox-color-background-indeterminate,
+    var(--sds-s-input-color-background, #111)
+  );
+  --sds-c-inputcheckbox-color-border: var(
+    --sds-c-inputcheckbox-color-border-indeterminate,
+    var(--sds-s-input-color-border, #111)
+  );
+  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-indeterminate);
+}
+
+:host([data-render-mode="shadow"][indeterminate]:hover) {
+  --sds-c-inputcheckbox-mark-color-foreground-indeterminate: var(
+    --sds-c-inputcheckbox-mark-color-foreground-indeterminate-hover
+  );
+  --sds-c-inputcheckbox-color-background-indeterminate: var(
+    --sds-c-inputcheckbox-color-background-indeterminate-hover
+  );
+  --sds-c-inputcheckbox-color-border-indeterminate: var(
+    --sds-c-inputcheckbox-color-border-indeterminate-hover
+  );
+  --sds-c-inputcheckbox-label-color-indeterminate: var(
+    --sds-c-inputcheckbox-label-color-indeterminate-hover,
+    var(--sds-c-inputcheckbox-label-color-hover)
+  );
+}
+
+:host([data-render-mode="shadow"][focus-visible]) {
+  --sds-c-inputcheckbox-shadow: var(
+    --sds-c-inputcheckbox-shadow-focus,
+    var(--sds-s-input-shadow-focus, 0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3))
+  );
+}
+
+:host([data-render-mode="shadow"][disabled]) {
+  --sds-c-inputcheckbox-color-background: var(
+    --sds-c-inputcheckbox-color-background-disabled,
+    var(--sds-s-input-color-background-disabled, #efefef)
+  );
+
+  /* TODO: Add shared border hook when available: https://github.com/salesforce-ux/salesforce-design-system/issues/272 */
+  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-disabled, #666);
+  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-disabled);
+}
+
+:host([data-render-mode="shadow"][error]) {
+  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-error);
+  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-error);
+  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-error);
+  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-error);
+}
+
+:host([data-render-mode="shadow"][disabled][checked]) {
+  --sds-c-inputcheckbox-mark-color-foreground: var(
+    --sds-c-inputcheckbox-mark-color-foreground-disabled,
+    #666
+  );
+}
+
+:host([data-render-mode="shadow"][error][focus-visible]) {
+  --sds-c-inputcheckbox-shadow: var(
+    --sds-c-inputcheckbox-shadow-error-focus,
+    0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3)
+  );
+}
+
+:host([data-render-mode="shadow"]) [part~='input-checkbox'] {
+  display: inline-flex;
+  align-items: center;
+}
+
+:host([data-render-mode="shadow"]) [part~='indicator'] {
+  display: inline-flex;
+  align-items: center;
+  box-shadow: var(--sds-c-inputcheckbox-shadow, var(--sds-s-input-shadow));
+}
+
+/**
+ * Size and position the input on top of our icon for accessibility
+ */
+
+:host([data-render-mode="shadow"]) [part~='checkbox'] {
+  position: absolute;
+  height: calc(
+    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
+      var(--sds-c-inputcheckbox-spacing, 0px)
+  );
+  width: calc(
+    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
+      var(--sds-c-inputcheckbox-spacing, 0px)
+  );
+  opacity: 0.00001;
+}
+
+:host([data-render-mode="shadow"]) [part~='label'] {
+  padding-inline-start: var(--sds-c-inputcheckbox-label-spacing-inline-start);
+  color: var(--sds-c-inputcheckbox-label-color);
+}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
   /**
-   * Base
-   */
+     * Base
+     */
   :host([data-render-mode="shadow"]) [part~='input-checkbox'] {
     /* Label */
     --sds-c-inputcheckbox-label-spacing-inline-start: var(
       --slds-c-inputcheckbox-label-spacing-inline-start,
       var(--sds-g-spacing-2, 0.5rem)
     );
+
+    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
+    display: flex;
   }
 
   /**
-   * Label Container
-   */
+     * Label Container
+     */
   :host([data-render-mode="shadow"]) [part~='label-container'] {
     display: inline-flex;
     align-items: center;
+    font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+
+    /* Accounts for help-text in same row as label */
+    padding-inline-end: var(--sds-g-spacing-1, 0.25rem);
   }
 
   /**
-   * Checkbox
-   *
-   * Hidden from view, see Indicator for visual faux checkbox.
-   */
+     * Label
+     *
+     * Add [part~='input-checkbox'] to increase specificity and
+     * avoid collisions with other components using [part~='label'] (e.g. slds-input-text)
+     */
+  :host([data-render-mode="shadow"]) [part~='input-checkbox'] [part~='label'] {
+    color: var(--slds-c-inputcheckbox-label-color, var(--sds-g-color-neutral-base-30, #444444));
+  }
+
+  /**
+     * Checkbox
+     *
+     * Hidden from view, see Indicator for visual faux checkbox.
+     */
   :host([data-render-mode="shadow"]) [part~='checkbox'] {
     width: 1px;
     height: 1px;
@@ -40,27 +224,30 @@
   }
 
   /**
-   * Required Marker
-   */
-  :host([data-render-mode="shadow"]) [title='required'] {
+     * Required Marker
+     *
+     * Extra specificity required due to SDS having too much specificity (@TODO: fix SDS specificity)
+     */
+  :host([data-render-mode="shadow"]) abbr[title='required'] {
     color: var(--sds-g-color-error-base-50, #ea001e);
     padding-right: var(--sds-g-spacing-1, 0.25rem);
+    text-decoration: none;
   }
 
   /**
-   * Checkbox Indicator
-   *
-   * ┌────────────────────┐  ┌─────────────────────┐
-   * │      sds-icon      │  │   Faux via <span>   │
-   * └────────────────────┘  └─────────────────────┘
-   *           ▲                        ▲
-   * ┌────────────────────┐  ┌─────────────────────┐
-   * │ sds-input-checkbox │  │ slds-input-checkbox │
-   * └────────────────────┘  └─────────────────────┘
-   *
-   * sds-input-checkbox uses sds-icon for its visual checkbox indicator. SLDS
-   * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
-   */
+     * Checkbox Indicator
+     *
+     * ┌────────────────────┐  ┌─────────────────────┐
+     * │      sds-icon      │  │   Faux via <span>   │
+     * └────────────────────┘  └─────────────────────┘
+     *           ▲                        ▲
+     * ┌────────────────────┐  ┌─────────────────────┐
+     * │ sds-input-checkbox │  │ slds-input-checkbox │
+     * └────────────────────┘  └─────────────────────┘
+     *
+     * sds-input-checkbox uses sds-icon for its visual checkbox indicator. SLDS
+     * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
+     */
   :host([data-render-mode="shadow"]) [part~='indicator'] {
     position: relative;
     width: var(--slds-c-inputcheckbox-sizing, 1rem);
@@ -74,8 +261,8 @@
   }
 
   /**
-   * Checked
-   */
+     * Checked
+     */
   :host([data-render-mode="shadow"][checked]) [part~='indicator']::after {
     content: '';
     height: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 4);
@@ -95,8 +282,8 @@
   }
 
   /**
-   * Disabled
-   */
+     * Disabled
+     */
   :host([data-render-mode="shadow"][disabled]) [part~='indicator'] {
     --slds-c-inputcheckbox-color-background: var(
       --slds-c-inputcheckbox-color-background-disabled,
@@ -110,8 +297,8 @@
   }
 
   /**
-   * Focused
-   */
+     * Focused
+     */
   :host([data-render-mode="shadow"]:focus-within) [part~='indicator'] {
     --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-focus);
     --slds-c-inputcheckbox-color-border: var(
@@ -125,8 +312,8 @@
   }
 
   /**
-   * Invalid
-   */
+     * Invalid
+     */
   :host([data-render-mode="shadow"][invalid]) [part~='indicator'] {
     --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-invalid);
     --slds-c-inputcheckbox-sizing-border: var(
@@ -137,9 +324,81 @@
       --slds-c-inputcheckbox-color-border-invalid,
       var(--sds-g-color-error-base-50, #ea001e)
     );
+    --slds-c-inputcheckbox-mark-color-foreground: var(
+      --slds-c-inputcheckbox-mark-color-foreground-invalid,
+      var(--sds-g-color-error-base-50, #ea001e)
+    );
   }
 
   :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
     color: var(--slds-c-inputcheckbox-helptext-color-invalid, var(--sds-g-color-error-base-50, #ea001e));
   }
+
+  /**
+     * Label Inline Variant
+     *
+     * @TODO: Remove magic number for MQ
+     */
+  @media (min-width: 48em) {
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label-container'] {
+      float: left;
+
+      /* TODO: Get rid of these magic numbers */
+      max-width: calc(33% - 1.125rem);
+      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+      padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-checkbox'] {
+      display: block;
+      margin-inline-start: 33%;
+      padding-block: var(--sds-g-spacing-1, 0.25rem);
+      margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+      float: left;
+      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='indicator'] {
+      /* @TODO: add change to SDS, removes line-height from display inline */
+      display: block;
+    }
+  }
+
+  /**
+     * Standalone Checkbox
+     *
+     * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
+     */
+  :host([data-render-mode="shadow"][variant~='label-inline']) [part~='checkbox'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='checkbox'] {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    clip: auto;
+    opacity: 0;
+    z-index: 1;
+  }
+}
+
+/**
+   * A temporarily baked-in utility class until SLDS gets a proper utility package.
+   *
+   * This is a hybrid patch between synthetic and native shadow. The ideal final
+   * outcome is the removal of this class and replacing the class with the SLDS
+   * utility package solution.
+   */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
 }

package/src/lightning/input/input-text.slds.css

@@ -146,9 +146,13 @@
 
   /**
    * Invalid State
+   *
+   * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
+   * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
+   * uses :host([invalid]).
    */
-  :host([data-render-mode="shadow"][aria-invalid]) [part~='input-text'] {
-    --sds-c-inputtext-color-border-invalid: var(--sds-g-color-error-base-50, #ea001e);
+  :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+    --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
     --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-2, 2px);
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
@@ -164,8 +168,11 @@
 
   /**
    * Label
+   *
+   * Add [part~='input-text'] to increase specificity and
+   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
    */
-  :host([data-render-mode="shadow"]) [part='label'] {
+  :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
     padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
     color: var(--slds-c-inputtext-label-color, var(--sds-g-color-neutral-base-30, #444444));
     font-size: var(--slds-c-inputtext-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
@@ -180,14 +187,14 @@
   /**
    * Label's Required Symbol
    */
-  :host([data-render-mode="shadow"]) [part='label'] [title='required'] {
+  :host([data-render-mode="shadow"]) [part~='label'] [title='required'] {
     color: var(--sds-g-color-error-base-50, #ea001e);
   }
 
   /**
    * Input Container
    */
-  :host([data-render-mode="shadow"]) [part='input-container'] {
+  :host([data-render-mode="shadow"]) [part~='input-container'] {
     flex: 1 0 100%;
   }
 
@@ -197,7 +204,7 @@
    * Note: not to be confused with lightning-helptext. This is for the text
    *       that goes below the input.
    */
-  :host([data-render-mode="shadow"]) [part='help-text'] {
+  :host([data-render-mode="shadow"]) [part~='help-text'] {
     font-size: var(--slds-c-inputtext-helptext-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
 
     /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
@@ -207,7 +214,7 @@
   /**
    * Help Text's Invalid State – Part container is unique to SLDS
    */
-  :host([data-render-mode="shadow"][aria-invalid]) [part='help-text'] {
+  :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
     color: var(--sds-g-color-error-base-50, #ea001e);
   }
 
@@ -221,4 +228,60 @@
   :host([data-render-mode="shadow"]) [part~='start'] {
     --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
   }
+
+  /**
+   * Label Inline Variant
+   *
+   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
+   * keep this implementation intact so visual output is the same when used
+   * in a form that has non-shadow components. Attempting to refactor to a
+   * modern solution like flex is proving tricky due to the presence of the
+   * optional inline-help and the input needing to have exactly 33% of spacing
+   * from the inline-start.
+   *
+   * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
+   */
+  @media (min-width: 48em) {
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
+      display: block;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+      float: left;
+
+      /* TODO: Get rid of these magic numbers */
+      max-width: calc(33% - 1.125rem);
+      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+      margin-inline-start: 33%;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+      float: left;
+      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+  }
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * utility package solution.
+ */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
 }

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -207,7 +207,7 @@ You can hide the `address-label` visually and still make them accessible to scre
 
 Additionally, the `show-address-lookup` boolean attribute creates a search field that doesn't have an associated label. See **Using Lookup to Find and Autofill an Address** for more information.
 
-Your Salesforce locale setting determines the order and layout of the address fields.
+Your Salesforce locale setting determines the order and layout of the input address fields by default. Use the `locale` attribute to override the default. Specify any locale code from the list of [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/s/articleView?id=sf.admin_supported_locales.htm&type=5").
 
 You can also use custom labels that display translated values. For more information, see
 [Access Labels](docs/component-library/documentation/lwc/lwc.create_labels).

package/src/lightning/inputAddress/inputAddress.js

@@ -140,8 +140,9 @@ export default class LightningInputAddress extends LightningElement {
     @api countryDisabled;
 
     /**
-     * Determines the order of the inputs for the address field.
+     * Specifies the locale used to determine the layout of the address fields
      * @type {string}
+     * @default en_US
      */
     @api locale = locale;
 

package/src/lightning/internationalizationLibrary/datetime/intlFormat.js

@@ -28,6 +28,24 @@ function convertAndFormatDate(date, format, timeZone) {
     return formatDateUTC(converted, format);
 }
 
+/**
+ * Tries toDateStrict; if error thrown (unparseable string),
+ * logs warning and returns value from Date.parse
+ *
+ * @param {String|Number|Date} value
+ * @returns Date
+ */
+export function toDate(value) {
+    try {
+        return toDateStrict(value);
+    } catch (err) {
+        console.warn(
+            `'${value}' does not follow a supported date format. Please use either a timestamp, ISO8601 string, or Date object to avoid risking inconsistencies and breakages.`
+        );
+        return new Date(value);
+    }
+}
+
 /**
  * Converts a timestamp or ISO-8601 string to a Date object
  * If a Date object is provided it is returned as-is
@@ -35,8 +53,8 @@ function convertAndFormatDate(date, format, timeZone) {
  * @param {String|Number|Date} value
  * @returns Date
  */
-export function toDate(value) {
-    if (!isDate(value) && isFinite(value)) {
+function toDateStrict(value) {
+    if (value && !isDate(value) && isFinite(value)) {
         // handles timestamp as number or string
         return new Date(parseInt(value, 10));
     } else if (value && !isDate(value)) {

package/src/lightning/iso8601Utils/iso8601Utils.js

@@ -1,7 +1,6 @@
 // TODO: remove file when migrating off aura
 /*
  * Regex to test a string for an ISO8601 Date. The following formats are matched.
- * Note that if a time element is present (e.g. 'T'), the string should have a time zone designator (Z or +hh:mm or -hh:mm).
  *
  *  YYYY
  *  YYYY-MM
@@ -14,7 +13,7 @@
  * @see: https://www.w3.org/TR/NOTE-datetime
  */
 const ISO8601_STRICT_PATTERN =
-    /^\d{4}(-\d\d(-\d\d(T\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d[:]?\d\d)|Z){1})?)?)?$/i;
+    /^\d{4}(-\d\d(-\d\d(T\d\d:\d\d(:\d\d)?(\.\d+)?(([+-]\d\d[:]?\d\d)|Z)?)?)?)?$/i;
 
 /* Regex to test a string for an ISO8601 partial time or full time:
  * hh:mm
@@ -28,7 +27,7 @@ const ISO8601_TIME_PATTERN =
 export const STANDARD_TIME_FORMAT = 'HH:mm:ss.SSS';
 export const STANDARD_DATE_FORMAT = 'YYYY-MM-DD';
 export const TIME_SEPARATOR = 'T';
-const TIMEZONE_INDICATOR = /(Z|([+-])(\d{2})[:]?(\d{2}))$/;
+const TIMEZONE_INDICATOR = /(Z|([+-])(\d{2})[:]?(\d{2}))$/i;
 
 export function isValidISODateTimeString(dateTimeString) {
     return isValidISO8601String(dateTimeString) && isValidDate(dateTimeString);