Merge branch 'master' into bpachilova/range-editable-date-input & get it to a compiling state

Author: ddaribo

package-lock.json

@@ -71,7 +71,10 @@ export default class IgcDateRangeInputComponent extends IgcDateTimeInputBaseComp
       const partType = part?.type as string as DatePart;
 
       if (partType) {
-        result = { part: partType, position: part?.position! };
+        result = {
+          part: partType,
+          position: part?.position as DateRangePosition,
+        };
       }
     } else {
       result = {

src/components/date-range-picker/date-range-input.ts

@@ -391,7 +391,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
           );
         }
 
-        const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
+        const chipElements = predefinedArea!.shadowRoot!.querySelectorAll(
           'igc-chip'
         ) as NodeListOf<IgcChipComponent>;
         for (const test of tests) {
@@ -430,7 +430,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
           );
         }
 
-        const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
+        const chipElements = predefinedArea!.shadowRoot!.querySelectorAll(
           'igc-chip'
         ) as NodeListOf<IgcChipComponent>;
         for (const test of tests) {
@@ -729,7 +729,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
       }
 
       function getRangeChips() {
-        return getPredefinedArea()?.renderRoot.querySelectorAll(
+        return getPredefinedArea()!.renderRoot.querySelectorAll(
           IgcChipComponent.tagName
         )!;
       }

src/components/date-range-picker/date-range-picker.common.spec.ts

@@ -69,11 +69,11 @@ export const checkSelectedRange = (
   }
 
   if (expectedValue?.start) {
-    checkDatesEqual(calendar.values[0], expectedValue?.start!);
+    checkDatesEqual(calendar.values[0], expectedValue?.start);
   }
   if (expectedValue?.end) {
     const length = calendar.values.length;
-    checkDatesEqual(calendar.values[length - 1], expectedValue?.end!);
+    checkDatesEqual(calendar.values[length - 1], expectedValue?.end);
   }
   if (!(expectedValue?.start || expectedValue?.end)) {
     expect(calendar.values).to.deep.equal([]);

src/components/date-range-picker/date-range-picker.utils.spec.ts

@@ -169,8 +169,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   /** Returns the tile manager internal CSS grid container. */
-  private get _cssContainer(): HTMLElement {
-    return this._tileManagerCtx?.grid.value!;
+  private get _cssContainer(): HTMLElement | undefined {
+    return this._tileManagerCtx?.grid.value;
   }
 
   /** Returns the tile manager current resize mode. */

src/components/tile-manager/tile.ts

@@ -26,7 +26,7 @@ const metadata: Meta<IgcBadgeComponent> = {
   argTypes: {
     variant: {
       type: '"primary" | "info" | "success" | "warning" | "danger"',
-      description: 'The type of badge.',
+      description: 'The type (style variant) of the badge.',
       options: ['primary', 'info', 'success', 'warning', 'danger'],
       control: { type: 'select' },
       table: { defaultValue: { summary: 'primary' } },
@@ -44,19 +44,31 @@ const metadata: Meta<IgcBadgeComponent> = {
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'rounded' } },
     },
+    dot: {
+      type: 'boolean',
+      description:
+        'Sets whether to render a dot type badge.\nWhen enabled, the badge appears as a small dot without any content.',
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
-  args: { variant: 'primary', outlined: false, shape: 'rounded' },
+  args: { variant: 'primary', outlined: false, shape: 'rounded', dot: false },
 };
 
 export default metadata;
 
 interface IgcBadgeArgs {
-  /** The type of badge. */
+  /** The type (style variant) of the badge. */
   variant: 'primary' | 'info' | 'success' | 'warning' | 'danger';
   /** Sets whether to draw an outlined version of the badge. */
   outlined: boolean;
   /** The shape of the badge. */
   shape: 'rounded' | 'square';
+  /**
+   * Sets whether to render a dot type badge.
+   * When enabled, the badge appears as a small dot without any content.
+   */
+  dot: boolean;
 }
 type Story = StoryObj<IgcBadgeArgs>;
 

stories/badge.stories.ts

@@ -36,14 +36,15 @@ const metadata: Meta<IgcCardComponent> = {
     docs: {
       description: {
         component:
-          'A container which wraps different elements related to a single subject',
+          'A container component that wraps different elements related to a single subject.\nThe card component provides a flexible container for organizing content such as headers,\nmedia, text content, and actions.',
       },
     },
   },
   argTypes: {
     elevated: {
       type: 'boolean',
-      description: 'Sets card elevated style, otherwise card looks outlined.',
+      description:
+        'Sets the card to have an elevated appearance with shadow.\nWhen false, the card uses an outlined style with a border.',
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
@@ -54,7 +55,10 @@ const metadata: Meta<IgcCardComponent> = {
 export default metadata;
 
 interface IgcCardArgs {
-  /** Sets card elevated style, otherwise card looks outlined. */
+  /**
+   * Sets the card to have an elevated appearance with shadow.
+   * When false, the card uses an outlined style with a border.
+   */
   elevated: boolean;
 }
 type Story = StoryObj<IgcCardArgs>;

stories/card.stories.ts

@@ -109,7 +109,7 @@ const metadata: Meta<IgcCarouselComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
   },
@@ -158,7 +158,7 @@ interface IgcCarouselArgs {
   maximumIndicatorsCount: number;
   /** The animation type. */
   animationType: 'slide' | 'fade' | 'none';
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
 }
 type Story = StoryObj<IgcCarouselArgs>;

stories/carousel.stories.ts

@@ -54,7 +54,7 @@ const metadata: Meta<IgcChipComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
   },
@@ -79,7 +79,7 @@ interface IgcChipArgs {
   selected: boolean;
   /** A property that sets the color variant of the chip component. */
   variant: 'primary' | 'info' | 'success' | 'warning' | 'danger';
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
 }
 type Story = StoryObj<IgcChipArgs>;

stories/chip.stories.ts

@@ -72,7 +72,7 @@ const metadata: Meta<IgcComboComponent> = {
     locale: {
       type: 'string',
       description:
-        'Gets/Sets the locale used for formatting and displaying the dates in the component.',
+        'Gets/Sets the locale used for getting language, affecting resource strings.',
       control: 'text',
     },
     label: {
@@ -192,7 +192,7 @@ interface IgcComboArgs {
   autofocus: boolean;
   /** Focuses the list of options when the menu opens. */
   autofocusList: boolean;
-  /** Gets/Sets the locale used for formatting and displaying the dates in the component. */
+  /** Gets/Sets the locale used for getting language, affecting resource strings. */
   locale: string;
   /** The label attribute of the control. */
   label: string;