npm - igniteui-webcomponents - Versions diffs - 4.2.0 → 4.2.2 - Mend

igniteui-webcomponents 4.2.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/themes/light/material.css CHANGED Viewed

@@ -363,7 +363,6 @@
 :root {
   --ig-font-family: 'Titillium Web', sans-serif;
-  --ig-h1-font-family: var(--ig-font-family);
   --ig-h1-font-size: 6rem;
   --ig-h1-font-weight: 300;
   --ig-h1-font-style: normal;
@@ -372,7 +371,6 @@
   --ig-h1-text-transform: none;
   --ig-h1-margin-top: 1.75rem;
   --ig-h1-margin-bottom: 3.5rem;
-  --ig-h2-font-family: var(--ig-font-family);
   --ig-h2-font-size: 3.75rem;
   --ig-h2-font-weight: 300;
   --ig-h2-font-style: normal;
@@ -381,7 +379,6 @@
   --ig-h2-text-transform: none;
   --ig-h2-margin-top: 1.75rem;
   --ig-h2-margin-bottom: 1.75rem;
-  --ig-h3-font-family: var(--ig-font-family);
   --ig-h3-font-size: 3rem;
   --ig-h3-font-weight: 400;
   --ig-h3-font-style: normal;
@@ -390,7 +387,6 @@
   --ig-h3-text-transform: none;
   --ig-h3-margin-top: 1.75rem;
   --ig-h3-margin-bottom: 0;
-  --ig-h4-font-family: var(--ig-font-family);
   --ig-h4-font-size: 2.125rem;
   --ig-h4-font-weight: 400;
   --ig-h4-font-style: normal;
@@ -399,7 +395,6 @@
   --ig-h4-text-transform: none;
   --ig-h4-margin-top: 1.75rem;
   --ig-h4-margin-bottom: 0;
-  --ig-h5-font-family: var(--ig-font-family);
   --ig-h5-font-size: 1.5rem;
   --ig-h5-font-weight: 400;
   --ig-h5-font-style: normal;
@@ -408,7 +403,6 @@
   --ig-h5-text-transform: none;
   --ig-h5-margin-top: 1.75rem;
   --ig-h5-margin-bottom: 0;
-  --ig-h6-font-family: var(--ig-font-family);
   --ig-h6-font-size: 1.25rem;
   --ig-h6-font-weight: 600;
   --ig-h6-font-style: normal;
@@ -417,7 +411,6 @@
   --ig-h6-text-transform: none;
   --ig-h6-margin-top: 0;
   --ig-h6-margin-bottom: 0;
-  --ig-subtitle-1-font-family: var(--ig-font-family);
   --ig-subtitle-1-font-size: 1rem;
   --ig-subtitle-1-font-weight: 400;
   --ig-subtitle-1-font-style: normal;
@@ -426,7 +419,6 @@
   --ig-subtitle-1-text-transform: none;
   --ig-subtitle-1-margin-top: 0;
   --ig-subtitle-1-margin-bottom: 0;
-  --ig-subtitle-2-font-family: var(--ig-font-family);
   --ig-subtitle-2-font-size: 0.875rem;
   --ig-subtitle-2-font-weight: 600;
   --ig-subtitle-2-font-style: normal;
@@ -435,7 +427,6 @@
   --ig-subtitle-2-text-transform: none;
   --ig-subtitle-2-margin-top: 0;
   --ig-subtitle-2-margin-bottom: 0;
-  --ig-body-1-font-family: var(--ig-font-family);
   --ig-body-1-font-size: 1rem;
   --ig-body-1-font-weight: 400;
   --ig-body-1-font-style: normal;
@@ -444,7 +435,6 @@
   --ig-body-1-text-transform: none;
   --ig-body-1-margin-top: 1.75rem;
   --ig-body-1-margin-bottom: 1rem;
-  --ig-body-2-font-family: var(--ig-font-family);
   --ig-body-2-font-size: 0.875rem;
   --ig-body-2-font-weight: 400;
   --ig-body-2-font-style: normal;
@@ -453,7 +443,6 @@
   --ig-body-2-text-transform: none;
   --ig-body-2-margin-top: 0;
   --ig-body-2-margin-bottom: 0;
-  --ig-button-font-family: var(--ig-font-family);
   --ig-button-font-size: 0.875rem;
   --ig-button-font-weight: 600;
   --ig-button-font-style: normal;
@@ -462,7 +451,6 @@
   --ig-button-text-transform: uppercase;
   --ig-button-margin-top: 0;
   --ig-button-margin-bottom: 0;
-  --ig-caption-font-family: var(--ig-font-family);
   --ig-caption-font-size: 0.75rem;
   --ig-caption-font-weight: 400;
   --ig-caption-font-style: normal;
@@ -471,7 +459,6 @@
   --ig-caption-text-transform: none;
   --ig-caption-margin-top: 0;
   --ig-caption-margin-bottom: 0;
-  --ig-overline-font-family: var(--ig-font-family);
   --ig-overline-font-size: 0.625rem;
   --ig-overline-font-weight: 400;
   --ig-overline-font-style: normal;
@@ -483,7 +470,7 @@
 }
 .ig-typography h1 {
-  font-family: var(--ig-h1-font-family);
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
   font-style: var(--ig-h1-font-style);
@@ -494,7 +481,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography h2 {
-  font-family: var(--ig-h2-font-family);
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
   font-style: var(--ig-h2-font-style);
@@ -505,7 +492,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography h3 {
-  font-family: var(--ig-h3-font-family);
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
   font-style: var(--ig-h3-font-style);
@@ -516,7 +503,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography h4 {
-  font-family: var(--ig-h4-font-family);
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
   font-style: var(--ig-h4-font-style);
@@ -527,7 +514,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography h5 {
-  font-family: var(--ig-h5-font-family);
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
   font-style: var(--ig-h5-font-style);
@@ -538,7 +525,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography h6 {
-  font-family: var(--ig-h6-font-family);
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
   font-style: var(--ig-h6-font-style);
@@ -549,7 +536,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography p {
-  font-family: var(--ig-body-1-font-family);
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
   font-style: var(--ig-body-1-font-style);
@@ -560,7 +547,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__h1 {
-  font-family: var(--ig-h1-font-family);
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
   font-style: var(--ig-h1-font-style);
@@ -571,7 +558,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography .ig-typography__h2 {
-  font-family: var(--ig-h2-font-family);
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
   font-style: var(--ig-h2-font-style);
@@ -582,7 +569,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography .ig-typography__h3 {
-  font-family: var(--ig-h3-font-family);
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
   font-style: var(--ig-h3-font-style);
@@ -593,7 +580,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography .ig-typography__h4 {
-  font-family: var(--ig-h4-font-family);
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
   font-style: var(--ig-h4-font-style);
@@ -604,7 +591,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography .ig-typography__h5 {
-  font-family: var(--ig-h5-font-family);
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
   font-style: var(--ig-h5-font-style);
@@ -615,7 +602,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography .ig-typography__h6 {
-  font-family: var(--ig-h6-font-family);
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
   font-style: var(--ig-h6-font-style);
@@ -626,7 +613,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-font-family);
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-1-font-size);
   font-weight: var(--ig-subtitle-1-font-weight);
   font-style: var(--ig-subtitle-1-font-style);
@@ -637,7 +624,7 @@
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-2 {
-  font-family: var(--ig-subtitle-2-font-family);
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-2-font-size);
   font-weight: var(--ig-subtitle-2-font-weight);
   font-style: var(--ig-subtitle-2-font-style);
@@ -648,7 +635,7 @@
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 .ig-typography .ig-typography__body-1 {
-  font-family: var(--ig-body-1-font-family);
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
   font-style: var(--ig-body-1-font-style);
@@ -659,7 +646,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__body-2 {
-  font-family: var(--ig-body-2-font-family);
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
   font-size: var(--ig-body-2-font-size);
   font-weight: var(--ig-body-2-font-weight);
   font-style: var(--ig-body-2-font-style);
@@ -670,7 +657,7 @@
   margin-bottom: var(--ig-body-2-margin-bottom);
 }
 .ig-typography .ig-typography__button {
-  font-family: var(--ig-button-font-family);
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
   font-size: var(--ig-button-font-size);
   font-weight: var(--ig-button-font-weight);
   font-style: var(--ig-button-font-style);
@@ -681,7 +668,7 @@
   margin-bottom: var(--ig-button-margin-bottom);
 }
 .ig-typography .ig-typography__caption {
-  font-family: var(--ig-caption-font-family);
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
   font-size: var(--ig-caption-font-size);
   font-weight: var(--ig-caption-font-weight);
   font-style: var(--ig-caption-font-style);
@@ -692,7 +679,7 @@
   margin-bottom: var(--ig-caption-margin-bottom);
 }
 .ig-typography .ig-typography__overline {
-  font-family: var(--ig-overline-font-family);
+  font-family: var(--ig-overline-font-family, var(--ig-font-family));
   font-size: var(--ig-overline-font-size);
   font-weight: var(--ig-overline-font-weight);
   font-style: var(--ig-overline-font-style);

package/vscode-html-custom-data.json CHANGED Viewed

@@ -288,7 +288,7 @@
     },
     {
       "name": "igc-calendar",
-      "description": "Represents a calendar that lets users\nto select a date value in a variety of different ways.\n\nEvents:\n\n  * `igcChange` {} - Emitted when calendar changes its value.\n\nSlots:\n\n  * ` ` {} - The default slot for the calendar.\n\n  * `title` {} - Renders the title of the calendar header.\n\nAttributes:\n\n  * `hide-outside-days` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hide-header` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `header-orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visible-months` {`number`} - The number of months displayed in days view.\n\n  * `active-view` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `styles` - \n\n  * `tagName` {`\"igc-calendar\"`} - \n\n  * `formatterMonth` {`DateTimeFormat`} - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `formatterMonthDay` {`DateTimeFormat`} - \n\n  * `rangePreviewDate` {`Date | undefined`} - \n\n  * `activeDaysViewIndex` {`number`} - \n\n  * `daysViews` {`NodeList`} - \n\n  * `monthsView` - \n\n  * `yearsView` - \n\n  * `hideOutsideDays` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hideHeader` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `headerOrientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visibleMonths` {`number`} - The number of months displayed in days view.\n\n  * `activeView` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `formatOptions` {`Pick<DateTimeFormatOptions, \"month\" | \"weekday\">`} - The options used to format the months and the weekdays in the calendar views.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `yearPerPage` {`18 | 15`} - \n\n  * `previousButtonLabel` {`string`} - \n\n  * `nextButtonLabel` {`string`} - \n\n  * `handleKeyDown` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
+      "description": "Represents a calendar that lets users\nto select a date value in a variety of different ways.\n\nEvents:\n\n  * `igcChange` {} - Emitted when calendar changes its value.\n\nSlots:\n\n  * ` ` {} - The default slot for the calendar.\n\n  * `title` {} - Renders the title of the calendar header.\n\nAttributes:\n\n  * `hide-outside-days` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hide-header` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `header-orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visible-months` {`number`} - The number of months displayed in days view.\n\n  * `active-view` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `styles` - \n\n  * `tagName` {`\"igc-calendar\"`} - \n\n  * `formatterMonth` {`DateTimeFormat`} - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `formatterMonthDay` {`DateTimeFormat`} - \n\n  * `themeController` {`ThemeController`} - \n\n  * `theme` {`Theme`} - \n\n  * `rangePreviewDate` {`Date | undefined`} - \n\n  * `activeDaysViewIndex` {`number`} - \n\n  * `daysViews` {`NodeList`} - \n\n  * `monthsView` - \n\n  * `yearsView` - \n\n  * `hideOutsideDays` {`boolean`} - Controls the visibility of the dates that do not belong to the current month.\n\n  * `hideHeader` {`boolean`} - Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection.\n\n  * `headerOrientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the header.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - The orientation of the multiple months displayed in days view.\n\n  * `visibleMonths` {`number`} - The number of months displayed in days view.\n\n  * `activeView` {`\"days\" | \"months\" | \"years\"`} - The active view.\n\n  * `formatOptions` {`Pick<DateTimeFormatOptions, \"month\" | \"weekday\">`} - The options used to format the months and the weekdays in the calendar views.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `yearPerPage` {`18 | 15`} - \n\n  * `previousButtonLabel` {`string`} - \n\n  * `nextButtonLabel` {`string`} - \n\n  * `handleKeyDown` - \n\n  * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
       "attributes": [
         {
           "name": "hide-outside-days",