feat(segment-content): add disabled prop and hide the content

Author: brandyscarney

core/api.txt

@@ -1608,6 +1608,7 @@ 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

core/src/components.d.ts

@@ -2717,6 +2717,10 @@ export namespace Components {
         "value": SegmentValue;
     }
     interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled": boolean;
     }
     interface IonSegmentView {
         /**
@@ -7505,6 +7509,10 @@ declare namespace LocalJSX {
         "value"?: SegmentValue;
     }
     interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled"?: boolean;
     }
     interface IonSegmentView {
         /**

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

@@ -8,3 +8,7 @@
 
   width: 100%;
 }
+
+:host(.segment-content-disabled) {
+  display: none;
+}

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

@@ -1,15 +1,26 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-segment-content',
   styleUrl: 'segment-content.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>
+      <Host
+        class={{
+          'segment-content-disabled': disabled,
+        }}
+      >
         <slot></slot>
       </Host>
     );

packages/angular/src/directives/proxies.ts

@@ -2006,13 +2006,14 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 
 @ProxyCmp({
+  inputs: ['disabled']
 })
 @Component({
   selector: 'ion-segment-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['disabled'],
 })
 export class IonSegmentContent {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -1841,14 +1841,15 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 
 @ProxyCmp({
-  defineCustomElementFn: defineIonSegmentContent
+  defineCustomElementFn: defineIonSegmentContent,
+  inputs: ['disabled']
 })
 @Component({
   selector: 'ion-segment-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['disabled'],
   standalone: true
 })
 export class IonSegmentContent {

packages/vue/src/proxies.ts

@@ -755,7 +755,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
 'value', 'ion-change');
 
 
-export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent);
+export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent, [
+  'disabled'
+]);
 
 
 export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [