npm - igniteui-webcomponents - Versions diffs - 4.3.1 → 4.4.0 - Mend

igniteui-webcomponents 4.3.1 → 4.4.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.

Files changed (369) hide show

package/components/mask-input/mask-input-base.js CHANGED Viewed

@@ -15,10 +15,9 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
         this.parser = new MaskParser();
         this.selection = { start: 0, end: 0 };
         this.compositionStart = 0;
-        this.hasFocus = false;
+        this.focused = false;
         this.maskedValue = '';
         this._mask = '';
-        this.invalid = false;
     }
     get inputSelection() {
         return {
@@ -34,10 +33,6 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
         this._mask = this._mask || this.parser.mask;
         this.prompt = this.prompt || this.parser.prompt;
     }
-    setCustomValidity(message) {
-        this.input.setCustomValidity(message);
-        this.invalid = !this.input.checkValidity();
-    }
     select() {
         this.input.select();
     }
@@ -91,8 +86,11 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
             end: this.inputSelection.end,
         });
     }
-    handleInvalid() {
-        this.invalid = true;
+    handleClick() {
+        const { selectionStart: start, selectionEnd: end } = this.input;
+        if (start === end && start === this.maskedValue.length) {
+            this.select();
+        }
     }
     setSelectionRange(start, end, direction) {
         super.setSelectionRange(start, end, direction);
@@ -101,7 +99,7 @@ let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInput
 };
 __decorate([
     state()
-], IgcMaskInputBaseComponent.prototype, "hasFocus", void 0);
+], IgcMaskInputBaseComponent.prototype, "focused", void 0);
 __decorate([
     state()
 ], IgcMaskInputBaseComponent.prototype, "maskedValue", void 0);
