Merge branch 'master' into copilot/add-pdf-export-feature

Author: kdinev

projects/igniteui-angular/core/src/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -6,8 +6,12 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
     @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-date-range-picker {
+        @include sizable();
+        --input-group-size: #{map.get($theme, 'size')};
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         display: flex;
 
         > igx-icon {
@@ -32,6 +36,8 @@
     igx-date-range-end,
     %igx-date-range-picker__start,
     %igx-date-range-picker__end {
+        --size: var(--input-group-size) !important;
+
         flex: 1 0 0%;
     }
 
@@ -40,6 +46,17 @@
         align-items: center;
         color: var-get($theme, 'label-color');
         margin: 0 rem(8px);
+        height: var(--input-group-size);
+
+        @if $variant != 'material' {
+            align-self: flex-end;
+
+            &.input-has-hint {
+                align-self: center;
+            }
+        } @else {
+            align-self: flex-start;
+        }
     }
 
     %igx-date-range-picker-buttons {

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -43,12 +43,24 @@ import { IgxCalendarContainerComponent } from '../date-picker/calendar-container
 import { PickerBaseDirective } from '../date-picker/picker-base.directive';
 import { IgxOverlayOutletDirective } from 'igniteui-angular/directives';
 import {
-    IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState,
-    IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxInputGroupType,
+    IgxInputState,
+    IgxLabelDirective,
+    IGX_INPUT_GROUP_TYPE,
+    IgxSuffixDirective,
     IgxPrefixDirective,
-    IgxReadOnlyInputDirective
+    IgxReadOnlyInputDirective,
+    IgxHintDirective
 } from 'igniteui-angular/input-group';
-import { IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, DateRangePickerFormatPipe } from './date-range-picker-inputs.common';
+import {
+    IgxDateRangeEndComponent,
+    IgxDateRangeInputsBaseComponent,
+    IgxDateRangeSeparatorDirective,
+    IgxDateRangeStartComponent,
+    DateRangePickerFormatPipe,
+} from './date-range-picker-inputs.common';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 
@@ -420,6 +432,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
 
+    @ContentChild(IgxHintDirective)
+    public hint: IgxHintDirective;
+
     @ContentChild(IgxPickerActionsDirective)
     public pickerActions: IgxPickerActionsDirective;
 
@@ -550,7 +565,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     /** @hidden @internal */
     public get separatorClass(): string {
-        return 'igx-date-range-picker__label';
+        const classes = ['igx-date-range-picker__label'];
+        if (this.hint) classes.push('input-has-hint');
+        return classes.join(' ');
     }
 
     protected override get toggleContainer(): HTMLElement | undefined {

src/app/date-range/date-range.sample.html

@@ -46,7 +46,9 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
           type="text"
           [placeholder]="properties.placeholder"
         />
-        <igx-hint>Helper text</igx-hint>
+        @if (properties.hint) {
+            <span igxHint>{{ properties.hint }}</span>
+        }
       </igx-date-range-start>
       <igx-date-range-end>
         <igx-picker-toggle igxPrefix>

src/app/date-range/date-range.sample.ts

@@ -148,6 +148,12 @@ export class DateRangeSampleComponent {
                 defaultValue: 'MM/dd/yyyy'
             }
         },
+        hint: {
+            label: 'Hint Text',
+            control: {
+                type: 'text'
+            }
+        },
         displayFormat: {
             label: 'Display Format',
             control: {

src/app/tooltip/tooltip.sample.html

@@ -53,6 +53,20 @@ <h4 class="sample-title">Simple tooltip settings</h4>
         </div>
     </article>
 
+    <article class="column">
+        <h4 class="sample-title">WebComponents tooltip</h4>
+        <div style="margin: 10dvh 5dvw">
+            <igc-button id="basic-tooltip"> Hover over me </igc-button>
+        </div>
+
+        <igc-tooltip
+            anchor="basic-tooltip"
+        >
+        Hello from the tooltip!
+        <button class="my-close-btn">Close Me</button>
+        </igc-tooltip>
+    </article>
+
     <article class="column">
         <h4 class="sample-title">Rich tooltip</h4>
         <article class="card-wrapper">

src/app/tooltip/tooltip.sample.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
     IgxAvatarComponent,
@@ -18,11 +18,18 @@ import {
     IgxTooltipTargetDirective,
     OverlaySettings,
 } from 'igniteui-angular';
+import {
+    defineComponents,
+    IgcButtonComponent,
+    IgcTooltipComponent,
+} from 'igniteui-webcomponents';
 
+defineComponents(IgcTooltipComponent, IgcButtonComponent);
 @Component({
     selector: 'app-tooltip-sample',
     styleUrls: ['tooltip.sample.css'],
     templateUrl: 'tooltip.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxIconComponent, IgxIconButtonDirective, IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
 })
 export class TooltipSampleComponent implements OnInit {