fix(alert): apply styling to disabled items (#18545)

* fix(datetime): ensure hasValue returns correct value

* fix(alert): apply styling to disabled items

* test(datetime): add tests for empty value datetime

* fix(): update getter for stencil update

* fix: change default opacity to disabled button opacity

* test(select): add tests to ion-select-option disabled items

* Revert "test(select): add tests to ion-select-option disabled items"

This reverts commit b7ac8675

* update disabled css to use classes

core/src/components/alert/alert.scss

@@ -150,6 +150,17 @@
   height: 100%;
 }
 
+
+// Alert Button: Disabled
+// --------------------------------------------------
+.alert-input-disabled,
+.alert-checkbox-button-disabled .alert-button-inner,
+.alert-radio-button-disabled .alert-button-inner {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+
 .alert-tappable {
   @include margin(0);
   @include padding(0);

core/src/components/alert/alert.tsx

@@ -303,7 +303,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             tabIndex={0}
             role="checkbox"
-            class="alert-tappable alert-checkbox alert-checkbox-button ion-focusable"
+            class={{
+              'alert-tappable': true,
+              'alert-checkbox': true,
+              'alert-checkbox-button': true,
+              'ion-focusable': true,
+              'alert-checkbox-button-disabled': i.disabled || false
+            }}
           >
             <div class="alert-button-inner">
               <div class="alert-checkbox-icon">
@@ -335,7 +341,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             id={i.id}
             tabIndex={0}
-            class="alert-radio-button alert-tappable alert-radio ion-focusable"
+            class={{
+              'alert-radio-button': true,
+              'alert-tappable': true,
+              'alert-radio': true,
+              'ion-focusable': true,
+              'alert-radio-button-disabled': i.disabled || false
+            }}
             role="radio"
           >
             <div class="alert-button-inner">
@@ -369,7 +381,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
               id={i.id}
               disabled={i.disabled}
               tabIndex={0}
-              class="alert-input"
+              class={{
+                'alert-input': true,
+                'alert-input-disabled': i.disabled || false
+              }}
             />
           </div>
         ))}

core/src/components/alert/test/basic/index.html

@@ -129,6 +129,11 @@
             value: 'hello',
             placeholder: 'Placeholder 2'
           },
+          {
+            type: 'text',
+            placeholder: 'Placeholder 3',
+            disabled: true
+          },
           {
             name: 'name3',
             type: 'text',
@@ -207,7 +212,8 @@
           {
             type: 'radio',
             label: 'Radio 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
           {
             type: 'radio',
@@ -267,7 +273,8 @@
           {
             type: 'checkbox',
             label: 'Checkbox 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
 
           {