feat(segment): add segment-view and segment-content components

core/api.txt

@@ -1541,6 +1541,7 @@ ion-segment,css-prop,--background,ios
 ion-segment,css-prop,--background,md
 
 ion-segment-button,shadow
+ion-segment-button,prop,contentId,string | undefined,undefined,false,true
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
@@ -1606,6 +1607,16 @@ ion-segment-button,part,indicator
 ion-segment-button,part,indicator-background
 ion-segment-button,part,native
 
+ion-segment-content,shadow
+ion-segment-content,prop,disabled,boolean,false,false,false
+
+ion-segment-view,shadow
+ion-segment-view,prop,disabled,boolean,false,false,false
+ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise<void>
+ion-segment-view,event,ionSegmentViewScroll,{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; },true
+ion-segment-view,event,ionSegmentViewScrollEnd,{ activeContentId: string; },true
+ion-segment-view,event,ionSegmentViewScrollStart,void,true
+
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/src/components.d.ts

@@ -2690,6 +2690,10 @@ export namespace Components {
         "value"?: SegmentValue;
     }
     interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
          */
@@ -2712,6 +2716,24 @@ export namespace Components {
          */
         "value": SegmentValue;
     }
+    interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled": boolean;
+    }
+    interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled": boolean;
+        /**
+          * This method is used to programmatically set the displayed segment content in the segment view. Calling this method will update the `value` of the corresponding segment button.
+          * @param id : The id of the segment content to display.
+          * @param smoothScroll : Whether to animate the scroll transition.
+         */
+        "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
+    }
     interface IonSelect {
         /**
           * The text to display on the cancel button.
@@ -3413,6 +3435,10 @@ export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSegmentElement;
 }
+export interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSegmentViewElement;
+}
 export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSelectElement;
@@ -4409,6 +4435,35 @@ declare global {
         prototype: HTMLIonSegmentButtonElement;
         new (): HTMLIonSegmentButtonElement;
     };
+    interface HTMLIonSegmentContentElement extends Components.IonSegmentContent, HTMLStencilElement {
+    }
+    var HTMLIonSegmentContentElement: {
+        prototype: HTMLIonSegmentContentElement;
+        new (): HTMLIonSegmentContentElement;
+    };
+    interface HTMLIonSegmentViewElementEventMap {
+        "ionSegmentViewScroll": {
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  };
+        "ionSegmentViewScrollEnd": { activeContentId: string };
+        "ionSegmentViewScrollStart": void;
+    }
+    interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonSegmentViewElement: {
+        prototype: HTMLIonSegmentViewElement;
+        new (): HTMLIonSegmentViewElement;
+    };
     interface HTMLIonSelectElementEventMap {
         "ionChange": SelectChangeEventDetail;
         "ionCancel": void;
@@ -4718,6 +4773,8 @@ declare global {
         "ion-searchbar": HTMLIonSearchbarElement;
         "ion-segment": HTMLIonSegmentElement;
         "ion-segment-button": HTMLIonSegmentButtonElement;
+        "ion-segment-content": HTMLIonSegmentContentElement;
+        "ion-segment-view": HTMLIonSegmentViewElement;
         "ion-select": HTMLIonSelectElement;
         "ion-select-option": HTMLIonSelectOptionElement;
         "ion-select-popover": HTMLIonSelectPopoverElement;
@@ -7447,6 +7504,10 @@ declare namespace LocalJSX {
         "value"?: SegmentValue;
     }
     interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
          */
@@ -7468,6 +7529,31 @@ declare namespace LocalJSX {
          */
         "value"?: SegmentValue;
     }
+    interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled"?: boolean;
+    }
+    interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the segment view is scrolled.
+         */
+        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  }>) => void;
+        /**
+          * Emitted when the segment view scroll has ended.
+         */
+        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void;
+        "onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent<void>) => void;
+    }
     interface IonSelect {
         /**
           * The text to display on the cancel button.
@@ -8159,6 +8245,8 @@ declare namespace LocalJSX {
         "ion-searchbar": IonSearchbar;
         "ion-segment": IonSegment;
         "ion-segment-button": IonSegmentButton;
+        "ion-segment-content": IonSegmentContent;
+        "ion-segment-view": IonSegmentView;
         "ion-select": IonSelect;
         "ion-select-option": IonSelectOption;
         "ion-select-popover": IonSelectPopover;
@@ -8258,6 +8346,8 @@ declare module "@stencil/core" {
             "ion-searchbar": LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
             "ion-segment": LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
             "ion-segment-button": LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
+            "ion-segment-content": LocalJSX.IonSegmentContent & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
+            "ion-segment-view": LocalJSX.IonSegmentView & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
             "ion-select": LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
             "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
             "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;

core/src/components/segment-button/segment-button.tsx

@@ -36,6 +36,11 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   @State() checked = false;
 
+  /**
+   * The `id` of the segment content.
+   */
+  @Prop({ reflect: true }) contentId?: string;
+
   /**
    * If `true`, the user cannot interact with the segment button.
    */
@@ -67,6 +72,27 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
       addEventListener(segmentEl, 'ionSelect', this.updateState);
       addEventListener(segmentEl, 'ionStyle', this.updateStyle);
     }
