igniteui-webcomponents 4.1.0-alpha.1 → 4.1.0
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.
- package/CHANGELOG.md +6 -1
- package/components/combo/themes/light/combo.base.css.js +4 -0
- package/components/combo/themes/light/combo.base.css.js.map +1 -1
- package/components/date-time-input/date-time-input.d.ts +2 -2
- package/components/date-time-input/date-time-input.js +6 -5
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/input/themes/light/input.base.css.js +7 -0
- package/components/input/themes/light/input.base.css.js.map +1 -1
- package/components/input/themes/light/input.bootstrap.css.js +2 -1
- package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
- package/components/input/themes/light/input.fluent.css.js +0 -4
- package/components/input/themes/light/input.fluent.css.js.map +1 -1
- package/components/input/themes/light/input.indigo.css.js +1 -2
- package/components/input/themes/light/input.indigo.css.js.map +1 -1
- package/components/input/themes/light/input.material.css.js +5 -3
- package/components/input/themes/light/input.material.css.js.map +1 -1
- package/components/mask-input/mask-input-base.d.ts +6 -7
- package/components/mask-input/mask-input-base.js +22 -13
- package/components/mask-input/mask-input-base.js.map +1 -1
- package/components/mask-input/mask-input.d.ts +5 -7
- package/components/mask-input/mask-input.js +17 -23
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/mask-input/mask-parser.d.ts +3 -1
- package/components/mask-input/mask-parser.js +16 -0
- package/components/mask-input/mask-parser.js.map +1 -1
- package/components/select/select.d.ts +2 -2
- package/components/select/select.js +5 -4
- package/components/select/select.js.map +1 -1
- package/components/select/themes/light/select.base.css.js +4 -0
- package/components/select/themes/light/select.base.css.js.map +1 -1
- package/package.json +1 -1
- package/vscode-html-custom-data.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.base.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"select.base.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-family: var(--ig-font-family);\n}\n\n[part=base] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n overflow-y: auto;\n overflow-x: hidden;\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n -webkit-box-shadow: var(--ig-elevation-8);\n box-shadow: var(--ig-elevation-8);\n min-width: 7rem;\n padding: 0.5rem 0;\n z-index: 10005;\n}\n\n:host([size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host {\n display: block;\n}\n:host ::slotted([slot=helper-text]) {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[role=combobox] {\n outline-style: none;\n}\n\n:host([invalid]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) ::slotted([slot=helper-text]) {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [role=combobox] {\n pointer-events: none;\n}\n\nigc-input {\n cursor: pointer;\n}\n\nigc-input::part(input) {\n cursor: pointer;\n}\nigc-input::part(input)::-moz-selection {\n background: transparent;\n}\nigc-input::part(input)::selection {\n background: transparent;\n}\n\n[name=prefix]::slotted(*),\n[name=suffix]::slotted(*) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-webcomponents",
|
|
3
|
-
"version": "4.1.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
|
|
5
5
|
"author": "Infragistics",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -985,7 +985,7 @@
|
|
|
985
985
|
},
|
|
986
986
|
{
|
|
987
987
|
"name": "igc-date-time-input",
|
|
988
|
-
"description": "A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats.\n\nEvents:\n\n * `igcInput` {} - Emitted when the control input receives user input.\n\n * `igcChange` {} - Emitted when the control's checked state changes.\n\n * `igcFocus` {} - Emitted when the control gains focus.\n\n * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n * `prefix` {} - Renders content before the input.\n\n * `suffix` {} - Renders content after input.\n\n * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n * `input-format` {`string`} - The date format to apply on the input.\n\n * `min-value` {`Date | null`} - The minimum value required for the input to remain valid.\n\n * `max-value` {`Date | null`} - The maximum value required for the input to remain valid.\n\n * `display-format` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n * `spin-loop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n * `locale` {`string`} - The locale settings used to display the value.\n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `value` {`Date | null`} - The value of the input.\n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n * `tagName` {`\"igc-date-time-input\"`} - \n\n * `_defaultMask` {`string`} - \n\n * `_value` {`Date | null`} - \n\n * `_oldValue` {`Date | null`} - \n\n * `_inputDateParts` {`DatePartInfo[]`} - \n\n * `_inputFormat` {`string`} - \n\n * `_datePartDeltas` {`DatePartDeltas`} - \n\n * `inputFormat` {`string`} - The date format to apply on the input.\n\n * `minValue` {`Date | null`} - The minimum value required for the input to remain valid.\n\n * `maxValue` {`Date | null`} - The maximum value required for the input to remain valid.\n\n * `displayFormat` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n * `spinDelta` {`DatePartDeltas`} - Delta values used to increment or decrement each date part on step actions.\nAll values default to `1`.\n\n * `spinLoop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n * `locale` {`string`} - The locale settings used to display the value.\n\n * `hasDateParts` {`boolean`} - \n\n * `hasTimeParts` {`boolean`} - \n\n * `targetDatePart` {`DatePart | undefined`} - \n\n * `datePartDeltas` {`DatePartDeltas`} - \n\n * `parser` - \n\n * `selection` {`
|
|
988
|
+
"description": "A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats.\n\nEvents:\n\n * `igcInput` {} - Emitted when the control input receives user input.\n\n * `igcChange` {} - Emitted when the control's checked state changes.\n\n * `igcFocus` {} - Emitted when the control gains focus.\n\n * `igcBlur` {} - Emitted when the control loses focus.\n\nSlots:\n\n * `prefix` {} - Renders content before the input.\n\n * `suffix` {} - Renders content after input.\n\n * `helper-text` {} - Renders content below the input.\n\nAttributes:\n\n * `input-format` {`string`} - The date format to apply on the input.\n\n * `min-value` {`Date | null`} - The minimum value required for the input to remain valid.\n\n * `max-value` {`Date | null`} - The maximum value required for the input to remain valid.\n\n * `display-format` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n * `spin-loop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n * `locale` {`string`} - The locale settings used to display the value.\n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `value` {`Date | null`} - The value of the input.\n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n * `tagName` {`\"igc-date-time-input\"`} - \n\n * `_defaultMask` {`string`} - \n\n * `_value` {`Date | null`} - \n\n * `_oldValue` {`Date | null`} - \n\n * `_inputDateParts` {`DatePartInfo[]`} - \n\n * `_inputFormat` {`string`} - \n\n * `_datePartDeltas` {`DatePartDeltas`} - \n\n * `inputFormat` {`string`} - The date format to apply on the input.\n\n * `minValue` {`Date | null`} - The minimum value required for the input to remain valid.\n\n * `maxValue` {`Date | null`} - The maximum value required for the input to remain valid.\n\n * `displayFormat` {`string`} - Format to display the value in when not editing.\nDefaults to the input format if not set.\n\n * `spinDelta` {`DatePartDeltas`} - Delta values used to increment or decrement each date part on step actions.\nAll values default to `1`.\n\n * `spinLoop` {`boolean`} - Sets whether to loop over the currently spun segment.\n\n * `locale` {`string`} - The locale settings used to display the value.\n\n * `hasDateParts` {`boolean`} - \n\n * `hasTimeParts` {`boolean`} - \n\n * `targetDatePart` {`DatePart | undefined`} - \n\n * `datePartDeltas` {`DatePartDeltas`} - \n\n * `parser` - \n\n * `selection` {`MaskRange`} - \n\n * `compositionStart` {`number`} - \n\n * `hasFocus` {`boolean`} - \n\n * `maskedValue` {`string`} - \n\n * `_mask` {`string`} - \n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `inputSelection` {`MaskRange`} - \n\n * `emptyMask` {`string`} - \n\n * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n * `styles` - \n\n * `increment` - \n\n * `inputId` {`string`} - \n\n * `value` {`Date | null`} - The value of the input.\n\n * `input` {`HTMLInputElement`} - \n\n * `prefixes` {`HTMLElement[]`} - \n\n * `suffixes` {`HTMLElement[]`} - \n\n * `helperText` {`HTMLElement[]`} - \n\n * `themeController` {`ThemeController`} - \n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
|
|
989
989
|
"attributes": [
|
|
990
990
|
{
|
|
991
991
|
"name": "input-format",
|
|
@@ -1609,7 +1609,7 @@
|
|
|
1609
1609
|
},
|
|
1610
1610
|
{
|
|
1611
1611
|
"name": "igc-mask-input",
|
|
1612
|
-
"description": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules\n\nEvents:\n\n * `igcInput` {} - Emitted when the control receives user input\n\n * `igcChange` {} - Emitted when an alteration of the control's value is committed by the user\n\n * `igcFocus` {} - Emitted when the control gains focus\n\n * `igcBlur` {} - Emitted when the control loses focus\n\nSlots:\n\n * `prefix` {} - Renders content before the input\n\n * `suffix` {} - Renders content after the input\n\n * `helper-text` {} - Renders content below the input\n\nAttributes:\n\n * `value-mode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n * `mask` {`string`} - The mask pattern to apply on the input.\n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n * `tagName` {`\"igc-mask-input\"`} - \n\n * `_value` {`string`} - \n\n * `valueMode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n * `mask` {`string`} - The mask pattern to apply on the input.\n\n * `parser` - \n\n * `selection` {`
|
|
1612
|
+
"description": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules\n\nEvents:\n\n * `igcInput` {} - Emitted when the control receives user input\n\n * `igcChange` {} - Emitted when an alteration of the control's value is committed by the user\n\n * `igcFocus` {} - Emitted when the control gains focus\n\n * `igcBlur` {} - Emitted when the control loses focus\n\nSlots:\n\n * `prefix` {} - Renders content before the input\n\n * `suffix` {} - Renders content after the input\n\n * `helper-text` {} - Renders content below the input\n\nAttributes:\n\n * `value-mode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n * `mask` {`string`} - The mask pattern to apply on the input.\n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.\n\nProperties:\n\n * `tagName` {`\"igc-mask-input\"`} - \n\n * `_value` {`string`} - \n\n * `valueMode` {`\"raw\" | \"withFormatting\"`} - Dictates the behavior when retrieving the value of the control:\n\n- `raw` will return the clean user input.\n- `withFormatting` will return the value with all literals and prompts.\n\n * `mask` {`string`} - The mask pattern to apply on the input.\n\n * `parser` - \n\n * `selection` {`MaskRange`} - \n\n * `compositionStart` {`number`} - \n\n * `hasFocus` {`boolean`} - \n\n * `maskedValue` {`string`} - \n\n * `_mask` {`string`} - \n\n * `prompt` {`string`} - The prompt symbol to use for unfilled parts of the mask.\n\n * `invalid` {`boolean`} - Controls the validity of the control.\n\n * `inputSelection` {`MaskRange`} - \n\n * `emptyMask` {`string`} - \n\n * `shadowRootOptions` {`{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }`} - \n\n * `styles` - \n\n * `increment` - \n\n * `inputId` {`string`} - \n\n * `value` {`string`} - The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.\n\n * `input` {`HTMLInputElement`} - \n\n * `prefixes` {`HTMLElement[]`} - \n\n * `suffixes` {`HTMLElement[]`} - \n\n * `helperText` {`HTMLElement[]`} - \n\n * `themeController` {`ThemeController`} - \n\n * `dir` {`Direction`} - The direction attribute of the control.\n\n * `name` {`string`} - The name attribute of the control.\n\n * `outlined` {`boolean`} - Whether the control will have outlined appearance.\n\n * `required` {`boolean`} - Makes the control a required field.\n\n * `disabled` {`boolean`} - Makes the control a disabled field.\n\n * `readonly` {`boolean`} - Makes the control a readonly field.\n\n * `placeholder` {`string`} - The placeholder attribute of the control.\n\n * `label` {`string`} - The label for the control.\n\n * `size` {\"small\" | \"medium\" | \"large\"} - Determines the size of the component.",
|
|
1613
1613
|
"attributes": [
|
|
1614
1614
|
{
|
|
1615
1615
|
"name": "value-mode",
|