@@ -111,9 +109,6 @@ __decorate([
 __decorate([
     property()
 ], IgcMaskInputBaseComponent.prototype, "prompt", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], IgcMaskInputBaseComponent.prototype, "invalid", void 0);
 __decorate([
     blazorSuppress()
 ], IgcMaskInputBaseComponent.prototype, "setSelectionRange", null);

package/components/mask-input/mask-input-base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mask-input-base.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ9C,IAAsB,yBAAyB,GAA/C,MAAsB,yBAA0B,SAAQ,qBAAqB;IAA7E;;QACY,WAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC1B,cAAS,GAAc,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;QAC5C,qBAAgB,GAAG,CAAC,CAAC;QAGrB,~~aAAQ~~,GAAG,KAAK,CAAC;~~QAGjB~~,gBAAW,GAAG,EAAE,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;~~QAQd~~,~~YAAO,GAAG,KAAK,~~CAAC;~~IA2HzB~~,~~CAAC;IAzHC,~~IAAc,cAAc;QAC1B,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC;YACrC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC;SAClC,CAAC;IACJ,CAAC;IAED,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAClD,CAAC;~~IAMM,iBAAiB,CAAC,OAAe;QACtC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7C,CAAC;~~IAGM,MAAM;QACX,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;IAES,WAAW,CAAC,EAAE,SAAS,EAAE,WAAW,EAAc;QAC1D,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEjE,QAAQ,SAAS,EAAE;YACjB,KAAK,sBAAsB;gBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;gBACnD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CACnD,CAAC;YAEJ,KAAK,uBAAuB;gBAC1B,IAAI,WAAW;oBAAE,OAAO;gBACxB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;oBAC7B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAC1B;oBACD,GAAG;iBACJ,CAAC,CAAC;YAEL,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAEjD,KAAK,YAAY;gBACf,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAC/C,IAAI,CAAC,SAAS,CACf,CAAC;YAEJ,KAAK,iBAAiB;gBACpB,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAC/C;oBACE,KAAK;oBACL,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK;iBAC/B,CACF,CAAC;YAEJ,KAAK,gBAAgB;gBACnB,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EACnE,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAC3B,CAAC;SACL;IACH,CAAC;IAES,aAAa,CAAC,EAAE,GAAG,EAAiB;QAC5C,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,SAAS;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,eAAe;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,sBAAsB;QAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACpD,CAAC;IAES,oBAAoB,CAAC,EAAE,IAAI,EAAoB;QACvD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YACrB,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG;SAC7B,CAAC,CAAC;IACL,CAAC;IAES,~~aAAa~~;~~QACrB~~,IAAI,CAAC,~~OAAO~~,GAAG,IAAI,CAAC;~~IACtB~~,CAAC;IAGe,iBAAiB,CAC/B,KAAa,EACb,GAAW,EACX,SAA2C;QAE3C,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IAClC,CAAC;CAGF,CAAA;~~AAzIW~~;IADT,KAAK,EAAE;~~2DACmB~~;~~AAGjB~~;IADT,KAAK,EAAE;8DACmB;AAGjB;IADT,KAAK,EAAE;wDACa;AAId;IADN,QAAQ,EAAE;yDACY;~~AAIhB~~;~~IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DACpB;AAiHP;~~IADf,cAAc,EAAE;kEAQhB;~~AA5ImB~~,yBAAyB;IAD9C,gBAAgB;GACK,yBAAyB,~~CA+I9C~~;~~SA/IqB~~,yBAAyB","sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport { MaskParser } from './mask-parser.js';\n\nexport type MaskRange = {\n start: number;\n end: number;\n};\n\n@blazorDeepImport\nexport abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {\n protected parser = new MaskParser();\n protected selection: MaskRange = { start: 0, end: 0 };\n protected compositionStart = 0;\n\n @state()\n protected ~~hasFocus~~ = false;\n\n @state()\n protected maskedValue = '';\n\n @state()\n protected _mask = '';\n\n /** The prompt symbol to use for unfilled parts of the mask. /\n @property()\n public prompt!: string;\n\n ~~/* Controls the validity of the control. /\n @property({ reflect: true, type: Boolean })\n public invalid = false;\n\n~~ protected get inputSelection(): MaskRange {\n return {\n start: this.input.selectionStart \|\| 0,\n end: this.input.selectionEnd \|\| 0,\n };\n }\n\n protected get emptyMask(): string {\n return this.parser.apply();\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n\n this._mask = this._mask \|\| this.parser.mask;\n this.prompt = this.prompt \|\| this.parser.prompt;\n }\n\n /\n Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n /\n public setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /* Selects all text within the input. */\n public select() {\n this.input.select();\n }\n\n protected handleInput({ inputType, isComposing }: InputEvent) {\n const EMPTY = '';\n const value = this.input.value;\n const { start, end } = this.selection;\n const deleteEnd = this.parser.getNextNonLiteralPosition(end) + 1;\n\n switch (inputType) {\n case 'deleteContentForward':\n this.updateInput(EMPTY, { start, end: deleteEnd });\n return this.updateComplete.then(() =>\n this.input.setSelectionRange(deleteEnd, deleteEnd)\n );\n\n case 'deleteContentBackward':\n if (isComposing) return;\n return this.updateInput(EMPTY, {\n start: this.parser.getPreviousNonLiteralPosition(\n this.inputSelection.start\n ),\n end,\n });\n\n case 'deleteByCut':\n return this.updateInput(EMPTY, this.selection);\n\n case 'insertText':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n this.selection\n );\n\n case 'insertFromPaste':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n {\n start,\n end: this.inputSelection.start,\n }\n );\n\n case 'insertFromDrop':\n return this.updateInput(\n value.substring(this.inputSelection.start, this.inputSelection.end),\n { ...this.inputSelection }\n );\n }\n }\n\n protected handleKeydown({ key }: KeyboardEvent) {\n if (!key) {\n return;\n }\n this.selection = this.inputSelection;\n }\n\n protected handleCut() {\n this.selection = this.inputSelection;\n }\n\n protected handleDragStart() {\n this.selection = this.inputSelection;\n }\n\n protected handleCompositionStart() {\n this.compositionStart = this.inputSelection.start;\n }\n\n protected handleCompositionEnd({ data }: CompositionEvent) {\n this.updateInput(data, {\n start: this.compositionStart,\n end: this.inputSelection.end,\n });\n }\n\n protected ~~handleInvalid~~() {\n this.~~invalid~~ = ~~true~~;\n }\n\n @blazorSuppress()\n public override setSelectionRange(\n start: number,\n end: number,\n direction?: 'backward' \| 'forward' \| 'none'\n ): void {\n super.setSelectionRange(start, end, direction);\n this.selection = { start, end };\n }\n\n protected abstract updateInput(string: string, range: MaskRange): void;\n}\n"]}
1	+ {"version":3,"file":"mask-input-base.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ9C,IAAsB,yBAAyB,GAA/C,MAAsB,yBAA0B,SAAQ,qBAAqB;IAA7E;;QACY,WAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC1B,cAAS,GAAc,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;QAC5C,qBAAgB,GAAG,CAAC,CAAC;QAGrB,YAAO,GAAG,KAAK,CAAC;QAGhB,gBAAW,GAAG,EAAE,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;IA2HvB,CAAC;IArHC,IAAc,cAAc;QAC1B,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC;YACrC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC;SAClC,CAAC;IACJ,CAAC;IAED,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAClD,CAAC;IAGM,MAAM;QACX,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;IAES,WAAW,CAAC,EAAE,SAAS,EAAE,WAAW,EAAc;QAC1D,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEjE,QAAQ,SAAS,EAAE;YACjB,KAAK,sBAAsB;gBACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;gBACnD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CACnD,CAAC;YAEJ,KAAK,uBAAuB;gBAC1B,IAAI,WAAW;oBAAE,OAAO;gBACxB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;oBAC7B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAC1B;oBACD,GAAG;iBACJ,CAAC,CAAC;YAEL,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAEjD,KAAK,YAAY;gBACf,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAC/C,IAAI,CAAC,SAAS,CACf,CAAC;YAEJ,KAAK,iBAAiB;gBACpB,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAC/C;oBACE,KAAK;oBACL,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK;iBAC/B,CACF,CAAC;YAEJ,KAAK,gBAAgB;gBACnB,OAAO,IAAI,CAAC,WAAW,CACrB,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EACnE,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAC3B,CAAC;SACL;IACH,CAAC;IAES,aAAa,CAAC,EAAE,GAAG,EAAiB;QAC5C,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,SAAS;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,eAAe;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;IACvC,CAAC;IAES,sBAAsB;QAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACpD,CAAC;IAES,oBAAoB,CAAC,EAAE,IAAI,EAAoB;QACvD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YACrB,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG;SAC7B,CAAC,CAAC;IACL,CAAC;IAES,WAAW;QACnB,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAGhE,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YACtD,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;IACH,CAAC;IAGe,iBAAiB,CAC/B,KAAa,EACb,GAAW,EACX,SAA2C;QAE3C,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IAClC,CAAC;CAGF,CAAA;AAjIW;IADT,KAAK,EAAE;0DACkB;AAGhB;IADT,KAAK,EAAE;8DACmB;AAGjB;IADT,KAAK,EAAE;wDACa;AAId;IADN,QAAQ,EAAE;yDACY;AA6GP;IADf,cAAc,EAAE;kEAQhB;AApImB,yBAAyB;IAD9C,gBAAgB;GACK,yBAAyB,CAuI9C;SAvIqB,yBAAyB","sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { IgcInputBaseComponent } from '../input/input-base.js';\nimport { MaskParser } from './mask-parser.js';\n\nexport type MaskRange = {\n start: number;\n end: number;\n};\n\n@blazorDeepImport\nexport abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {\n protected parser = new MaskParser();\n protected selection: MaskRange = { start: 0, end: 0 };\n protected compositionStart = 0;\n\n @state()\n protected focused = false;\n\n @state()\n protected maskedValue = '';\n\n @state()\n protected _mask = '';\n\n /** The prompt symbol to use for unfilled parts of the mask. /\n @property()\n public prompt!: string;\n\n protected get inputSelection(): MaskRange {\n return {\n start: this.input.selectionStart \|\| 0,\n end: this.input.selectionEnd \|\| 0,\n };\n }\n\n protected get emptyMask(): string {\n return this.parser.apply();\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n\n this._mask = this._mask \|\| this.parser.mask;\n this.prompt = this.prompt \|\| this.parser.prompt;\n }\n\n /* Selects all text within the input. */\n public select() {\n this.input.select();\n }\n\n protected handleInput({ inputType, isComposing }: InputEvent) {\n const EMPTY = '';\n const value = this.input.value;\n const { start, end } = this.selection;\n const deleteEnd = this.parser.getNextNonLiteralPosition(end) + 1;\n\n switch (inputType) {\n case 'deleteContentForward':\n this.updateInput(EMPTY, { start, end: deleteEnd });\n return this.updateComplete.then(() =>\n this.input.setSelectionRange(deleteEnd, deleteEnd)\n );\n\n case 'deleteContentBackward':\n if (isComposing) return;\n return this.updateInput(EMPTY, {\n start: this.parser.getPreviousNonLiteralPosition(\n this.inputSelection.start\n ),\n end,\n });\n\n case 'deleteByCut':\n return this.updateInput(EMPTY, this.selection);\n\n case 'insertText':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n this.selection\n );\n\n case 'insertFromPaste':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n {\n start,\n end: this.inputSelection.start,\n }\n );\n\n case 'insertFromDrop':\n return this.updateInput(\n value.substring(this.inputSelection.start, this.inputSelection.end),\n { ...this.inputSelection }\n );\n }\n }\n\n protected handleKeydown({ key }: KeyboardEvent) {\n if (!key) {\n return;\n }\n this.selection = this.inputSelection;\n }\n\n protected handleCut() {\n this.selection = this.inputSelection;\n }\n\n protected handleDragStart() {\n this.selection = this.inputSelection;\n }\n\n protected handleCompositionStart() {\n this.compositionStart = this.inputSelection.start;\n }\n\n protected handleCompositionEnd({ data }: CompositionEvent) {\n this.updateInput(data, {\n start: this.compositionStart,\n end: this.inputSelection.end,\n });\n }\n\n protected handleClick() {\n const { selectionStart: start, selectionEnd: end } = this.input;\n\n // Clicking at the end of the input field will select the entire mask\n if (start === end && start === this.maskedValue.length) {\n this.select();\n }\n }\n\n @blazorSuppress()\n public override setSelectionRange(\n start: number,\n end: number,\n direction?: 'backward' \| 'forward' \| 'none'\n ): void {\n super.setSelectionRange(start, end, direction);\n this.selection = { start, end };\n }\n\n protected abstract updateInput(string: string, range: MaskRange): void;\n}\n"]}