+
+    // Return if there is no contentId defined
+    if (!this.contentId) return;
+
+    // Attempt to find the Segment Content by its contentId
+    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
+
+    // If no associated Segment Content exists, log an error and return
+    if (!segmentContent) {
+      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+      return;
+    }
+
+    // Ensure the found element is a valid ION-SEGMENT-CONTENT
+    if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+      console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+      return;
+    }
+
+    // Set the disabled state of the Segment Content based on the button's disabled state
+    segmentContent.disabled = this.disabled;
   }
 
   disconnectedCallback() {
@@ -161,13 +187,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
           </span>
           {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>
-        <div
-          part="indicator"
-          class={{
-            'segment-button-indicator': true,
-            'segment-button-indicator-animated': true,
-          }}
-        >
+        <div part="indicator" class="segment-button-indicator segment-button-indicator-animated">
           <div part="indicator-background" class="segment-button-indicator-background"></div>
         </div>
       </Host>

core/src/components/segment-content/segment-content.ios.scss

@@ -0,0 +1,9 @@
+@import "./segment-content";
+@import "../segment-button/segment-button.ios.vars";
+
+// iOS Segment Content
+// --------------------------------------------------
+
+:host(.segment-content-disabled) {
+  opacity: $segment-button-ios-opacity-disabled;
+}

core/src/components/segment-content/segment-content.md.scss

@@ -0,0 +1,9 @@
+@import "./segment-content";
+@import "../segment-button/segment-button.md.vars";
+
+// Material Design Segment Content
+// --------------------------------------------------
+
+:host(.segment-content-disabled) {
+  opacity: $segment-button-md-opacity-disabled;
+}

core/src/components/segment-content/segment-content.scss

@@ -0,0 +1,10 @@
+// Segment Content
+// --------------------------------------------------
+
+:host {
+  scroll-snap-align: center;
+
+  flex-shrink: 0;
+
+  width: 100%;
+}

core/src/components/segment-content/segment-content.tsx

@@ -0,0 +1,31 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'ion-segment-content',
+  styleUrls: {
+    ios: 'segment-content.ios.scss',
+    md: 'segment-content.md.scss',
+  },
+  shadow: true,
+})
+export class SegmentContent implements ComponentInterface {
+  /**
+   * If `true`, the segment content will not be displayed.
+   */
+  @Prop() disabled = false;
+
+  render() {
+    const { disabled } = this;
+
+    return (
+      <Host
+        class={{
+          'segment-content-disabled': disabled,
+        }}
+      >
+        <slot></slot>
+      </Host>
+    );
+  }
+}

core/src/components/segment-view/segment-view.ios.scss

@@ -0,0 +1,9 @@
+@import "./segment-view";
+@import "../segment-button/segment-button.ios.vars";
+
+// iOS Segment View
+// --------------------------------------------------
+
+:host(.segment-view-disabled) {
+  opacity: $segment-button-ios-opacity-disabled;
+}

core/src/components/segment-view/segment-view.md.scss

@@ -0,0 +1,9 @@
+@import "./segment-view";
+@import "../segment-button/segment-button.md.vars";
+
+// Material Design Segment View
+// --------------------------------------------------
+
+:host(.segment-view-disabled) {
+  opacity: $segment-button-md-opacity-disabled;
+}

core/src/components/segment-view/segment-view.scss

@@ -0,0 +1,27 @@
+// Segment View
+// --------------------------------------------------
+
+:host {
+  display: flex;
+
+  height: 100%;
+
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar in webkit */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host(.segment-view-disabled) {
+  touch-action: none;
+  overflow-x: hidden;
+}