feat(input-time-zone): add readonly support (#9111)

**Related Issue:** #7853

## Summary

Added `readOnly` property to input-time-zone to match the UX of other
readonly controls, such as input-date-picker.

Author: josercarcamo

packages/calcite-components/src/components.d.ts

@@ -1083,6 +1083,10 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "placeholderIconFlipRtl": boolean;
+        /**
+          * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+         */
+        "readOnly": boolean;
         /**
           * Updates the position of the component.
           * @param delayed Reposition the component after a delay
@@ -2597,6 +2601,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+         */
+        "readOnly": boolean;
         /**
           * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups.  It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`).
           * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
@@ -8529,6 +8537,10 @@ declare namespace LocalJSX {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "placeholderIconFlipRtl"?: boolean;
+        /**
+          * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+         */
+        "readOnly"?: boolean;
         /**
           * When `true`, the component must have a value in order for the form to submit.
          */
@@ -10123,6 +10135,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+         */
+        "readOnly"?: boolean;
         /**
           * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups.  It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`).
           * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -2002,4 +2002,23 @@ describe("calcite-combobox", () => {
     await combobox.press("Enter");
     expect(chips.length).toBe(2);
   });
+
+  it("prevents opening a readonly combobox", async () => {
+    const page = await newE2EPage({
+      html: html`
+        <calcite-combobox id="myCombobox" read-only="true">
+          <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
+          <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
+          <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
+          <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
+        </calcite-combobox>
+      `,
+    });
+
+    const combobox = await page.find("calcite-combobox");
+    expect(await combobox.getProperty("open")).toBeFalsy();
+    await combobox.click();
+    await page.waitForChanges();
+    expect(await combobox.getProperty("open")).toBeFalsy();
+  });
 });

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -309,6 +309,11 @@ export class Combobox
    */
   @Prop({ mutable: true }) filteredItems: HTMLCalciteComboboxItemElement[] = [];
 
+  /**
+   * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+   */
+  @Prop({ reflect: true }) readOnly = false;
+
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -807,6 +812,10 @@ export class Combobox
   };
 
   clickHandler = (event: MouseEvent): void => {
+    if (this.readOnly) {
+      return;
+    }
+
     const composedPath = event.composedPath();
 
     if (composedPath.some((node: HTMLElement) => node.tagName === "CALCITE-CHIP")) {

packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

@@ -193,6 +193,11 @@ export class InputTimeZone
     this.selectedTimeZoneItem = timeZoneItem;
   }
 
+  /**
+   * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+   */
+  @Prop({ reflect: true }) readOnly = false;
+
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -410,6 +415,7 @@ export class InputTimeZone
             onCalciteComboboxOpen={this.onComboboxOpen}
             open={this.open}
             overlayPositioning={this.overlayPositioning}
+            readOnly={this.readOnly}
             scale={this.scale}
             selectionMode="single-persist"
             status={this.status}

packages/calcite-components/src/demos/input-time-zone.html

@@ -62,6 +62,21 @@ <h1 style="margin: 0 auto; text-align: center">Select</h1>
         </div>
       </div>
 
+      <div class="parent">
+        <div class="child right-aligned-text">Basic (offset mode) + readonly</div>
+        <div class="child">
+          <calcite-input-time-zone scale="s" read-only="true"></calcite-input-time-zone>
+        </div>
+
+        <div class="child">
+          <calcite-input-time-zone scale="m" read-only="true"></calcite-input-time-zone>
+        </div>
+
+        <div class="child">
+          <calcite-input-time-zone scale="l" read-only="true"></calcite-input-time-zone>
+        </div>
+      </div>
+
       <div class="parent">
         <div class="child right-aligned-text">Basic (offset mode) + reference date</div>
         <div class="child">