package/components/mask-input/mask-input.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';
+import { Validator } from '../common/validators.js';
 /**
  * A masked input is an input field where a developer can control user input and format the visible value,
  * based on configurable rules
@@ -23,6 +24,7 @@ import { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';
  */
 export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     static readonly tagName = "igc-mask-input";
+    protected validators: Validator<this>[];
     protected _value: string;
     /**
      * Dictates the behavior when retrieving the value of the control:
@@ -47,22 +49,19 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     get mask(): string;
     /** The mask pattern to apply on the input. */
     set mask(value: string);
+    connectedCallback(): void;
+    protected setDefaultValue(): void;
+    protected updateFormValue(): void;
     protected promptChange(): void;
-    protected handleInvalidState(): Promise<void>;
     protected updateInput(string: string, range: MaskRange): Promise<void>;
     protected handleDragEnter(): void;
     protected handleDragLeave(): void;
     protected handleFocus(): Promise<void>;
     protected handleBlur(): void;
     protected handleChange(): void;
-    protected handleClick(): void;
     protected updateMaskedValue(): void;
     /** Replaces the selected text in the control and re-applies the mask */
     setRangeText(replacement: string, start: number, end: number, _selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
-    /** Checks for validity of the control and shows the browser message if it's invalid. */
-    reportValidity(): boolean;
-    /** Check for validity of the control */
-    checkValidity(): boolean;
     protected renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/mask-input/mask-input.js CHANGED Viewed

@@ -12,22 +12,32 @@ import { watch } from '../common/decorators/watch.js';
 import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { partNameMap } from '../common/util.js';
 import { IgcMaskInputBaseComponent } from './mask-input-base.js';
+import messages from '../common/localization/validation-en.js';
+import { requiredValidator } from '../common/validators.js';
 class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     constructor() {
         super(...arguments);
+        this.validators = [
+            {
+                ...requiredValidator,
+                isValid: () => (this.required ? !!this._value : true),
+            },
+            {
+                key: 'badInput',
+                message: messages.mask,
+                isValid: () => this.parser.isValidString(this.maskedValue),
+            },
+        ];
         this._value = '';
         this.valueMode = 'raw';
     }
     get value() {
-        return this._value
-            ? this.valueMode !== 'raw'
-                ? this.maskedValue
-                : this._value
-            : this._value;
+        return this.valueMode !== 'raw' ? this.maskedValue : this._value;
     }
     set value(string) {
         this._value = string !== null && string !== void 0 ? string : '';
         this.maskedValue = this.parser.apply(this._value);
+        this.updateFormValue();
     }
     get mask() {
         return this._mask;
@@ -39,90 +49,78 @@ class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
             this.maskedValue = this.parser.apply(this._value);
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    setDefaultValue() {
+        this._defaultValue = this._value;
+    }
+    updateFormValue() {
+        this.valueMode === 'raw'
+            ? this.setFormValue(this.value || null, this.value)
+            : this.setFormValue(this.maskedValue || null, this.maskedValue);
+        this.updateValidity();
+        this.setInvalidState();
+    }
     promptChange() {
         this.parser.prompt = this.prompt;
         if (this.value) {
             this.maskedValue = this.parser.apply(this._value);
         }
     }
-    async handleInvalidState() {
-        await this.updateComplete;
-        this.invalid = !this.checkValidity();
-    }
     async updateInput(string, range) {
         const { value, end } = this.parser.replace(this.maskedValue, string, range.start, range.end);
         this.maskedValue = value;
         this._value = this.parser.parse(value);
+        this.updateFormValue();
         this.requestUpdate();
         if (range.start !== this.mask.length) {
             this.emitEvent('igcInput', { detail: this.value });
         }
         await this.updateComplete;
         this.input.setSelectionRange(end, end);
-        this.invalid = !this.checkValidity();
     }
     handleDragEnter() {
-        if (!this.hasFocus && !this._value) {
-            this.maskedValue = this.parser.apply();
+        if (!this.focused && !this._value) {
+            this.maskedValue = this.emptyMask;
         }
     }
     handleDragLeave() {
-        if (!this.hasFocus) {
+        if (!this.focused) {
             this.updateMaskedValue();
         }
     }
     async handleFocus() {
-        this.hasFocus = true;
+        this.focused = true;
         super.handleFocus();
         if (this.readonly) {
             return;
         }
         if (!this._value) {
-            this.maskedValue = this.parser.apply();
+            this.maskedValue = this.emptyMask;
             await this.updateComplete;
             this.select();
         }
     }
     handleBlur() {
-        this.hasFocus = false;
+        this.focused = false;
         this.updateMaskedValue();
+        this.invalid = !this.checkValidity();
         super.handleBlur();
     }
     handleChange() {
         this.emitEvent('igcChange', { detail: this.value });
-        this.invalid = !this.checkValidity();
-    }
-    handleClick() {
-        if (this.input.selectionStart === this.input.selectionEnd &&
-            this.input.selectionStart === this.maskedValue.length) {
-            this.select();
-        }
     }
     updateMaskedValue() {
-        if (this.maskedValue === this.parser.apply()) {
+        if (this.maskedValue === this.emptyMask) {
             this.maskedValue = '';
         }
     }
     setRangeText(replacement, start, end, _selectMode = 'preserve') {
-        this.input.value = this.parser.replace(this.input.value, replacement, start, end).value;
-        this.maskedValue = this.parser.apply(this.parser.parse(this.input.value));
-        this._value = this.parser.parse(this.maskedValue);
-    }
-    reportValidity() {
-        const state = this._value
-            ? this.parser.isValidString(this.input.value)
-            : this.input.reportValidity();
-        this.invalid = !state;
-        return state;
-    }
-    checkValidity() {
-        if (this.disabled) {
-            return this.input.checkValidity();
-        }
-        if (!this._value) {
-            return !this.required;
-        }
-        return (this.input.checkValidity() && this.parser.isValidString(this.input.value));
+        const { value } = this.parser.replace(this.maskedValue || this.emptyMask, replacement, start, end);
+        this.maskedValue = this.parser.apply(this.parser.parse(value));
+        this.value = this.parser.parse(this.maskedValue);
     }
     renderInput() {
         var _a;
@@ -135,7 +133,6 @@ class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
         .placeholder=${live((_a = this.placeholder) !== null && _a !== void 0 ? _a : this.parser.escapedMask)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
-        ?required=${this.required}
         @dragenter=${this.handleDragEnter}
         @dragleave=${this.handleDragLeave}
         @dragstart=${this.handleDragStart}
@@ -147,8 +144,7 @@ class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
         @compositionstart=${this.handleCompositionStart}
         @compositionend=${this.handleCompositionEnd}
         @input=${this.handleInput}
-        aria-invalid="${this.invalid ? 'true' : 'false'}"
-        @invalid="${this.handleInvalid}"
+        aria-invalid=${this.invalid ? 'true' : 'false'}
         @keydown=${this.handleKeydown}
       />
     `;
@@ -168,10 +164,5 @@ __decorate([
 __decorate([
     watch('prompt')
 ], IgcMaskInputComponent.prototype, "promptChange", null);
-__decorate([
-    watch('required', { waitUntilFirstUpdate: true }),
-    watch('disabled', { waitUntilFirstUpdate: true }),
-    watch('value', { waitUntilFirstUpdate: true })
-], IgcMaskInputComponent.prototype, "handleInvalidState", null);
 export default IgcMaskInputComponent;
 //# sourceMappingURL=mask-input.js.map

package/components/mask-input/mask-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { partNameMap } from '../common/util.js';\nimport { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';\n\n/*\n A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n \n @element igc-mask-input\n \n @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n \n @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n * @fires igcFocus - Emitted when the control gains focus\n * @fires igcBlur - Emitted when the control loses focus\n \n @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n /\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\n public static readonly tagName = 'igc-mask-input';\n\n protected _value = '';\n\n /\n 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 * @attr value-mode\n /\n @property({ attribute: 'value-mode' })\n public valueMode: 'raw' \| 'withFormatting' = 'raw';\n\n /\n The value of the input.\n \n Regardless of the currently set `value-mode`, an empty value will return an empty string.\n * @attr\n /\n @property()\n @blazorTwoWayBind('igcChange', 'detail')\n public get value() {\n return this._value\n ? this.valueMode !== 'raw'\n ? this.maskedValue\n : this._value\n : this._value;\n }\n\n public set value(string: string) {\n this._value = string ?? '';\n this.maskedValue = this.parser.apply(this._value);\n }\n\n /\n The mask pattern to apply on the input.\n * @attr\n /\n @property()\n public get mask() {\n return this._mask;\n }\n\n /* The mask pattern to apply on the input. /\n public set mask(value: string) {\n this._mask = value;\n this.parser.mask = value;\n if (this.value) {\n this.maskedValue = this.parser.apply(this._value);\n }\n }\n\n @watch('prompt')\n protected promptChange() {\n this.parser.prompt = this.prompt;\n if (this.value) {\n this.maskedValue = this.parser.apply(this._value);\n }\n }\n\n @watch('required', { waitUntilFirstUpdate: true })\n @watch('disabled', { waitUntilFirstUpdate: true })\n @watch('value', { waitUntilFirstUpdate: true })\n protected async handleInvalidState() {\n await this.updateComplete;\n this.invalid = !this.checkValidity();\n }\n\n protected async updateInput(string: string, range: MaskRange) {\n const { value, end } = this.parser.replace(\n this.maskedValue,\n string,\n range.start,\n range.end\n );\n\n this.maskedValue = value;\n this._value = this.parser.parse(value);\n\n this.requestUpdate();\n\n if (range.start !== this.mask.length) {\n this.emitEvent('igcInput', { detail: this.value });\n }\n await this.updateComplete;\n\n this.input.setSelectionRange(end, end);\n this.invalid = !this.checkValidity();\n }\n\n protected handleDragEnter() {\n if (!this.hasFocus && !this._value) {\n this.maskedValue = this.parser.apply();\n }\n }\n\n protected handleDragLeave() {\n if (!this.hasFocus) {\n this.updateMaskedValue();\n }\n }\n\n protected override async handleFocus() {\n this.hasFocus = true;\n super.handleFocus();\n\n if (this.readonly) {\n return;\n }\n\n if (!this._value) {\n // In case of empty value, select the whole mask\n this.maskedValue = this.parser.apply();\n\n await this.updateComplete;\n this.select();\n }\n }\n\n protected override handleBlur() {\n this.hasFocus = false;\n this.updateMaskedValue();\n super.handleBlur();\n }\n\n protected handleChange() {\n this.emitEvent('igcChange', { detail: this.value });\n this.invalid = !this.checkValidity();\n }\n\n protected handleClick() {\n // Clicking at the end of the input field will select the entire mask\n if (\n this.input.selectionStart === this.input.selectionEnd &&\n this.input.selectionStart === this.maskedValue.length\n ) {\n this.select();\n }\n }\n\n protected updateMaskedValue() {\n if (this.maskedValue === this.parser.apply()) {\n this.maskedValue = '';\n }\n }\n\n / blazorSuppress /\n /* Replaces the selected text in the control and re-applies the mask /\n public override setRangeText(\n replacement: string,\n start: number,\n end: number,\n _selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n this.input.value = this.parser.replace(\n this.input.value,\n replacement,\n start,\n end\n ).value;\n this.maskedValue = this.parser.apply(this.parser.parse(this.input.value));\n this._value = this.parser.parse(this.maskedValue);\n }\n\n /* Checks for validity of the control and shows the browser message if it's invalid. /\n public reportValidity() {\n const state = this._value\n ? this.parser.isValidString(this.input.value)\n : this.input.reportValidity();\n this.invalid = !state;\n return state;\n }\n\n /* Check for validity of the control */\n public checkValidity() {\n if (this.disabled) {\n return this.input.checkValidity();\n }\n\n if (!this._value) {\n return !this.required;\n }\n\n return (\n this.input.checkValidity() && this.parser.isValidString(this.input.value)\n );\n }\n\n protected override renderInput() {\n return html`\n <input\n type=\"text\"\n part=${partNameMap(this.resolvePartNames('input'))}\n name=${ifDefined(this.name)}\n .value=${live(this.maskedValue)}\n .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n ?required=${this.required}\n @dragenter=${this.handleDragEnter}\n @dragleave=${this.handleDragLeave}\n @dragstart=${this.handleDragStart}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @cut=${this.handleCut}\n @change=${this.handleChange}\n @click=${this.handleClick}\n @compositionstart=${this.handleCompositionStart}\n @compositionend=${this.handleCompositionEnd}\n @input=${this.handleInput}\n aria-invalid=\"${this.invalid ? 'true' : 'false'}\"\n @invalid=\"${this.handleInvalid}\"\n @keydown=${this.handleKeydown}\n />\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-mask-input': IgcMaskInputComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"mask-input.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { partNameMap } from '../common/util.js';\nimport { IgcMaskInputBaseComponent, MaskRange } from './mask-input-base.js';\nimport messages from '../common/localization/validation-en.js';\nimport { Validator, requiredValidator } from '../common/validators.js';\n\n/*\n A masked input is an input field where a developer can control user input and format the visible value,\n * based on configurable rules\n \n @element igc-mask-input\n \n @slot prefix - Renders content before the input\n * @slot suffix - Renders content after the input\n * @slot helper-text - Renders content below the input\n \n @fires igcInput - Emitted when the control receives user input\n * @fires igcChange - Emitted when an alteration of the control's value is committed by the user\n * @fires igcFocus - Emitted when the control gains focus\n * @fires igcBlur - Emitted when the control loses focus\n \n @csspart container - The main wrapper that holds all main input elements\n * @csspart input - The native input element\n * @csspart label - The native label element\n * @csspart prefix - The prefix wrapper\n * @csspart suffix - The suffix wrapper\n * @csspart helper-text - The helper text wrapper\n /\nexport default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {\n public static readonly tagName = 'igc-mask-input';\n\n protected override validators: Validator<this>[] = [\n {\n ...requiredValidator,\n isValid: () => (this.required ? !!this._value : true),\n },\n {\n key: 'badInput',\n message: messages.mask,\n isValid: () => this.parser.isValidString(this.maskedValue),\n },\n ];\n\n protected _value = '';\n\n /\n 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 * @attr value-mode\n /\n @property({ attribute: 'value-mode' })\n public valueMode: 'raw' \| 'withFormatting' = 'raw';\n\n /\n The value of the input.\n \n Regardless of the currently set `value-mode`, an empty value will return an empty string.\n * @attr\n /\n @property()\n @blazorTwoWayBind('igcChange', 'detail')\n public get value() {\n return this.valueMode !== 'raw' ? this.maskedValue : this._value;\n }\n\n public set value(string: string) {\n this._value = string ?? '';\n this.maskedValue = this.parser.apply(this._value);\n this.updateFormValue();\n }\n\n /\n The mask pattern to apply on the input.\n * @attr\n /\n @property()\n public get mask() {\n return this._mask;\n }\n\n /* The mask pattern to apply on the input. /\n public set mask(value: string) {\n this._mask = value;\n this.parser.mask = value;\n if (this.value) {\n this.maskedValue = this.parser.apply(this._value);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.updateValidity();\n }\n\n protected override setDefaultValue(): void {\n this._defaultValue = this._value;\n }\n\n protected updateFormValue() {\n this.valueMode === 'raw'\n ? this.setFormValue(this.value \|\| null, this.value)\n : this.setFormValue(this.maskedValue \|\| null, this.maskedValue);\n this.updateValidity();\n this.setInvalidState();\n }\n\n @watch('prompt')\n protected promptChange() {\n this.parser.prompt = this.prompt;\n if (this.value) {\n this.maskedValue = this.parser.apply(this._value);\n }\n }\n\n protected async updateInput(string: string, range: MaskRange) {\n const { value, end } = this.parser.replace(\n this.maskedValue,\n string,\n range.start,\n range.end\n );\n\n this.maskedValue = value;\n this._value = this.parser.parse(value);\n\n this.updateFormValue();\n this.requestUpdate();\n\n if (range.start !== this.mask.length) {\n this.emitEvent('igcInput', { detail: this.value });\n }\n await this.updateComplete;\n\n this.input.setSelectionRange(end, end);\n }\n\n protected handleDragEnter() {\n if (!this.focused && !this._value) {\n this.maskedValue = this.emptyMask;\n }\n }\n\n protected handleDragLeave() {\n if (!this.focused) {\n this.updateMaskedValue();\n }\n }\n\n protected override async handleFocus() {\n this.focused = true;\n super.handleFocus();\n\n if (this.readonly) {\n return;\n }\n\n if (!this._value) {\n // In case of empty value, select the whole mask\n this.maskedValue = this.emptyMask;\n\n await this.updateComplete;\n this.select();\n }\n }\n\n protected override handleBlur() {\n this.focused = false;\n this.updateMaskedValue();\n this.invalid = !this.checkValidity();\n super.handleBlur();\n }\n\n protected handleChange() {\n this.emitEvent('igcChange', { detail: this.value });\n }\n\n protected updateMaskedValue() {\n if (this.maskedValue === this.emptyMask) {\n this.maskedValue = '';\n }\n }\n\n / blazorSuppress /\n /* Replaces the selected text in the control and re-applies the mask */\n public override setRangeText(\n replacement: string,\n start: number,\n end: number,\n _selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n const { value } = this.parser.replace(\n this.maskedValue \|\| this.emptyMask,\n replacement,\n start,\n end\n );\n this.maskedValue = this.parser.apply(this.parser.parse(value));\n this.value = this.parser.parse(this.maskedValue);\n }\n\n protected override renderInput() {\n return html`\n <input\n type=\"text\"\n part=${partNameMap(this.resolvePartNames('input'))}\n name=${ifDefined(this.name)}\n .value=${live(this.maskedValue)}\n .placeholder=${live(this.placeholder ?? this.parser.escapedMask)}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @dragenter=${this.handleDragEnter}\n @dragleave=${this.handleDragLeave}\n @dragstart=${this.handleDragStart}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @cut=${this.handleCut}\n @change=${this.handleChange}\n @click=${this.handleClick}\n @compositionstart=${this.handleCompositionStart}\n @compositionend=${this.handleCompositionEnd}\n @input=${this.handleInput}\n aria-invalid=${this.invalid ? 'true' : 'false'}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-mask-input': IgcMaskInputComponent;\n }\n}\n"]}

package/components/mask-input/mask-parser.js CHANGED Viewed

@@ -28,6 +28,7 @@ const replaceIMENumbers = (string) => {
 export class MaskParser {
     constructor(options = { format: 'CCCCCCCCCC', promptCharacter: '_' }) {
         this.literals = new Map();
+        this._escapedMask = '';
         this.options = options;
     }
     get literalPositions() {

package/components/mask-input/mask-parser.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mask-parser.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-parser.ts"],"names":[],"mappings":"AAKA,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;AACnC,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,SAAS,CAAC;IAChB,CAAC,GAAG,EAAE,mBAAmB,CAAC;IAC1B,CAAC,GAAG,EAAE,8BAA8B,CAAC;IACrC,CAAC,GAAG,EAAE,iBAAiB,CAAC;IACxB,CAAC,GAAG,EAAE,4BAA4B,CAAC;IACnC,CAAC,GAAG,EAAE,aAAa,CAAC;IACpB,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,oBAAoB,CAAC;IAC3B,CAAC,GAAG,EAAE,SAAS,CAAC;CACjB,CAAC,CAAC;AACH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;AAElC,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;IAC3C,OAAO,MAAM,CAAC,OAAO,CACnB,eAAe,EACf,CAAC,GAAG,EAAE,EAAE,CACN,CAAC;QACC,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT,CAAC,CAAC,GAAG,CAAW,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,UAAU;IAGrB,YACE,UAAuB,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,EAAE;QAK7D,aAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;QAH7C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAKD,IAAW,gBAAgB;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,IAAW,WAAW;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QAC3B,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QACnD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IACtC,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC7B,IAAI,CAAC,OAAO,CAAC,eAAe,GAAG,KAAK;YAClC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IACnC,CAAC;IAES,eAAe;QACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACrD,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAEvE,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBACjE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;gBAC3B,CAAC,EAAE,CAAC;aACL;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;oBACvB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;iBAC/B;aACF;SACF;IACH,CAAC;IAES,YAAY,CAAC,IAAY;QACjC,OAAO,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC;IAC9B,CAAC;IAES,aAAa,CAAC,MAAc,EAAE,GAAW,EAAE,IAAY;QAC/D,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1E,CAAC;IAES,QAAQ,CAAC,IAAY,EAAE,UAAkB;QACjD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACpC,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1C,CAAC;IAES,sBAAsB,CAAC,IAAI,GAAG,EAAE;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;aACpB,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACtD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC;IAES,8BAA8B,CAAC,IAAY;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;aACpB,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CACjB,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1D;aACA,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC;IAEM,6BAA6B,CAAC,KAAa;QAChD,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAAE,OAAO,CAAC,CAAC;SACtC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,yBAAyB,CAAC,KAAa;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAAE,OAAO,CAAC,CAAC;SACtC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,OAAO,CAAC,MAAM,GAAG,EAAE,EAAE,KAAa,EAAE,KAAa,EAAE,GAAW;QACnE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;QACnC,IAAI,MAAM,GAAG,KAAK,CAAC;QAEnB,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE;YACvE,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBACzB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;oBAC1B,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;oBACf,KAAK,CAAC,KAAK,EAAE,CAAC;iBACf;gBACD,SAAS;aACV;YAED,IACE,KAAK,CAAC,CAAC,CAAC;gBACR,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBAC9C,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAC5B;gBACA,MAAM;aACP;YAED,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC;YACvB,IAAI,KAAK,CAAC,MAAM,EAAE;gBAChB,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;gBACf,IAAI,GAAG,KAAK,CAAC,KAAK,EAAY,CAAC;aAChC;YACD,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;SAC9C;QAED,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;IACxC,CAAC;IAEM,KAAK,CAAC,MAAM,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;YACnD,OAAO,GAAG,IAAI,GACZ,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC9D,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,EACN,EAAE,CAAC;QACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAEM,aAAa,CAAC,KAAK,GAAG,EAAE;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAExE,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE;YAC9C,OAAO,KAAK,CAAC;SACd;QACD,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC/B,OAAO,CACL,IAAI,KAAK,SAAS;gBAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAClD,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CACzB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,KAAK,CAAC,KAAK,GAAG,EAAE;QACrB,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3E,IAAI,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YAClC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,MAAM,CAAC;SACf;QAED,MAAM,MAAM,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACpD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACxD,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACxB,CAAC,CAAC,IAAI,CAAC,MAAM;gBACb,CAAC,CAAC,IAAI,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,CAAC,MAAM,GAAG,mBAAmB,CAAC,MAAM,EAAE;YAC9C,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;SAC3C;QAED,IAAI,GAAG,GAAG,CAAC,CAAC;QACZ,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE;YACzB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;SACvE;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;CACF","sourcesContent":["interface MaskOptions {\n format: string;\n promptCharacter: string;\n}\n\nconst FLAGS = new Set('aACL09#&?');\nconst REGEX = new Map([\n ['C', /(?!^$)/u], // Non-empty\n ['&', /[^\\p{Separator}]/u], // Whitespace\n ['a', /[\\p{Letter}\\d\\p{Separator}]/u], // Alphanumeric & whitespace\n ['A', /[\\p{Letter}\\d]/u], // Alphanumeric\n ['?', /[\\p{Letter}\\p{Separator}]/u], // Alpha & whitespace\n ['L', /\\p{Letter}/u], // Alpha\n ['0', /\\d/], // Numeric\n ['9', /[\\d\\p{Separator}]/u], // Numeric & whitespace\n ['#', /[\\d\\-+]/], // Numeric and sign\n]);\nconst REQUIRED = new Set('0#LA&');\n\nconst replaceIMENumbers = (string: string) => {\n return string.replace(\n /[０１２３４５６７８９]/g,\n (num) =>\n ({\n '１': '1',\n '２': '2',\n '３': '3',\n '４': '4',\n '５': '5',\n '６': '6',\n '７': '7',\n '８': '8',\n '９': '9',\n '０': '0',\n })[num] as string\n );\n};\n\nexport class MaskParser {\n protected options!: MaskOptions;\n\n constructor(\n options: MaskOptions = { format: 'CCCCCCCCCC', promptCharacter: '_' }\n ) {\n this.options = options;\n }\n\n protected literals = new Map<number, string>();\n protected _escapedMask!: string;\n\n public get literalPositions() {\n this.getMaskLiterals();\n return Array.from(this.literals.keys());\n }\n\n public get escapedMask() {\n this.getMaskLiterals();\n return this._escapedMask;\n }\n\n public get mask() {\n return this.options.format;\n }\n\n public set mask(value: string) {\n this.options.format = value \|\| this.options.format;\n this.getMaskLiterals();\n }\n\n public get prompt() {\n return this.options.promptCharacter;\n }\n\n public set prompt(value: string) {\n this.options.promptCharacter = value\n ? value.substring(0, 1)\n : this.options.promptCharacter;\n }\n\n protected getMaskLiterals() {\n this.literals.clear();\n this._escapedMask = this.mask;\n\n for (let i = 0, j = 0; i < this.mask.length; i++, j++) {\n const [current, next] = [this.mask.charAt(i), this.mask.charAt(i + 1)];\n\n if (current === '\\\\' && FLAGS.has(next)) {\n this._escapedMask = this.replaceCharAt(this._escapedMask, j, '');\n this.literals.set(j, next);\n i++;\n } else {\n if (!FLAGS.has(current)) {\n this.literals.set(j, current);\n }\n }\n }\n }\n\n protected isPromptChar(char: string) {\n return char === this.prompt;\n }\n\n protected replaceCharAt(string: string, pos: number, char: string) {\n return `${string.substring(0, pos)}${char}${string.substring(pos + 1)}`;\n }\n\n protected validate(char: string, maskedChar: string) {\n const regex = REGEX.get(maskedChar);\n return regex ? regex.test(char) : false;\n }\n\n protected getNonLiteralPositions(mask = '') {\n const positions = this.literalPositions;\n return Array.from(mask)\n .map((_, pos) => (!positions.includes(pos) ? pos : -1))\n .filter((pos) => pos > -1);\n }\n\n protected getRequiredNonLiteralPositions(mask: string) {\n const positions = this.literalPositions;\n return Array.from(mask)\n .map((char, pos) =>\n REQUIRED.has(char) && !positions.includes(pos) ? pos : -1\n )\n .filter((pos) => pos > -1);\n }\n\n public getPreviousNonLiteralPosition(start: number) {\n const positions = this.literalPositions;\n for (let i = start; i > 0; i--) {\n if (!positions.includes(i)) return i;\n }\n return start;\n }\n\n public getNextNonLiteralPosition(start: number) {\n const positions = this.literalPositions;\n for (let i = start; i < this._escapedMask.length; i++) {\n if (!positions.includes(i)) return i;\n }\n return start;\n }\n\n public replace(masked = '', value: string, start: number, end: number) {\n const chars = Array.from(replaceIMENumbers(value));\n const positions = this.literalPositions;\n end = Math.min(end, masked.length);\n let cursor = start;\n\n for (let i = start; i < end \|\| (chars.length && i < masked.length); i++) {\n if (positions.includes(i)) {\n if (chars[0] === masked[i]) {\n cursor = i + 1;\n chars.shift();\n }\n continue;\n }\n\n if (\n chars[0] &&\n !this.validate(chars[0], this._escapedMask[i]) &&\n !this.isPromptChar(chars[0])\n ) {\n break;\n }\n\n let char = this.prompt;\n if (chars.length) {\n cursor = i + 1;\n char = chars.shift() as string;\n }\n masked = this.replaceCharAt(masked, i, char);\n }\n\n return { value: masked, end: cursor };\n }\n\n public parse(masked = '') {\n return Array.from(masked).reduce((prev, char, pos) => {\n return `${prev}${\n !this.literalPositions.includes(pos) && !this.isPromptChar(char)\n ? char\n : ''\n }`;\n }, '');\n }\n\n public isValidString(input = '') {\n const required = this.getRequiredNonLiteralPositions(this._escapedMask);\n\n if (required.length > this.parse(input).length) {\n return false;\n }\n return required.every((pos) => {\n const char = input.charAt(pos);\n return (\n char !== undefined &&\n this.validate(char, this._escapedMask.charAt(pos)) &&\n !this.isPromptChar(char)\n );\n });\n }\n\n public apply(input = '') {\n const nonLiteralPositions = this.getNonLiteralPositions(this._escapedMask);\n let output = new Array(this._escapedMask.length).fill(this.prompt).join('');\n\n this.literals.forEach((char, pos) => {\n output = this.replaceCharAt(output, pos, char);\n });\n\n if (!input) {\n return output;\n }\n\n const values = nonLiteralPositions.map((pos, index) => {\n const char = input.charAt(index);\n return !this.validate(char, this._escapedMask.charAt(pos)) &&\n !this.isPromptChar(char)\n ? this.prompt\n : char;\n });\n\n if (values.length > nonLiteralPositions.length) {\n values.splice(nonLiteralPositions.length);\n }\n\n let pos = 0;\n for (const each of values) {\n output = this.replaceCharAt(output, nonLiteralPositions[pos++], each);\n }\n\n return output;\n }\n}\n"]}
1	+ {"version":3,"file":"mask-parser.js","sourceRoot":"","sources":["../../../src/components/mask-input/mask-parser.ts"],"names":[],"mappings":"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","sourcesContent":["interface MaskOptions {\n format: string;\n promptCharacter: string;\n}\n\nconst FLAGS = new Set('aACL09#&?');\nconst REGEX = new Map([\n ['C', /(?!^$)/u], // Non-empty\n ['&', /[^\\p{Separator}]/u], // Whitespace\n ['a', /[\\p{Letter}\\d\\p{Separator}]/u], // Alphanumeric & whitespace\n ['A', /[\\p{Letter}\\d]/u], // Alphanumeric\n ['?', /[\\p{Letter}\\p{Separator}]/u], // Alpha & whitespace\n ['L', /\\p{Letter}/u], // Alpha\n ['0', /\\d/], // Numeric\n ['9', /[\\d\\p{Separator}]/u], // Numeric & whitespace\n ['#', /[\\d\\-+]/], // Numeric and sign\n]);\nconst REQUIRED = new Set('0#LA&');\n\nconst replaceIMENumbers = (string: string) => {\n return string.replace(\n /[０１２３４５６７８９]/g,\n (num) =>\n ({\n '１': '1',\n '２': '2',\n '３': '3',\n '４': '4',\n '５': '5',\n '６': '6',\n '７': '7',\n '８': '8',\n '９': '9',\n '０': '0',\n })[num] as string\n );\n};\n\nexport class MaskParser {\n protected options!: MaskOptions;\n\n constructor(\n options: MaskOptions = { format: 'CCCCCCCCCC', promptCharacter: '_' }\n ) {\n this.options = options;\n }\n\n protected literals = new Map<number, string>();\n protected _escapedMask = '';\n\n public get literalPositions() {\n this.getMaskLiterals();\n return Array.from(this.literals.keys());\n }\n\n public get escapedMask() {\n this.getMaskLiterals();\n return this._escapedMask;\n }\n\n public get mask() {\n return this.options.format;\n }\n\n public set mask(value: string) {\n this.options.format = value \|\| this.options.format;\n this.getMaskLiterals();\n }\n\n public get prompt() {\n return this.options.promptCharacter;\n }\n\n public set prompt(value: string) {\n this.options.promptCharacter = value\n ? value.substring(0, 1)\n : this.options.promptCharacter;\n }\n\n protected getMaskLiterals() {\n this.literals.clear();\n this._escapedMask = this.mask;\n\n for (let i = 0, j = 0; i < this.mask.length; i++, j++) {\n const [current, next] = [this.mask.charAt(i), this.mask.charAt(i + 1)];\n\n if (current === '\\\\' && FLAGS.has(next)) {\n this._escapedMask = this.replaceCharAt(this._escapedMask, j, '');\n this.literals.set(j, next);\n i++;\n } else {\n if (!FLAGS.has(current)) {\n this.literals.set(j, current);\n }\n }\n }\n }\n\n protected isPromptChar(char: string) {\n return char === this.prompt;\n }\n\n protected replaceCharAt(string: string, pos: number, char: string) {\n return `${string.substring(0, pos)}${char}${string.substring(pos + 1)}`;\n }\n\n protected validate(char: string, maskedChar: string) {\n const regex = REGEX.get(maskedChar);\n return regex ? regex.test(char) : false;\n }\n\n protected getNonLiteralPositions(mask = '') {\n const positions = this.literalPositions;\n return Array.from(mask)\n .map((_, pos) => (!positions.includes(pos) ? pos : -1))\n .filter((pos) => pos > -1);\n }\n\n protected getRequiredNonLiteralPositions(mask: string) {\n const positions = this.literalPositions;\n return Array.from(mask)\n .map((char, pos) =>\n REQUIRED.has(char) && !positions.includes(pos) ? pos : -1\n )\n .filter((pos) => pos > -1);\n }\n\n public getPreviousNonLiteralPosition(start: number) {\n const positions = this.literalPositions;\n for (let i = start; i > 0; i--) {\n if (!positions.includes(i)) return i;\n }\n return start;\n }\n\n public getNextNonLiteralPosition(start: number) {\n const positions = this.literalPositions;\n for (let i = start; i < this._escapedMask.length; i++) {\n if (!positions.includes(i)) return i;\n }\n return start;\n }\n\n public replace(masked = '', value: string, start: number, end: number) {\n const chars = Array.from(replaceIMENumbers(value));\n const positions = this.literalPositions;\n end = Math.min(end, masked.length);\n let cursor = start;\n\n for (let i = start; i < end \|\| (chars.length && i < masked.length); i++) {\n if (positions.includes(i)) {\n if (chars[0] === masked[i]) {\n cursor = i + 1;\n chars.shift();\n }\n continue;\n }\n\n if (\n chars[0] &&\n !this.validate(chars[0], this._escapedMask[i]) &&\n !this.isPromptChar(chars[0])\n ) {\n break;\n }\n\n let char = this.prompt;\n if (chars.length) {\n cursor = i + 1;\n char = chars.shift() as string;\n }\n masked = this.replaceCharAt(masked, i, char);\n }\n\n return { value: masked, end: cursor };\n }\n\n public parse(masked = '') {\n return Array.from(masked).reduce((prev, char, pos) => {\n return `${prev}${\n !this.literalPositions.includes(pos) && !this.isPromptChar(char)\n ? char\n : ''\n }`;\n }, '');\n }\n\n public isValidString(input = '') {\n const required = this.getRequiredNonLiteralPositions(this._escapedMask);\n\n if (required.length > this.parse(input).length) {\n return false;\n }\n return required.every((pos) => {\n const char = input.charAt(pos);\n return (\n char !== undefined &&\n this.validate(char, this._escapedMask.charAt(pos)) &&\n !this.isPromptChar(char)\n );\n });\n }\n\n public apply(input = '') {\n const nonLiteralPositions = this.getNonLiteralPositions(this._escapedMask);\n let output = new Array(this._escapedMask.length).fill(this.prompt).join('');\n\n this.literals.forEach((char, pos) => {\n output = this.replaceCharAt(output, pos, char);\n });\n\n if (!input) {\n return output;\n }\n\n const values = nonLiteralPositions.map((pos, index) => {\n const char = input.charAt(index);\n return !this.validate(char, this._escapedMask.charAt(pos)) &&\n !this.isPromptChar(char)\n ? this.prompt\n : char;\n });\n\n if (values.length > nonLiteralPositions.length) {\n values.splice(nonLiteralPositions.length);\n }\n\n let pos = 0;\n for (const each of values) {\n output = this.replaceCharAt(output, nonLiteralPositions[pos++], each);\n }\n\n return output;\n }\n}\n"]}

package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));
   --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --border-color: var(--ig-nav-drawer-border-color, transparent);
   --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));
   --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));
@@ -12,7 +12,7 @@ export const styles = css `:host {
   --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --border-radius: var(--ig-nav-drawer-border-radius, 0rem, 0rem, 2.25rem);
+  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 :host [part~=base] {

package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --border-color: var(--ig-nav-drawer-border-color, ~~hsla(var(--ig-gray-900~~)~~, 0.14))~~;\n --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --border-radius: var(--ig-nav-drawer-border-radius, 0rem, ~~0rem~~, 2.25rem);\n --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n:host [part~=base] {\n border-radius: var(--item-border-radius);\n gap: 1.5rem;\n color: var(--text-color, hsla(var(--ig-gray-300), 0.8));\n padding: 0.25rem;\n margin: 0.9375rem 0.5rem;\n}\n:host [part~=base]:hover, :host [part~=base]:focus-within {\n background: transparent;\n color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host [part=content] {\n -webkit-padding-start: 0.5rem;\n padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n background: var(--active-background, hsla(var(--ig-gray-600), 0.8));\n color: hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
1	+ {"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --border-color: var(--ig-nav-drawer-border-color, transparent);\n --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n:host [part~=base] {\n border-radius: var(--item-border-radius);\n gap: 1.5rem;\n color: var(--text-color, hsla(var(--ig-gray-300), 0.8));\n padding: 0.25rem;\n margin: 0.9375rem 0.5rem;\n}\n:host [part~=base]:hover, :host [part~=base]:focus-within {\n background: transparent;\n color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host [part=content] {\n -webkit-padding-start: 0.5rem;\n padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n background: var(--active-background, hsla(var(--ig-gray-600), 0.8));\n color: hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));
   --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --border-color: var(--ig-nav-drawer-border-color, transparent);
   --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));
   --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));
@@ -13,7 +13,7 @@ export const styles = css `:host {
   --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
-  --item-border-radius: var(--ig-nav-drawer-item-border-radius, 1.5rem, 0rem, 1.5rem);
+  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 :host [part=base] {
   border-radius: var(--border-radius);

package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --border-color: var(--ig-nav-drawer-border-color, ~~hsla(var(--ig-gray-900~~)~~, 0.14))~~;\n --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n --item-border-radius: var(--ig-nav-drawer-item-border-radius, 1.5rem, ~~0rem,~~ 1.5rem);\n}\n:host [part=base] {\n border-radius: var(--border-radius);\n background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n border: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n}`;\n"]}
1	+ {"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --border-color: var(--ig-nav-drawer-border-color, transparent);\n --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n}\n:host [part=base] {\n border-radius: var(--border-radius);\n background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n border: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js CHANGED Viewed

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   display: block;
   padding: 1.25rem 1rem;
   white-space: nowrap;

package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nav-drawer-header-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CvB~~,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: 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:host([hidden]),\n[hidden] {\n display: ~~none !important;\n}\n:host {\n display:~~ block;\n padding: 1.25rem 1rem;\n white-space: nowrap;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}
1	+ {"version":3,"file":"nav-drawer-header-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EAcvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n display: block;\n padding: 1.25rem 1rem;\n white-space: nowrap;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js CHANGED Viewed

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
   --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
@@ -44,7 +12,7 @@ export const styles = css `:host {
   --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --border-radius: var(--ig-nav-drawer-border-radius, 0rem, 0rem, 2.25rem);
+  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }
@@ -74,7 +42,6 @@ export const styles = css `:host {
   outline: transparent;
   white-space: nowrap;
   text-decoration: none;
-  width: calc(100% - 1rem);
   border: none;
   -webkit-box-pack: start;
       -ms-flex-pack: start;