igniteui-webcomponents 2.2.0 → 3.2.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 +40 -5
- package/README.md +6 -1
- package/components/avatar/avatar.js +2 -2
- package/components/avatar/avatar.js.map +1 -1
- package/components/badge/badge.js +3 -3
- package/components/badge/badge.js.map +1 -1
- package/components/button/button-base.d.ts +5 -0
- package/components/button/button-base.js +5 -1
- package/components/button/button-base.js.map +1 -1
- package/components/button/button.js +6 -6
- package/components/button/button.js.map +1 -1
- package/components/button/icon-button.d.ts +1 -1
- package/components/button/icon-button.js +19 -16
- package/components/button/icon-button.js.map +1 -1
- package/components/button/themes/button/light/button.base.css.js +1 -1
- package/components/button/themes/button/light/button.base.css.js.map +1 -1
- package/components/button/themes/button/light/button.indigo.css.js +1 -1
- package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/light/button.material.css.js +1 -1
- package/components/button/themes/button/light/button.material.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.base.css.js +1 -1
- package/components/button/themes/icon-button/light/icon-button.base.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js +1 -1
- package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.fluent.css.js +1 -1
- package/components/button/themes/icon-button/light/icon-button.fluent.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.indigo.css.js +1 -1
- package/components/button/themes/icon-button/light/icon-button.indigo.css.js.map +1 -1
- package/components/button/themes/icon-button/light/icon-button.material.css.js +1 -1
- package/components/button/themes/icon-button/light/icon-button.material.css.js.map +1 -1
- package/components/calendar/calendar.d.ts +8 -8
- package/components/calendar/calendar.js +16 -16
- package/components/calendar/calendar.js.map +1 -1
- package/components/calendar/common/calendar-base.d.ts +1 -1
- package/components/calendar/common/calendar-base.js +21 -15
- package/components/calendar/common/calendar-base.js.map +1 -1
- package/components/calendar/common/utils.d.ts +1 -1
- package/components/calendar/common/utils.js.map +1 -1
- package/components/calendar/days-view/days-view.d.ts +5 -5
- package/components/calendar/days-view/days-view.js +13 -11
- package/components/calendar/days-view/days-view.js.map +1 -1
- package/components/calendar/months-view/months-view.d.ts +3 -3
- package/components/calendar/months-view/months-view.js +12 -10
- package/components/calendar/months-view/months-view.js.map +1 -1
- package/components/calendar/years-view/years-view.d.ts +3 -3
- package/components/calendar/years-view/years-view.js +11 -9
- package/components/calendar/years-view/years-view.js.map +1 -1
- package/components/card/card.actions.js +3 -3
- package/components/card/card.actions.js.map +1 -1
- package/components/card/card.content.js +3 -3
- package/components/card/card.content.js.map +1 -1
- package/components/card/card.header.js +4 -4
- package/components/card/card.header.js.map +1 -1
- package/components/card/card.js +4 -4
- package/components/card/card.js.map +1 -1
- package/components/card/card.media.js +1 -1
- package/components/card/card.media.js.map +1 -1
- package/components/checkbox/checkbox-base.js +2 -1
- package/components/checkbox/checkbox-base.js.map +1 -1
- package/components/checkbox/checkbox.js +6 -7
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.js +6 -7
- package/components/checkbox/switch.js.map +1 -1
- package/components/checkbox/themes/light/switch.base.css.js +1 -1
- package/components/checkbox/themes/light/switch.base.css.js.map +1 -1
- package/components/chip/chip.d.ts +1 -0
- package/components/chip/chip.js +20 -9
- package/components/chip/chip.js.map +1 -1
- package/components/chip/themes/chip.base.css.js +1 -1
- package/components/chip/themes/chip.base.css.js.map +1 -1
- package/components/chip/themes/chip.bootstrap.css.js +1 -1
- package/components/chip/themes/chip.bootstrap.css.js.map +1 -1
- package/components/chip/themes/chip.fluent.css.js +1 -1
- package/components/chip/themes/chip.fluent.css.js.map +1 -1
- package/components/chip/themes/chip.indigo.css.js +1 -1
- package/components/chip/themes/chip.indigo.css.js.map +1 -1
- package/components/chip/themes/chip.material.css.js +1 -1
- package/components/chip/themes/chip.material.css.js.map +1 -1
- package/components/common/definitions/defineAllComponents.js +53 -45
- package/components/common/definitions/defineAllComponents.js.map +1 -1
- package/components/dropdown/dropdown-group.d.ts +4 -4
- package/components/dropdown/dropdown-group.js +11 -11
- package/components/dropdown/dropdown-group.js.map +1 -1
- package/components/dropdown/dropdown-header.d.ts +3 -3
- package/components/dropdown/dropdown-header.js +9 -9
- package/components/dropdown/dropdown-header.js.map +1 -1
- package/components/dropdown/dropdown-item.d.ts +2 -2
- package/components/dropdown/dropdown-item.js +18 -18
- package/components/dropdown/dropdown-item.js.map +1 -1
- package/components/dropdown/dropdown.d.ts +16 -16
- package/components/dropdown/dropdown.js +51 -56
- package/components/dropdown/dropdown.js.map +1 -1
- package/components/expansion-panel/expansion-panel.d.ts +72 -0
- package/components/expansion-panel/expansion-panel.js +167 -0
- package/components/expansion-panel/expansion-panel.js.map +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.base.css.d.ts +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.base.css.js +3 -0
- package/components/expansion-panel/themes/light/expansion-panel.base.css.js.map +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.d.ts +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.js +3 -0
- package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.js.map +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.fluent.css.d.ts +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.fluent.css.js +3 -0
- package/components/expansion-panel/themes/light/expansion-panel.fluent.css.js.map +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.indigo.css.d.ts +1 -0
- package/components/expansion-panel/themes/light/expansion-panel.indigo.css.js +3 -0
- package/components/expansion-panel/themes/light/expansion-panel.indigo.css.js.map +1 -0
- package/components/form/form.d.ts +2 -2
- package/components/form/form.js +13 -4
- package/components/form/form.js.map +1 -1
- package/components/icon/icon.d.ts +1 -1
- package/components/icon/icon.js +3 -2
- package/components/icon/icon.js.map +1 -1
- package/components/icon/icon.registry.js +5 -0
- package/components/icon/icon.registry.js.map +1 -1
- package/components/input/input-base.d.ts +2 -1
- package/components/input/input-base.js +11 -6
- package/components/input/input-base.js.map +1 -1
- package/components/input/input.d.ts +1 -1
- package/components/input/input.js +6 -5
- package/components/input/input.js.map +1 -1
- package/components/input/themes/light/input.base.css.js +1 -1
- package/components/input/themes/light/input.base.css.js.map +1 -1
- package/components/input/themes/light/input.material.css.js +1 -1
- package/components/input/themes/light/input.material.css.js.map +1 -1
- package/components/list/list-header.js +3 -3
- package/components/list/list-header.js.map +1 -1
- package/components/list/list-item.js +5 -5
- package/components/list/list-item.js.map +1 -1
- package/components/list/list.d.ts +1 -1
- package/components/list/list.js +4 -4
- package/components/list/list.js.map +1 -1
- package/components/list/themes/light/list.base.css.js +1 -1
- package/components/list/themes/light/list.base.css.js.map +1 -1
- package/components/mask-input/mask-input.d.ts +102 -0
- package/components/mask-input/mask-input.js +260 -0
- package/components/mask-input/mask-input.js.map +1 -0
- package/components/mask-input/mask-parser.d.ts +30 -0
- package/components/mask-input/mask-parser.js +167 -0
- package/components/mask-input/mask-parser.js.map +1 -0
- package/components/nav-drawer/nav-drawer-header-item.js +3 -3
- package/components/nav-drawer/nav-drawer-header-item.js.map +1 -1
- package/components/nav-drawer/nav-drawer-item.d.ts +1 -0
- package/components/nav-drawer/nav-drawer-item.js +9 -6
- package/components/nav-drawer/nav-drawer-item.js.map +1 -1
- package/components/nav-drawer/nav-drawer.d.ts +1 -1
- package/components/nav-drawer/nav-drawer.js +14 -11
- package/components/nav-drawer/nav-drawer.js.map +1 -1
- package/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.css.js +1 -1
- package/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.css.js.map +1 -1
- package/components/nav-drawer/styles/nav-drawer-item.base.css.js +1 -1
- package/components/nav-drawer/styles/nav-drawer-item.base.css.js.map +1 -1
- package/components/nav-drawer/styles/nav-drawer.base.css.js +1 -1
- package/components/nav-drawer/styles/nav-drawer.base.css.js.map +1 -1
- package/components/navbar/navbar.js +6 -5
- package/components/navbar/navbar.js.map +1 -1
- package/components/navbar/themes/light/navbar.base.css.js +1 -1
- package/components/navbar/themes/light/navbar.base.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.bootstrap.css.js +1 -1
- package/components/navbar/themes/light/navbar.bootstrap.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.fluent.css.d.ts +1 -0
- package/components/navbar/themes/light/navbar.fluent.css.js +3 -0
- package/components/navbar/themes/light/navbar.fluent.css.js.map +1 -0
- package/components/progress/base.js +2 -2
- package/components/progress/base.js.map +1 -1
- package/components/progress/circular-progress.d.ts +2 -2
- package/components/progress/circular-progress.js +6 -6
- package/components/progress/circular-progress.js.map +1 -1
- package/components/progress/linear-progress.d.ts +1 -1
- package/components/progress/linear-progress.js +7 -7
- package/components/progress/linear-progress.js.map +1 -1
- package/components/radio/radio.js +9 -9
- package/components/radio/radio.js.map +1 -1
- package/components/radio-group/radio-group.js +1 -1
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/rating/rating.base.css.js +1 -1
- package/components/rating/rating.base.css.js.map +1 -1
- package/components/rating/rating.d.ts +2 -2
- package/components/rating/rating.fluent.css.js +1 -1
- package/components/rating/rating.fluent.css.js.map +1 -1
- package/components/rating/rating.js +10 -10
- package/components/rating/rating.js.map +1 -1
- package/components/ripple/ripple.js +1 -1
- package/components/ripple/ripple.js.map +1 -1
- package/components/slider/range-slider.d.ts +3 -3
- package/components/slider/range-slider.js +2 -2
- package/components/slider/range-slider.js.map +1 -1
- package/components/slider/slider-base.js +8 -7
- package/components/slider/slider-base.js.map +1 -1
- package/components/slider/slider.d.ts +3 -3
- package/components/slider/slider.js +2 -2
- package/components/slider/slider.js.map +1 -1
- package/components/snackbar/snackbar.d.ts +2 -0
- package/components/snackbar/snackbar.js +8 -5
- package/components/snackbar/snackbar.js.map +1 -1
- package/components/toast/toast.js +5 -5
- package/components/toast/toast.js.map +1 -1
- package/components/toggle/toggle.controller.d.ts +3 -3
- package/components/toggle/toggle.controller.js +1 -1
- package/components/toggle/toggle.controller.js.map +1 -1
- package/components/toggle/toggle.directive.d.ts +1 -1
- package/components/toggle/toggle.directive.js +5 -4
- package/components/toggle/toggle.directive.js.map +1 -1
- package/components/toggle/{utilities.d.ts → types.d.ts} +0 -0
- package/components/toggle/types.js +2 -0
- package/components/toggle/types.js.map +1 -0
- package/components/tree/themes/dark/tree-item.bootstrap.css.d.ts +1 -0
- package/components/tree/themes/dark/tree-item.bootstrap.css.js +3 -0
- package/components/tree/themes/dark/tree-item.bootstrap.css.js.map +1 -0
- package/components/tree/themes/dark/tree-item.fluent.css.d.ts +1 -0
- package/components/tree/themes/dark/tree-item.fluent.css.js +3 -0
- package/components/tree/themes/dark/tree-item.fluent.css.js.map +1 -0
- package/components/tree/themes/dark/tree-item.indigo.css.d.ts +1 -0
- package/components/tree/themes/dark/tree-item.indigo.css.js +3 -0
- package/components/tree/themes/dark/tree-item.indigo.css.js.map +1 -0
- package/components/tree/themes/light/tree-item.base.css.d.ts +1 -0
- package/components/tree/themes/light/tree-item.base.css.js +3 -0
- package/components/tree/themes/light/tree-item.base.css.js.map +1 -0
- package/components/tree/themes/light/tree-item.bootstrap.css.d.ts +1 -0
- package/components/tree/themes/light/tree-item.bootstrap.css.js +3 -0
- package/components/tree/themes/light/tree-item.bootstrap.css.js.map +1 -0
- package/components/tree/themes/light/tree-item.fluent.css.d.ts +1 -0
- package/components/tree/themes/light/tree-item.fluent.css.js +3 -0
- package/components/tree/themes/light/tree-item.fluent.css.js.map +1 -0
- package/components/tree/themes/light/tree-item.indigo.css.d.ts +1 -0
- package/components/tree/themes/light/tree-item.indigo.css.js +3 -0
- package/components/tree/themes/light/tree-item.indigo.css.js.map +1 -0
- package/components/tree/themes/light/tree.base.css.d.ts +1 -0
- package/components/tree/themes/light/tree.base.css.js +3 -0
- package/components/tree/themes/light/tree.base.css.js.map +1 -0
- package/components/tree/tree-item.d.ts +116 -0
- package/components/tree/tree-item.js +447 -0
- package/components/tree/tree-item.js.map +1 -0
- package/components/tree/tree.common.d.ts +17 -0
- package/components/tree/tree.common.js +2 -0
- package/components/tree/tree.common.js.map +1 -0
- package/components/tree/tree.d.ts +71 -0
- package/components/tree/tree.js +139 -0
- package/components/tree/tree.js.map +1 -0
- package/components/tree/tree.navigation.d.ts +41 -0
- package/components/tree/tree.navigation.js +260 -0
- package/components/tree/tree.navigation.js.map +1 -0
- package/components/tree/tree.selection.d.ts +55 -0
- package/components/tree/tree.selection.js +265 -0
- package/components/tree/tree.selection.js.map +1 -0
- package/custom-elements.json +635 -5
- package/index.d.ts +57 -52
- package/index.js +55 -51
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/themes/dark/bootstrap.css +1 -1
- package/themes/dark/fluent.css +1 -1
- package/themes/dark/indigo.css +1 -1
- package/themes/light/bootstrap.css +1 -1
- package/themes/light/fluent.css +1 -1
- package/theming/config.d.ts +1 -1
- package/theming/config.js +2 -2
- package/theming/config.js.map +1 -1
- package/theming/index.d.ts +3 -3
- package/theming/index.js +3 -3
- package/theming/index.js.map +1 -1
- package/theming/{theming-controlller.d.ts → theming-controller.d.ts} +1 -1
- package/theming/{theming-controlller.js → theming-controller.js} +3 -3
- package/theming/theming-controller.js.map +1 -0
- package/theming/theming-decorator.js +1 -1
- package/theming/theming-decorator.js.map +1 -1
- package/theming/theming-event.d.ts +1 -1
- package/theming/theming-event.js.map +1 -1
- package/vscode-html-custom-data.json +317 -46
- package/components/toggle/utilities.js +0 -2
- package/components/toggle/utilities.js.map +0 -1
- package/theming/theming-controlller.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,m3YAAm3Y,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([size=large]) input:not(:-moz-placeholder-shown)+[part=notch] [part=label]{transform:translateY(-26px);font-size:.75rem}:host([size=large]) input:not(:-ms-input-placeholder)+[part=notch] [part=label]{-ms-transform:translateY(-26px);transform:translateY(-26px);font-size:.75rem}:host([placeholder][size=large]) [part=notch] [part=label],:host([size=large]:focus-within) [part=label],:host([size=large]) input:not(:placeholder-shown)+[part=notch] [part=label]{-webkit-transform:translateY(-26px);-ms-transform:translateY(-26px);transform:translateY(-26px);font-size:.75rem}:host([size=medium]) input:not(:-moz-placeholder-shown)+[part=notch] [part=label]{transform:translateY(-22px);font-size:.75rem}:host([size=medium]) input:not(:-ms-input-placeholder)+[part=notch] [part=label]{-ms-transform:translateY(-22px);transform:translateY(-22px);font-size:.75rem}:host([placeholder][size=medium]) [part=notch] [part=label],:host([size=medium]:focus-within) [part=label],:host([size=medium]) input:not(:placeholder-shown)+[part=notch] [part=label]{-webkit-transform:translateY(-22px);-ms-transform:translateY(-22px);transform:translateY(-22px);font-size:.75rem}:host([size=small]) input:not(:-moz-placeholder-shown)+[part=notch] [part=label]{transform:translateY(-18px);font-size:.75rem}:host([size=small]) input:not(:-ms-input-placeholder)+[part=notch] [part=label]{-ms-transform:translateY(-18px);transform:translateY(-18px);font-size:.75rem}:host([placeholder][size=small]) [part=notch] [part=label],:host([size=small]:focus-within) [part=label],:host([size=small]) input:not(:placeholder-shown)+[part=notch] [part=label]{-webkit-transform:translateY(-18px);-ms-transform:translateY(-18px);transform:translateY(-18px);font-size:.75rem}:host([disabled]) input:not(:-moz-placeholder-shown)+[part=notch], :host([invalid]) input:not(:-moz-placeholder-shown)+[part=notch], :host([invalid]:focus-within) input:not(:-moz-placeholder-shown)+[part=notch], :host input:not(:-moz-placeholder-shown)+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host([disabled]) input:not(:-ms-input-placeholder)+[part=notch], :host([invalid]) input:not(:-ms-input-placeholder)+[part=notch], :host([invalid]:focus-within) input:not(:-ms-input-placeholder)+[part=notch], :host input:not(:-ms-input-placeholder)+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host([disabled]) input:not(:placeholder-shown)+[part=notch],:host([invalid]) input:not(:placeholder-shown)+[part=notch],:host([invalid]:focus-within) input:not(:placeholder-shown)+[part=notch],:host([placeholder][size=small]) [part=notch],:host([placeholder][size=medium]) [part=notch],:host([placeholder][size=large]) [part=notch],:host input:not(:placeholder-shown)+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}[part~=input]{background:rgba(0,0,0,0);padding:0 .25rem;font-size:1rem;grid-area:1/2/span 1/span 2}[part=label]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);line-height:1;will-change:font-size,color,transform}:host(:focus-within) [part=start]{border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-inline-start-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host(:focus-within) [part=notch]{border-width:.125rem;border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-top:.0625rem solid rgba(0,0,0,0)}:host(:focus-within) [part=filler]{border-width:.125rem;border-color:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:focus-within) [part=end]{border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-inline-end-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host(:focus-within) [part=prefix]{-webkit-padding-start:.25rem;padding-inline-start:.25rem}:host(:focus-within) [part=suffix]{-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host(:focus-within) [part=label]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part^=container]{grid-template-columns:auto auto 1fr auto}[part=start]{width:auto;min-width:.75rem;-ms-flex-negative:0;flex-shrink:0;grid-area:1/1;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-inline-start-width:.0625rem;border-inline-end-width:0;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-start-radius:.25rem;border-end-start-radius:.25rem}[part=start]>[part=prefix]{-webkit-padding-start:.3125rem;padding-inline-start:.3125rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem}[part=notch]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;height:100%;grid-area:1/2;padding:0 .25rem;border-width:.0625rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-left:none;border-right:none;overflow:visible}[part=notch]:empty{display:none}[part=filler]{grid-area:1/3;border-width:.0625rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-left:none;border-right:none}[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;grid-area:1/4;min-width:.75rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-inline-start-width:0;border-inline-end-width:.0625rem;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-end-radius:.25rem;border-end-end-radius:.25rem}[part=end]>[part=suffix]{-webkit-padding-start:.25rem;padding-inline-start:.25rem;-webkit-padding-end:.3125rem;padding-inline-end:.3125rem}[part=helper-text]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);padding:0 .5rem;margin-top:.25rem;color:hsla(var(--igc-gray-600), var(--igc-gray-a))}:host([invalid]) [part=start],:host([invalid]) [part=notch],:host([invalid]) [part=filler],:host([invalid]) [part=end],:host([invalid]:focus-within) [part=start],:host([invalid]:focus-within) [part=notch],:host([invalid]:focus-within) [part=filler],:host([invalid]:focus-within) [part=end]{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]) [part=label],:host([invalid]) [part=helper-text],:host([invalid]:focus-within) [part=label],:host([invalid]:focus-within) [part=helper-text]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]:focus-within) [part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host([disabled]){pointer-events:none}:host([disabled]) [part~=input],:host([disabled]) [part=label],:host([disabled]) [part=prefix],:host([disabled]) [part=suffix],:host([disabled]) [part=helper-text]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part=start],:host([disabled]) [part=filler],:host([disabled]) [part=notch],:host([disabled]) [part=end]{color:hsla(var(--igc-gray-400), var(--igc-gray-a));border-color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) input::-webkit-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::-moz-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input:-ms-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::-ms-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:not([outlined])) [part=start],:host(:not([outlined])) [part=end]{border-color:rgba(0,0,0,0);border-top-width:.0625rem}:host(:not([outlined])) [part=notch],:host(:not([outlined])) [part=filler]{border-top:1px solid rgba(0,0,0,0);border-bottom:rgba(0,0,0,0);border-bottom-width:.0625rem}:host(:not([outlined])) [part=label]{inset-inline-start:.125rem}:host(:not([outlined])) [part~=container]{background:hsla(var(--igc-gray-100), var(--igc-gray-a));border-bottom:1px solid hsla(var(--igc-gray-600), var(--igc-gray-a));border-start-end-radius:.25rem;border-start-start-radius:.25rem;-webkit-transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([outlined])) [part~=container]::after{position:absolute;content:\"\";width:100%;height:.125rem;left:0;right:0;bottom:-1px;background:hsla(var(--igc-primary-500), var(--igc-primary-a));-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([outlined])) [part~=labelled] [part~=input]{padding-top:1.25rem;padding-bottom:.375rem}:host(:not([outlined])) input:not(:-moz-placeholder-shown)+[part=notch] [part=label]{transform:translateY(-106%)}:host(:not([outlined])) input:not(:-ms-input-placeholder)+[part=notch] [part=label]{-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined])) input:not(:placeholder-shown)+[part=notch] [part=label]{-webkit-transform:translateY(-106%);-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined]):hover) [part~=container]{background:hsla(var(--igc-gray-200), var(--igc-gray-a));border-bottom:1px solid hsla(var(--igc-gray-800), var(--igc-gray-a))}:host(:not([outlined]):focus-within) [part~=container]{background:var(--focus-background, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-bottom:1px solid hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:not([outlined]):focus-within) [part~=container]::after{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);opacity:1}:host(:not([outlined]):focus-within) [part=notch] [part=label],:host(:not([outlined])[placeholder]) [part=notch] [part=label]{-webkit-transform:translateY(-106%);-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined])[invalid]) [part=start],:host(:not([outlined])[invalid]) [part=notch],:host(:not([outlined])[invalid]) [part=filler],:host(:not([outlined])[invalid]) [part=end],:host(:not([outlined])[invalid]:focus-within) [part=start],:host(:not([outlined])[invalid]:focus-within) [part=notch],:host(:not([outlined])[invalid]:focus-within) [part=filler],:host(:not([outlined])[invalid]:focus-within) [part=end]{border-color:rgba(0,0,0,0)}:host(:not([outlined])[invalid]) [part~=container],:host(:not([outlined])[invalid]:focus-within) [part~=container]{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([outlined])[invalid]) [part~=container]::after,:host(:not([outlined])[invalid]:focus-within) [part~=container]::after{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([outlined])[disabled]) [part~=input],:host(:not([outlined])[disabled]) [part=label],:host(:not([outlined])[disabled]) [part=prefix],:host(:not([outlined])[disabled]) [part=suffix],:host(:not([outlined])[disabled]) [part=helper-text]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host(:not([outlined])[disabled]) [part~=container]{border-color:hsla(var(--igc-gray-400), var(--igc-gray-a))}`;\n"]}
|
|
1
|
+
{"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,suXAAsuX,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([size=large]) input:-moz-placeholder-shown+[part=notch] [part=label]{transform:translateY(-26px);font-size:.75rem}:host([size=large]) input:-ms-input-placeholder+[part=notch] [part=label]{-ms-transform:translateY(-26px);transform:translateY(-26px);font-size:.75rem}:host([size=large]:focus-within) [part=label],:host([size=large]) input:placeholder-shown+[part=notch] [part=label],:host([size=large]) [part~=filled]+[part=notch] [part=label]{-webkit-transform:translateY(-26px);-ms-transform:translateY(-26px);transform:translateY(-26px);font-size:.75rem}:host([size=medium]) input:-moz-placeholder-shown+[part=notch] [part=label]{transform:translateY(-22px);font-size:.75rem}:host([size=medium]) input:-ms-input-placeholder+[part=notch] [part=label]{-ms-transform:translateY(-22px);transform:translateY(-22px);font-size:.75rem}:host([size=medium]:focus-within) [part=label],:host([size=medium]) input:placeholder-shown+[part=notch] [part=label],:host([size=medium]) [part~=filled]+[part=notch] [part=label]{-webkit-transform:translateY(-22px);-ms-transform:translateY(-22px);transform:translateY(-22px);font-size:.75rem}:host([size=small]) input:-moz-placeholder-shown+[part=notch] [part=label]{transform:translateY(-18px);font-size:.75rem}:host([size=small]) input:-ms-input-placeholder+[part=notch] [part=label]{-ms-transform:translateY(-18px);transform:translateY(-18px);font-size:.75rem}:host([size=small]:focus-within) [part=label],:host([size=small]) input:placeholder-shown+[part=notch] [part=label],:host([size=small]) [part~=filled]+[part=notch] [part=label]{-webkit-transform:translateY(-18px);-ms-transform:translateY(-18px);transform:translateY(-18px);font-size:.75rem}:host input:-moz-placeholder-shown+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host input:-ms-input-placeholder+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host([disabled]) [part~=filled]+[part=notch],:host([invalid]) [part~=filled]+[part=notch],:host([invalid]:focus-within) [part~=filled]+[part=notch],:host input:placeholder-shown+[part=notch],:host [part~=filled]+[part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}[part~=input]{background:rgba(0,0,0,0);padding:0 .25rem;font-size:1rem;grid-area:1/2/span 1/span 2}[part=label]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);line-height:1;will-change:font-size,color,transform}:host(:focus-within) [part=start]{border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-inline-start-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host(:focus-within) [part=notch]{border-width:.125rem;border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-top:.0625rem solid rgba(0,0,0,0)}:host(:focus-within) [part=filler]{border-width:.125rem;border-color:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:focus-within) [part=end]{border-color:hsla(var(--igc-primary-500), var(--igc-primary-a));border-inline-end-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host(:focus-within) [part=prefix]{-webkit-padding-start:.25rem;padding-inline-start:.25rem}:host(:focus-within) [part=suffix]{-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host(:focus-within) [part=label]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part^=container]{grid-template-columns:auto auto 1fr auto}[part=start]{width:auto;min-width:.75rem;-ms-flex-negative:0;flex-shrink:0;grid-area:1/1;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-inline-start-width:.0625rem;border-inline-end-width:0;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-start-radius:.25rem;border-end-start-radius:.25rem}[part=start]>[part=prefix]{-webkit-padding-start:.3125rem;padding-inline-start:.3125rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem}[part=notch]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;height:100%;grid-area:1/2;padding:0 .25rem;border-width:.0625rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-left:none;border-right:none;overflow:visible}[part=notch]:empty{display:none}[part=filler]{grid-area:1/3;border-width:.0625rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-left:none;border-right:none}[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;grid-area:1/4;min-width:.75rem;border-style:solid;border-color:hsla(var(--igc-gray-600), var(--igc-gray-a));border-inline-start-width:0;border-inline-end-width:.0625rem;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-end-radius:.25rem;border-end-end-radius:.25rem}[part=end]>[part=suffix]{-webkit-padding-start:.25rem;padding-inline-start:.25rem;-webkit-padding-end:.3125rem;padding-inline-end:.3125rem}[part=helper-text]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);padding:0 .5rem;margin-top:.25rem;color:hsla(var(--igc-gray-600), var(--igc-gray-a))}:host([invalid]) [part=start],:host([invalid]) [part=notch],:host([invalid]) [part=filler],:host([invalid]) [part=end],:host([invalid]:focus-within) [part=start],:host([invalid]:focus-within) [part=notch],:host([invalid]:focus-within) [part=filler],:host([invalid]:focus-within) [part=end]{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]) [part=label],:host([invalid]) [part=helper-text],:host([invalid]:focus-within) [part=label],:host([invalid]:focus-within) [part=helper-text]{color:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]:focus-within) [part=notch]{border-top:.0625rem solid rgba(0,0,0,0)}:host([disabled]){pointer-events:none}:host([disabled]) [part~=input],:host([disabled]) [part=label],:host([disabled]) [part=prefix],:host([disabled]) [part=suffix],:host([disabled]) [part=helper-text]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part=start],:host([disabled]) [part=filler],:host([disabled]) [part=notch],:host([disabled]) [part=end]{color:hsla(var(--igc-gray-400), var(--igc-gray-a));border-color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) input::-webkit-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::-moz-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input:-ms-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::-ms-input-placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host([disabled]) input::placeholder{color:hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:not([outlined])) [part=start],:host(:not([outlined])) [part=end]{border-color:rgba(0,0,0,0);border-top-width:.0625rem}:host(:not([outlined])) [part=notch],:host(:not([outlined])) [part=filler]{border-top:1px solid rgba(0,0,0,0);border-bottom:rgba(0,0,0,0);border-bottom-width:.0625rem}:host(:not([outlined])) [part=label]{inset-inline-start:.125rem}:host(:not([outlined])) [part~=container]{background:hsla(var(--igc-gray-100), var(--igc-gray-a));border-bottom:1px solid hsla(var(--igc-gray-600), var(--igc-gray-a));border-start-end-radius:.25rem;border-start-start-radius:.25rem;-webkit-transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([outlined])) [part~=container]::after{position:absolute;content:\"\";width:100%;height:.125rem;left:0;right:0;bottom:-1px;background:hsla(var(--igc-primary-500), var(--igc-primary-a));-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([outlined])) [part~=labelled] [part~=input]{padding-top:1.25rem;padding-bottom:.375rem}:host(:not([outlined])) input:-moz-placeholder-shown+[part=notch] [part=label]{transform:translateY(-106%)}:host(:not([outlined])) input:-ms-input-placeholder+[part=notch] [part=label]{-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined])) input:placeholder-shown+[part=notch] [part=label],:host(:not([outlined])) [part~=filled]+[part=notch] [part=label]{-webkit-transform:translateY(-106%);-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined]):hover) [part~=container]{background:hsla(var(--igc-gray-200), var(--igc-gray-a));border-bottom:1px solid hsla(var(--igc-gray-800), var(--igc-gray-a))}:host(:not([outlined]):focus-within) [part~=container]{background:var(--focus-background, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-bottom:1px solid hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:not([outlined]):focus-within) [part~=container]::after{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);opacity:1}:host(:not([outlined]):focus-within) [part=notch] [part=label]{-webkit-transform:translateY(-106%);-ms-transform:translateY(-106%);transform:translateY(-106%)}:host(:not([outlined])[invalid]) [part=start],:host(:not([outlined])[invalid]) [part=notch],:host(:not([outlined])[invalid]) [part=filler],:host(:not([outlined])[invalid]) [part=end],:host(:not([outlined])[invalid]:focus-within) [part=start],:host(:not([outlined])[invalid]:focus-within) [part=notch],:host(:not([outlined])[invalid]:focus-within) [part=filler],:host(:not([outlined])[invalid]:focus-within) [part=end]{border-color:rgba(0,0,0,0)}:host(:not([outlined])[invalid]) [part~=container],:host(:not([outlined])[invalid]:focus-within) [part~=container]{border-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([outlined])[invalid]) [part~=container]::after,:host(:not([outlined])[invalid]:focus-within) [part~=container]::after{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host(:not([outlined])[disabled]) [part~=input],:host(:not([outlined])[disabled]) [part=label],:host(:not([outlined])[disabled]) [part=prefix],:host(:not([outlined])[disabled]) [part=suffix],:host(:not([outlined])[disabled]) [part=helper-text]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host(:not([outlined])[disabled]) [part~=container]{border-color:hsla(var(--igc-gray-400), var(--igc-gray-a))}`;\n"]}
|
|
@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import { themes } from '../../theming';
|
|
9
|
-
import { styles } from './themes/light/list-header.base.css';
|
|
10
|
-
import { styles as indigo } from './themes/light/list-header.indigo.css';
|
|
8
|
+
import { themes } from '../../theming/theming-decorator.js';
|
|
9
|
+
import { styles } from './themes/light/list-header.base.css.js';
|
|
10
|
+
import { styles as indigo } from './themes/light/list-header.indigo.css.js';
|
|
11
11
|
let IgcListHeaderComponent = class IgcListHeaderComponent extends LitElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-header.js","sourceRoot":"","sources":["../../../src/components/list/list-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"list-header.js","sourceRoot":"","sources":["../../../src/components/list/list-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAU5E,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,UAAU;IAK5D;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACzC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAhBwB,8BAAO,GAAG,iBAAkB,CAAA;AAE5B,6BAAM,GAAG,MAAO,CAAA;AAHpB,sBAAsB;IAD1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,sBAAsB,CAiB1C;eAjBoB,sBAAsB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/list-header.base.css.js';\nimport { styles as indigo } from './themes/light/list-header.indigo.css.js';\n\n/**\n * Header list item.\n *\n * @element igc-list-header\n *\n * @slot - Renders header list item's content.\n */\n@themes({ indigo })\nexport default class IgcListHeaderComponent extends LitElement {\n public static readonly tagName = 'igc-list-header';\n\n public static override styles = styles;\n\n constructor() {\n super();\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'separator');\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-list-header': IgcListHeaderComponent;\n }\n}\n"]}
|
|
@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import { themes } from '../../theming';
|
|
9
|
-
import { styles } from './themes/light/list-item.base.css';
|
|
10
|
-
import { styles as bootstrap } from './themes/light/list-item.bootstrap.css';
|
|
11
|
-
import { styles as fluent } from './themes/light/list-item.fluent.css';
|
|
12
|
-
import { styles as indigo } from './themes/light/list-item.indigo.css';
|
|
8
|
+
import { themes } from '../../theming/theming-decorator.js';
|
|
9
|
+
import { styles } from './themes/light/list-item.base.css.js';
|
|
10
|
+
import { styles as bootstrap } from './themes/light/list-item.bootstrap.css.js';
|
|
11
|
+
import { styles as fluent } from './themes/light/list-item.fluent.css.js';
|
|
12
|
+
import { styles as indigo } from './themes/light/list-item.indigo.css.js';
|
|
13
13
|
let IgcListItemComponent = class IgcListItemComponent extends LitElement {
|
|
14
14
|
constructor() {
|
|
15
15
|
super();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAsB1E,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAK1D;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;KAcV,CAAC;IACJ,CAAC;CACF,CAAA;AA9BwB,4BAAO,GAAG,eAAgB,CAAA;AAE1B,2BAAM,GAAG,MAAO,CAAA;AAHpB,oBAAoB;IADxC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,oBAAoB,CA+BxC;eA/BoB,oBAAoB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/list-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/list-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/list-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/list-item.indigo.css.js';\n\n/**\n * The list-item component is a container\n * intended for row items in the list component.\n *\n * @element igc-list-item\n *\n * @slot - Renders custom content.\n * @slot start - Renders content before all other content.\n * @slot end - Renders content after all other content.\n * @slot title - Renders the title.\n * @slot subtitle - Renders the subtitle.\n *\n * @csspart start - The start container.\n * @csspart end - The end container.\n * @csspart content - The header and custom content container.\n * @csspart header - The title and subtitle container.\n * @csspart title - The title container.\n * @csspart subtitle - The subtitle container.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcListItemComponent extends LitElement {\n public static readonly tagName = 'igc-list-item';\n\n public static override styles = styles;\n\n constructor() {\n super();\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'listitem');\n }\n\n protected override render() {\n return html`\n <section part=\"start\">\n <slot name=\"start\"></slot>\n </section>\n <section part=\"content\">\n <header part=\"header\">\n <slot part=\"title\" name=\"title\"></slot>\n <slot part=\"subtitle\" name=\"subtitle\"></slot>\n </header>\n <slot></slot>\n </section>\n <section part=\"end\">\n <slot name=\"end\"></slot>\n </section>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-list-item': IgcListItemComponent;\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
declare const IgcListComponent_base: import("../common/mixins/constructor").Constructor<import("../common/mixins/sizable").SizableInterface> & typeof LitElement;
|
|
2
|
+
declare const IgcListComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/sizable.js").SizableInterface> & typeof LitElement;
|
|
3
3
|
/**
|
|
4
4
|
* Displays a collection of data items in a templatable list format.
|
|
5
5
|
*
|
package/components/list/list.js
CHANGED
|
@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import { themes } from '../../theming';
|
|
9
|
-
import { SizableMixin } from '../common/mixins/sizable';
|
|
10
|
-
import { styles } from './themes/light/list.base.css';
|
|
11
|
-
import { styles as bootstrap } from './themes/light/list.bootstrap.css';
|
|
8
|
+
import { themes } from '../../theming/theming-decorator.js';
|
|
9
|
+
import { SizableMixin } from '../common/mixins/sizable.js';
|
|
10
|
+
import { styles } from './themes/light/list.base.css.js';
|
|
11
|
+
import { styles as bootstrap } from './themes/light/list.bootstrap.css.js';
|
|
12
12
|
let IgcListComponent = class IgcListComponent extends SizableMixin(LitElement) {
|
|
13
13
|
constructor() {
|
|
14
14
|
super();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAU3E,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAIpE;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAfwB,wBAAO,GAAG,UAAW,CAAA;AACrB,uBAAM,GAAG,MAAO,CAAA;AAFpB,gBAAgB;IADpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,gBAAgB,CAgBpC;eAhBoB,gBAAgB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/light/list.base.css.js';\nimport { styles as bootstrap } from './themes/light/list.bootstrap.css.js';\n\n/**\n * Displays a collection of data items in a templatable list format.\n *\n * @element igc-list\n *\n * @slot - Renders the list items and list headers inside default slot.\n */\n@themes({ bootstrap })\nexport default class IgcListComponent extends SizableMixin(LitElement) {\n public static readonly tagName = 'igc-list';\n public static override styles = styles;\n\n constructor() {\n super();\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'list');\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-list': IgcListComponent;\n }\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:var(--igc-font-family);overflow:hidden;background:hsla(var(--igc-surface-500), var(--igc-surface-a))}:host([size=small]) ::slotted(igc-list-item),:host([size=small]) ::slotted(igc-list-header){padding:var(--igc-spacing-small) calc(var(--igc-spacing-small)*2)}:host([size=medium]) ::slotted(igc-list-item),:host([size=medium]) ::slotted(igc-list-header){padding:var(--igc-spacing-medium) calc(var(--igc-spacing-medium)*2)}:host([size=large]) ::slotted(igc-list-item),:host([size=large]) ::slotted(igc-list-header){padding:var(--igc-spacing-large) calc(var(--igc-spacing-large)*2)}`;
|
|
2
|
+
export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:var(--igc-font-family);overflow:hidden auto;height:auto;background:hsla(var(--igc-surface-500), var(--igc-surface-a))}:host([size=small]) ::slotted(igc-list-item),:host([size=small]) ::slotted(igc-list-header){padding:var(--igc-spacing-small) calc(var(--igc-spacing-small)*2)}:host([size=medium]) ::slotted(igc-list-item),:host([size=medium]) ::slotted(igc-list-header){padding:var(--igc-spacing-medium) calc(var(--igc-spacing-medium)*2)}:host([size=large]) ::slotted(igc-list-item),:host([size=large]) ::slotted(igc-list-header){padding:var(--igc-spacing-large) calc(var(--igc-spacing-large)*2)}`;
|
|
3
3
|
//# sourceMappingURL=list.base.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.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":"list.base.css.js","sourceRoot":"","sources":["../../../../../src/components/list/themes/light/list.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,w+CAAw+C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;font-family:var(--igc-font-family);overflow:hidden auto;height:auto;background:hsla(var(--igc-surface-500), var(--igc-surface-a))}:host([size=small]) ::slotted(igc-list-item),:host([size=small]) ::slotted(igc-list-header){padding:var(--igc-spacing-small) calc(var(--igc-spacing-small)*2)}:host([size=medium]) ::slotted(igc-list-item),:host([size=medium]) ::slotted(igc-list-header){padding:var(--igc-spacing-medium) calc(var(--igc-spacing-medium)*2)}:host([size=large]) ::slotted(igc-list-item),:host([size=large]) ::slotted(igc-list-header){padding:var(--igc-spacing-large) calc(var(--igc-spacing-large)*2)}`;\n"]}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { IgcInputBaseComponent } from '../input/input-base.js';
|
|
2
|
+
import { MaskParser } from './mask-parser.js';
|
|
3
|
+
interface MaskSelection {
|
|
4
|
+
start: number;
|
|
5
|
+
end: number;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A masked input is an input field where a developer can control user input and format the visible value,
|
|
9
|
+
* based on configurable rules
|
|
10
|
+
*
|
|
11
|
+
* @element igc-mask-input
|
|
12
|
+
*
|
|
13
|
+
* @slot prefix - Renders content before the input
|
|
14
|
+
* @slot suffix - Renders content after the input
|
|
15
|
+
* @slot helper-text - Renders content below the input
|
|
16
|
+
*
|
|
17
|
+
* @fires igcInput - Emitted when the control receives user input
|
|
18
|
+
* @fires igcChange - Emitted when an alteration of the control's value is committed by the user
|
|
19
|
+
* @fires igcFocus - Emitted when the control gains focus
|
|
20
|
+
* @fires igcBlur - Emitted when the control loses focus
|
|
21
|
+
*
|
|
22
|
+
* @csspart container - The main wrapper that holds all main input elements
|
|
23
|
+
* @csspart input - The native input element
|
|
24
|
+
* @csspart label - The native label element
|
|
25
|
+
* @csspart prefix - The prefix wrapper
|
|
26
|
+
* @csspart suffix - The suffix wrapper
|
|
27
|
+
* @csspart helper-text - The helper text wrapper
|
|
28
|
+
*/
|
|
29
|
+
export default class IgcMaskInputComponent extends IgcInputBaseComponent {
|
|
30
|
+
static readonly tagName = "igc-mask-input";
|
|
31
|
+
protected parser: MaskParser;
|
|
32
|
+
protected _value: string;
|
|
33
|
+
protected selection: MaskSelection;
|
|
34
|
+
protected compositionStart: number;
|
|
35
|
+
protected hasFocus: boolean;
|
|
36
|
+
protected maskedValue: string;
|
|
37
|
+
protected get inputSelection(): MaskSelection;
|
|
38
|
+
/** The direction attribute of the control. */
|
|
39
|
+
dir: 'ltr' | 'rtl' | 'auto';
|
|
40
|
+
/** Controls the validity of the control. */
|
|
41
|
+
invalid: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Dictates the behavior when retrieving the value of the control:
|
|
44
|
+
*
|
|
45
|
+
* - `raw` will return the clean user input.
|
|
46
|
+
* - `withFormatting` will return the value with all literals and prompts.
|
|
47
|
+
*
|
|
48
|
+
*/
|
|
49
|
+
valueMode: 'raw' | 'withFormatting';
|
|
50
|
+
/**
|
|
51
|
+
* The value of the input.
|
|
52
|
+
*
|
|
53
|
+
* Regardless of the currently set `value-mode`, an empty value will return an empty string.
|
|
54
|
+
*
|
|
55
|
+
*/
|
|
56
|
+
get value(): string;
|
|
57
|
+
set value(string: string);
|
|
58
|
+
/** The mask pattern to apply on the input. */
|
|
59
|
+
mask: string;
|
|
60
|
+
/** The prompt symbol to use for unfilled parts of the mask. */
|
|
61
|
+
prompt: string;
|
|
62
|
+
protected promptChange(): void;
|
|
63
|
+
protected maskChange(): void;
|
|
64
|
+
protected handleInvalidState(): void;
|
|
65
|
+
connectedCallback(): void;
|
|
66
|
+
protected handleKeydown(e: KeyboardEvent): void;
|
|
67
|
+
protected handleCompositionStart(): void;
|
|
68
|
+
protected handleCompositionEnd({ data }: CompositionEvent): void;
|
|
69
|
+
protected handleInput({ inputType, isComposing }: InputEvent): void | Promise<void>;
|
|
70
|
+
protected updateInput(part: string, start: number, finish: number): void;
|
|
71
|
+
protected handleCut(): void;
|
|
72
|
+
protected handleDragStart(): void;
|
|
73
|
+
protected handleDragEnter(): void;
|
|
74
|
+
protected handleDragLeave(): void;
|
|
75
|
+
protected handleFocus(): void;
|
|
76
|
+
protected handleBlur(): void;
|
|
77
|
+
protected handleChange(): void;
|
|
78
|
+
protected handleInvalid(): void;
|
|
79
|
+
protected handleClick(): void;
|
|
80
|
+
protected updateMaskedValue(): void;
|
|
81
|
+
/** Replaces the selected text in the control and re-applies the mask */
|
|
82
|
+
setRangeText(replacement: string, start: number, end: number, _selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
|
|
83
|
+
setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none'): void;
|
|
84
|
+
/** Checks for validity of the control and shows the browser message if it's invalid. */
|
|
85
|
+
reportValidity(): boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Sets a custom validation message for the control.
|
|
88
|
+
* As long as `message` is not empty, the control is considered invalid.
|
|
89
|
+
*/
|
|
90
|
+
setCustomValidity(message: string): void;
|
|
91
|
+
/** Check for validity of the control */
|
|
92
|
+
checkValidity(): boolean;
|
|
93
|
+
/** Selects all text within the input. */
|
|
94
|
+
select(): void;
|
|
95
|
+
protected renderInput(): import("lit-html").TemplateResult<1>;
|
|
96
|
+
}
|
|
97
|
+
declare global {
|
|
98
|
+
interface HTMLElementTagNameMap {
|
|
99
|
+
'igc-mask-input': IgcMaskInputComponent;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
export {};
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
+
import { live } from 'lit/directives/live.js';
|
|
11
|
+
import { watch } from '../common/decorators/watch.js';
|
|
12
|
+
import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
|
|
13
|
+
import { partNameMap } from '../common/util.js';
|
|
14
|
+
import { IgcInputBaseComponent } from '../input/input-base.js';
|
|
15
|
+
import { MaskParser } from './mask-parser.js';
|
|
16
|
+
export default class IgcMaskInputComponent extends IgcInputBaseComponent {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
this.parser = new MaskParser();
|
|
20
|
+
this._value = '';
|
|
21
|
+
this.selection = { start: 0, end: 0 };
|
|
22
|
+
this.compositionStart = 0;
|
|
23
|
+
this.hasFocus = false;
|
|
24
|
+
this.maskedValue = '';
|
|
25
|
+
this.dir = 'auto';
|
|
26
|
+
this.invalid = false;
|
|
27
|
+
this.valueMode = 'raw';
|
|
28
|
+
}
|
|
29
|
+
get inputSelection() {
|
|
30
|
+
return {
|
|
31
|
+
start: this.input.selectionStart || 0,
|
|
32
|
+
end: this.input.selectionEnd || 0,
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
get value() {
|
|
36
|
+
return this._value
|
|
37
|
+
? this.valueMode !== 'raw'
|
|
38
|
+
? this.maskedValue
|
|
39
|
+
: this._value
|
|
40
|
+
: this._value;
|
|
41
|
+
}
|
|
42
|
+
set value(string) {
|
|
43
|
+
this._value = string !== null && string !== void 0 ? string : '';
|
|
44
|
+
this.maskedValue = this.parser.apply(this._value);
|
|
45
|
+
}
|
|
46
|
+
promptChange() {
|
|
47
|
+
this.parser.prompt = this.prompt;
|
|
48
|
+
if (this.value) {
|
|
49
|
+
this.maskedValue = this.parser.apply(this._value);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
maskChange() {
|
|
53
|
+
this.parser.mask = this.mask;
|
|
54
|
+
if (this.value) {
|
|
55
|
+
this.maskedValue = this.parser.apply(this._value);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
handleInvalidState() {
|
|
59
|
+
this.updateComplete.then(() => (this.invalid = !this.checkValidity()));
|
|
60
|
+
}
|
|
61
|
+
connectedCallback() {
|
|
62
|
+
super.connectedCallback();
|
|
63
|
+
this.mask = this.mask || this.parser.mask;
|
|
64
|
+
this.prompt = this.prompt || this.parser.prompt;
|
|
65
|
+
}
|
|
66
|
+
handleKeydown(e) {
|
|
67
|
+
if (!e.key) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
this.selection = this.inputSelection;
|
|
71
|
+
}
|
|
72
|
+
handleCompositionStart() {
|
|
73
|
+
this.compositionStart = this.inputSelection.start;
|
|
74
|
+
}
|
|
75
|
+
handleCompositionEnd({ data }) {
|
|
76
|
+
const start = this.compositionStart, end = this.inputSelection.end;
|
|
77
|
+
this.updateInput(data, start, end);
|
|
78
|
+
}
|
|
79
|
+
handleInput({ inputType, isComposing }) {
|
|
80
|
+
const value = this.input.value;
|
|
81
|
+
const start = this.selection.start;
|
|
82
|
+
let end = this.selection.end;
|
|
83
|
+
switch (inputType) {
|
|
84
|
+
case 'deleteContentForward':
|
|
85
|
+
this.updateInput('', start, (end = start === end ? ++end : end));
|
|
86
|
+
return this.updateComplete.then(() => this.input.setSelectionRange(end, end));
|
|
87
|
+
case 'deleteContentBackward':
|
|
88
|
+
if (isComposing)
|
|
89
|
+
return;
|
|
90
|
+
return this.updateInput('', this.inputSelection.start, end);
|
|
91
|
+
case 'deleteByCut':
|
|
92
|
+
return this.updateInput('', start, end);
|
|
93
|
+
case 'insertText':
|
|
94
|
+
return this.updateInput(value.substring(start, this.inputSelection.end), start, end);
|
|
95
|
+
case 'insertFromPaste':
|
|
96
|
+
return this.updateInput(value.substring(start, this.inputSelection.end), start, this.inputSelection.start);
|
|
97
|
+
case 'insertFromDrop':
|
|
98
|
+
return this.updateInput(value.substring(this.inputSelection.start, this.inputSelection.end), this.inputSelection.start, this.inputSelection.end);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
updateInput(part, start, finish) {
|
|
102
|
+
const { value, end } = this.parser.replace(this.maskedValue, part, start, finish);
|
|
103
|
+
this.maskedValue = value;
|
|
104
|
+
this._value = this.parser.parse(value);
|
|
105
|
+
this.requestUpdate();
|
|
106
|
+
if (start !== this.mask.length) {
|
|
107
|
+
this.emitEvent('igcInput', { detail: this.value });
|
|
108
|
+
}
|
|
109
|
+
this.updateComplete.then(() => this.input.setSelectionRange(end, end));
|
|
110
|
+
}
|
|
111
|
+
handleCut() {
|
|
112
|
+
this.selection = this.inputSelection;
|
|
113
|
+
}
|
|
114
|
+
handleDragStart() {
|
|
115
|
+
this.selection = this.inputSelection;
|
|
116
|
+
}
|
|
117
|
+
handleDragEnter() {
|
|
118
|
+
if (!this.hasFocus && !this._value) {
|
|
119
|
+
this.maskedValue = this.parser.apply();
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
handleDragLeave() {
|
|
123
|
+
if (!this.hasFocus) {
|
|
124
|
+
this.updateMaskedValue();
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
handleFocus() {
|
|
128
|
+
this.hasFocus = true;
|
|
129
|
+
super.handleFocus();
|
|
130
|
+
if (this.readonly) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (!this._value) {
|
|
134
|
+
this.maskedValue = this.parser.apply();
|
|
135
|
+
this.updateComplete.then(() => this.select());
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
handleBlur() {
|
|
139
|
+
this.hasFocus = false;
|
|
140
|
+
this.updateMaskedValue();
|
|
141
|
+
super.handleBlur();
|
|
142
|
+
}
|
|
143
|
+
handleChange() {
|
|
144
|
+
this.emitEvent('igcChange', { detail: this.value });
|
|
145
|
+
this.invalid = !this.checkValidity();
|
|
146
|
+
}
|
|
147
|
+
handleInvalid() {
|
|
148
|
+
this.invalid = true;
|
|
149
|
+
}
|
|
150
|
+
handleClick() {
|
|
151
|
+
if (this.input.selectionStart === this.input.selectionEnd &&
|
|
152
|
+
this.input.selectionStart === this.maskedValue.length) {
|
|
153
|
+
this.select();
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
updateMaskedValue() {
|
|
157
|
+
if (this.maskedValue === this.parser.apply()) {
|
|
158
|
+
this.maskedValue = '';
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
setRangeText(replacement, start, end, _selectMode = 'preserve') {
|
|
162
|
+
this.input.value = this.parser.replace(this.input.value, replacement, start, end).value;
|
|
163
|
+
this.maskedValue = this.parser.apply(this.parser.parse(this.input.value));
|
|
164
|
+
this._value = this.parser.parse(this.maskedValue);
|
|
165
|
+
}
|
|
166
|
+
setSelectionRange(start, end, direction) {
|
|
167
|
+
super.setSelectionRange(start, end, direction);
|
|
168
|
+
this.selection = { start, end };
|
|
169
|
+
}
|
|
170
|
+
reportValidity() {
|
|
171
|
+
const state = this._value
|
|
172
|
+
? this.parser.isValidString(this.input.value)
|
|
173
|
+
: this.input.reportValidity();
|
|
174
|
+
this.invalid = !state;
|
|
175
|
+
return state;
|
|
176
|
+
}
|
|
177
|
+
setCustomValidity(message) {
|
|
178
|
+
this.input.setCustomValidity(message);
|
|
179
|
+
this.invalid = !this.input.checkValidity();
|
|
180
|
+
}
|
|
181
|
+
checkValidity() {
|
|
182
|
+
if (this.disabled) {
|
|
183
|
+
return this.input.checkValidity();
|
|
184
|
+
}
|
|
185
|
+
if (!this._value) {
|
|
186
|
+
return !this.required;
|
|
187
|
+
}
|
|
188
|
+
return (this.input.checkValidity() && this.parser.isValidString(this.input.value));
|
|
189
|
+
}
|
|
190
|
+
select() {
|
|
191
|
+
this.input.select();
|
|
192
|
+
}
|
|
193
|
+
renderInput() {
|
|
194
|
+
var _a;
|
|
195
|
+
return html `
|
|
196
|
+
<input
|
|
197
|
+
type="text"
|
|
198
|
+
part=${partNameMap(this.resolvePartNames('input'))}
|
|
199
|
+
name=${ifDefined(this.name)}
|
|
200
|
+
.value=${live(this.maskedValue)}
|
|
201
|
+
.placeholder=${live((_a = this.placeholder) !== null && _a !== void 0 ? _a : this.parser.escapedMask)}
|
|
202
|
+
?readonly=${this.readonly}
|
|
203
|
+
?disabled=${this.disabled}
|
|
204
|
+
?required=${this.required}
|
|
205
|
+
@dragenter=${this.handleDragEnter}
|
|
206
|
+
@dragleave=${this.handleDragLeave}
|
|
207
|
+
@dragstart=${this.handleDragStart}
|
|
208
|
+
@blur=${this.handleBlur}
|
|
209
|
+
@focus=${this.handleFocus}
|
|
210
|
+
@cut=${this.handleCut}
|
|
211
|
+
@change=${this.handleChange}
|
|
212
|
+
@click=${this.handleClick}
|
|
213
|
+
@compositionstart=${this.handleCompositionStart}
|
|
214
|
+
@compositionend=${this.handleCompositionEnd}
|
|
215
|
+
@input=${this.handleInput}
|
|
216
|
+
aria-invalid="${this.invalid ? 'true' : 'false'}"
|
|
217
|
+
@invalid="${this.handleInvalid}"
|
|
218
|
+
@keydown=${this.handleKeydown}
|
|
219
|
+
/>
|
|
220
|
+
`;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
IgcMaskInputComponent.tagName = 'igc-mask-input';
|
|
224
|
+
__decorate([
|
|
225
|
+
state()
|
|
226
|
+
], IgcMaskInputComponent.prototype, "hasFocus", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
state()
|
|
229
|
+
], IgcMaskInputComponent.prototype, "maskedValue", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ reflect: true })
|
|
232
|
+
], IgcMaskInputComponent.prototype, "dir", void 0);
|
|
233
|
+
__decorate([
|
|
234
|
+
property({ reflect: true, type: Boolean })
|
|
235
|
+
], IgcMaskInputComponent.prototype, "invalid", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
property({ attribute: 'value-mode' })
|
|
238
|
+
], IgcMaskInputComponent.prototype, "valueMode", void 0);
|
|
239
|
+
__decorate([
|
|
240
|
+
property(),
|
|
241
|
+
blazorTwoWayBind('igcChange', 'detail')
|
|
242
|
+
], IgcMaskInputComponent.prototype, "value", null);
|
|
243
|
+
__decorate([
|
|
244
|
+
property()
|
|
245
|
+
], IgcMaskInputComponent.prototype, "mask", void 0);
|
|
246
|
+
__decorate([
|
|
247
|
+
property()
|
|
248
|
+
], IgcMaskInputComponent.prototype, "prompt", void 0);
|
|
249
|
+
__decorate([
|
|
250
|
+
watch('prompt')
|
|
251
|
+
], IgcMaskInputComponent.prototype, "promptChange", null);
|
|
252
|
+
__decorate([
|
|
253
|
+
watch('mask')
|
|
254
|
+
], IgcMaskInputComponent.prototype, "maskChange", null);
|
|
255
|
+
__decorate([
|
|
256
|
+
watch('required', { waitUntilFirstUpdate: true }),
|
|
257
|
+
watch('disabled', { waitUntilFirstUpdate: true }),
|
|
258
|
+
watch('value', { waitUntilFirstUpdate: true })
|
|
259
|
+
], IgcMaskInputComponent.prototype, "handleInvalidState", null);
|
|
260
|
+
//# sourceMappingURL=mask-input.js.map
|
|
@@ -0,0 +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, state } 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 { IgcInputBaseComponent } from '../input/input-base.js';\nimport { MaskParser } from './mask-parser.js';\n\ninterface MaskSelection {\n start: number;\n end: number;\n}\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 IgcInputBaseComponent {\n public static readonly tagName = 'igc-mask-input';\n\n protected parser = new MaskParser();\n protected _value = '';\n protected selection: MaskSelection = { start: 0, end: 0 };\n protected compositionStart = 0;\n\n @state()\n protected hasFocus = false;\n\n @state()\n protected maskedValue = '';\n\n protected get inputSelection(): MaskSelection {\n return {\n start: this.input.selectionStart || 0,\n end: this.input.selectionEnd || 0,\n };\n }\n\n /** The direction attribute of the control. */\n @property({ reflect: true })\n public override dir: 'ltr' | 'rtl' | 'auto' = 'auto';\n\n /** Controls the validity of the control. */\n @property({ reflect: true, type: Boolean })\n public invalid = false;\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 *\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 *\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 /** The mask pattern to apply on the input. */\n @property()\n public mask!: string;\n\n /** The prompt symbol to use for unfilled parts of the mask. */\n @property()\n public prompt!: string;\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('mask')\n protected maskChange() {\n this.parser.mask = this.mask;\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 handleInvalidState() {\n this.updateComplete.then(() => (this.invalid = !this.checkValidity()));\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 protected handleKeydown(e: KeyboardEvent) {\n if (!e.key) {\n return;\n }\n this.selection = this.inputSelection;\n }\n\n protected handleCompositionStart() {\n this.compositionStart = this.inputSelection.start;\n }\n\n protected handleCompositionEnd({ data }: CompositionEvent) {\n const start = this.compositionStart,\n end = this.inputSelection.end;\n this.updateInput(data, start, end);\n }\n\n protected handleInput({ inputType, isComposing }: InputEvent) {\n const value = this.input.value;\n const start = this.selection.start;\n let end = this.selection.end;\n\n switch (inputType) {\n case 'deleteContentForward':\n this.updateInput('', start, (end = start === end ? ++end : end));\n return this.updateComplete.then(() =>\n this.input.setSelectionRange(end, end)\n );\n\n case 'deleteContentBackward':\n if (isComposing) return;\n return this.updateInput('', this.inputSelection.start, end);\n\n case 'deleteByCut':\n return this.updateInput('', start, end);\n\n case 'insertText':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n start,\n end\n );\n\n case 'insertFromPaste':\n return this.updateInput(\n value.substring(start, this.inputSelection.end),\n start,\n this.inputSelection.start\n );\n\n case 'insertFromDrop':\n return this.updateInput(\n value.substring(this.inputSelection.start, this.inputSelection.end),\n this.inputSelection.start,\n this.inputSelection.end\n );\n }\n }\n\n protected updateInput(part: string, start: number, finish: number) {\n const { value, end } = this.parser.replace(\n this.maskedValue,\n part,\n start,\n finish\n );\n this.maskedValue = value;\n this._value = this.parser.parse(value);\n\n this.requestUpdate();\n if (start !== this.mask.length) {\n this.emitEvent('igcInput', { detail: this.value });\n }\n this.updateComplete.then(() => this.input.setSelectionRange(end, end));\n }\n\n protected handleCut() {\n this.selection = this.inputSelection;\n }\n\n protected handleDragStart() {\n this.selection = this.inputSelection;\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 handleFocus() {\n this.hasFocus = true;\n super.handleFocus();\n\n if (this.readonly) {\n return;\n }\n\n if (!this._value) {\n this.maskedValue = this.parser.apply();\n // In case of empty value, select the whole mask\n this.updateComplete.then(() => this.select());\n }\n }\n\n protected override handleBlur() {\n this.hasFocus = false;\n this.updateMaskedValue();\n super.handleBlur();\n }\n\n protected override handleChange() {\n this.emitEvent('igcChange', { detail: this.value });\n this.invalid = !this.checkValidity();\n }\n\n protected handleInvalid() {\n this.invalid = true;\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 /** 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 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 /** 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 /**\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 /** 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 /** Selects all text within the input. */\n public select() {\n this.input.select();\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"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
interface MaskOptions {
|
|
2
|
+
format: string;
|
|
3
|
+
promptCharacter: string;
|
|
4
|
+
}
|
|
5
|
+
export declare class MaskParser {
|
|
6
|
+
protected options: MaskOptions;
|
|
7
|
+
constructor(options?: MaskOptions);
|
|
8
|
+
protected literals: Map<number, string>;
|
|
9
|
+
protected _escapedMask: string;
|
|
10
|
+
protected get literalPositions(): number[];
|
|
11
|
+
get escapedMask(): string;
|
|
12
|
+
get mask(): string;
|
|
13
|
+
set mask(value: string);
|
|
14
|
+
get prompt(): string;
|
|
15
|
+
set prompt(value: string);
|
|
16
|
+
protected getMaskLiterals(): void;
|
|
17
|
+
protected isPromptChar(char: string): boolean;
|
|
18
|
+
protected replaceCharAt(string: string, pos: number, char: string): string;
|
|
19
|
+
protected validate(char: string, maskedChar: string): boolean;
|
|
20
|
+
protected getNonLiteralPositions(mask?: string): number[];
|
|
21
|
+
protected getRequiredNonLiteralPositions(mask: string): number[];
|
|
22
|
+
replace(masked: string | undefined, value: string, start: number, end: number): {
|
|
23
|
+
value: string;
|
|
24
|
+
end: number;
|
|
25
|
+
};
|
|
26
|
+
parse(masked?: string): string;
|
|
27
|
+
isValidString(input?: string): boolean;
|
|
28
|
+
apply(input?: string): string;
|
|
29
|
+
}
|
|
30
|
+
export {};
|