@tylertech/forge 3.7.0 → 3.8.0-dev.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/custom-elements.json +366 -322
- package/dist/button/forge-button.css +3 -2
- package/dist/dialog/forge-dialog.css +3 -0
- package/dist/lib.js +23 -15
- package/dist/lib.js.map +4 -4
- package/dist/switch/forge-switch.css +1 -1
- package/dist/vscode.css-custom-data.json +20 -20
- package/dist/vscode.html-custom-data.json +23 -44
- package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js +4 -5
- package/esm/app-bar/notification-button/app-bar-notification-button.js +6 -3
- package/esm/app-bar/profile-button/app-bar-profile-button.js +1 -1
- package/esm/autocomplete/autocomplete-adapter.js +1 -1
- package/esm/avatar/avatar-constants.d.ts +1 -0
- package/esm/avatar/avatar-constants.js +1 -0
- package/esm/avatar/avatar.d.ts +1 -1
- package/esm/avatar/avatar.js +1 -1
- package/esm/badge/badge-component-delegate.js +1 -2
- package/esm/badge/badge-constants.d.ts +1 -0
- package/esm/badge/badge-constants.js +1 -0
- package/esm/badge/badge.d.ts +20 -23
- package/esm/badge/badge.js +57 -47
- package/esm/badge/index.js +3 -3
- package/esm/bottom-sheet/bottom-sheet-constants.d.ts +1 -1
- package/esm/bottom-sheet/bottom-sheet.d.ts +3 -1
- package/esm/button/button.js +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.js +1 -2
- package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +6 -6
- package/esm/button-toggle/button-toggle-group/button-toggle-group.js +6 -6
- package/esm/card/card-constants.d.ts +1 -0
- package/esm/card/card-constants.js +1 -0
- package/esm/card/card.d.ts +12 -13
- package/esm/card/card.js +25 -34
- package/esm/card/index.js +3 -3
- package/esm/checkbox/checkbox.d.ts +5 -1
- package/esm/chips/chip/chip-constants.d.ts +1 -1
- package/esm/core/delegates/base-component-delegate.d.ts +1 -1
- package/esm/core/mask/date-input-mask.d.ts +3 -3
- package/esm/core/mask/date-input-mask.js +7 -8
- package/esm/core/mask/intermediate-time-parser.d.ts +2 -2
- package/esm/core/mask/intermediate-time-parser.js +2 -3
- package/esm/core/mask/time-input-mask.d.ts +3 -3
- package/esm/core/mask/time-input-mask.js +4 -5
- package/esm/core/mixins/label/with-label-aware.d.ts +4 -1
- package/esm/core/utils/a11y-utils.d.ts +0 -8
- package/esm/core/utils/a11y-utils.js +5 -25
- package/esm/core/utils/dismissible-stack.d.ts +7 -0
- package/esm/core/utils/position-utils.d.ts +1 -2
- package/esm/core/utils/position-utils.js +7 -22
- package/esm/core/utils/utils.d.ts +8 -0
- package/esm/core/utils/utils.js +26 -1
- package/esm/date-picker/base/base-date-picker-constants.d.ts +2 -2
- package/esm/deprecated/button/deprecated-button.js +1 -1
- package/esm/dialog/dialog-core.js +2 -2
- package/esm/dialog/dialog.d.ts +2 -0
- package/esm/dialog/dialog.js +1 -1
- package/esm/expansion-panel/expansion-panel-adapter.d.ts +31 -0
- package/esm/expansion-panel/expansion-panel-adapter.js +60 -1
- package/esm/expansion-panel/expansion-panel-constants.d.ts +4 -0
- package/esm/expansion-panel/expansion-panel-constants.js +4 -1
- package/esm/expansion-panel/expansion-panel-core.d.ts +13 -1
- package/esm/expansion-panel/expansion-panel-core.js +63 -1
- package/esm/expansion-panel/expansion-panel.d.ts +9 -0
- package/esm/expansion-panel/expansion-panel.js +14 -0
- package/esm/floating-action-button/floating-action-button-constants.d.ts +1 -1
- package/esm/icon/icon-constants.d.ts +1 -1
- package/esm/icon/icon-registry.d.ts +6 -0
- package/esm/icon-button/icon-button-constants.d.ts +1 -1
- package/esm/label/label-adapter.js +1 -1
- package/esm/list/list-item/list-item.js +1 -1
- package/esm/meter/meter/meter.js +2 -1
- package/esm/meter/meter-group/meter-group.js +2 -1
- package/esm/overlay/base/base-overlay-core.d.ts +3 -3
- package/esm/overlay/base/base-overlay.d.ts +3 -3
- package/esm/overlay/base/base-overlay.js +11 -1
- package/esm/overlay/base/overlay-aware-core.d.ts +3 -3
- package/esm/overlay/base/overlay-aware-core.js +2 -1
- package/esm/overlay/overlay-adapter.d.ts +2 -2
- package/esm/overlay/overlay-adapter.js +6 -14
- package/esm/overlay/overlay-constants.d.ts +2 -5
- package/esm/overlay/overlay-constants.js +2 -23
- package/esm/overlay/overlay-core.d.ts +3 -3
- package/esm/overlay/overlay-core.js +13 -3
- package/esm/overlay/overlay.d.ts +2 -2
- package/esm/overlay/overlay.js +2 -2
- package/esm/popover/popover.js +1 -1
- package/esm/profile-card/profile-card-core.js +4 -4
- package/esm/radio/core/radio-group-manager.d.ts +2 -1
- package/esm/radio/radio/radio.d.ts +1 -0
- package/esm/split-button/split-button-constants.d.ts +2 -2
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/stepper/stepper/stepper-constants.d.ts +15 -1
- package/esm/switch/switch.d.ts +5 -1
- package/esm/switch/switch.js +1 -1
- package/esm/table/table-core.js +10 -2
- package/esm/table/table-utils.js +8 -4
- package/esm/time-picker/time-picker-constants.d.ts +2 -2
- package/esm/toast/toast-constants.d.ts +1 -1
- package/esm/tooltip/tooltip-constants.d.ts +1 -1
- package/package.json +4 -4
- package/sass/badge/badge.scss +10 -10
- package/sass/button/_core.scss +1 -0
- package/sass/calendar/_variables.scss +3 -2
- package/sass/card/card.scss +1 -1
- package/sass/core/styles/tokens/button/_tokens.scss +2 -2
- package/sass/core/styles/tokens/slider/_tokens.scss +10 -4
- package/sass/core/styles/tokens/switch/_tokens.scss +1 -1
- package/sass/dialog/dialog.scss +8 -0
- package/sass/dialog/forge-dialog.scss +4 -0
- package/sass/linear-progress/linear-progress.scss +7 -3
- package/sass/list/list-item/list-item.scss +1 -1
- package/sass/popover/popover.scss +0 -1
- package/sass/slider/_core.scss +2 -3
package/esm/button/button.js
CHANGED
|
@@ -14,7 +14,7 @@ import { BUTTON_CONSTANTS } from './button-constants';
|
|
|
14
14
|
import { ButtonCore } from './button-core';
|
|
15
15
|
import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
|
|
16
16
|
const template = '<template><div class=\"forge-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
|
|
17
|
-
const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;vertical-align:middle;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}.with-anchor{display:flex;justify-content:stretch;align-items:stretch;padding:0}::slotted(a){display:flex;align-items:center;justify-content:center;gap:var(--_button-spacing);width:100%;padding:var(--_button-padding);color:var(--_button-color);outline:0;border-radius:var(--_button-shape);text-decoration:none;--forge-icon-font-size:var(--_button-icon-size)}:host([variant=link]) ::slotted(a){position:relative;inset:auto}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where(:not([variant]),[variant=text])) .forge-button{--_button-padding-inline:var(--_button-text-padding-inline)}:host([variant=filled]) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host([variant=filled]) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=raised]) forge-state-layer{--forge-state-layer-color:var(--_button-raised-color)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor])[variant=filled][disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
|
|
17
|
+
const styles = ':host{--_button-display:var(--forge-button-display, inline-grid);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;vertical-align:middle;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-0));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);grid-auto-flow:column;align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}.with-anchor{display:flex;justify-content:stretch;align-items:stretch;padding:0}::slotted(a){display:flex;align-items:center;justify-content:center;gap:var(--_button-spacing);width:100%;padding:var(--_button-padding);color:var(--_button-color);outline:0;border-radius:var(--_button-shape);text-decoration:none;--forge-icon-font-size:var(--_button-icon-size)}:host([variant=link]) ::slotted(a){position:relative;inset:auto}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where(:not([variant]),[variant=text])) .forge-button{--_button-padding-inline:var(--_button-text-padding-inline)}:host([variant=filled]) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host([variant=filled]) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=raised]) forge-state-layer{--forge-state-layer-color:var(--_button-raised-color)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor])[variant=filled][disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-button
|
|
20
20
|
*
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { getShadowElement } from '@tylertech/forge-core';
|
|
7
|
-
import { getFormState, getFormValue, getValidationMessage, internals
|
|
7
|
+
import { getFormState, getFormValue, getValidationMessage, internals } from '../../constants';
|
|
8
8
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
9
9
|
import { BUTTON_TOGGLE_CONSTANTS } from '../button-toggle/button-toggle-constants';
|
|
10
10
|
import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
|
|
@@ -31,7 +31,6 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
|
|
|
31
31
|
toggles.filter(t => t !== selectedToggle).forEach(t => (t.selected = false));
|
|
32
32
|
}
|
|
33
33
|
setDisabled(value) {
|
|
34
|
-
this._component[isFocusable] = !value;
|
|
35
34
|
const toggles = this._getButtonToggleElements();
|
|
36
35
|
toggles.forEach(t => (t.disabled = value));
|
|
37
36
|
}
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { getFormState, getFormValue } from '../../constants';
|
|
7
|
+
import { BaseComponent } from '../../core/base/base-component';
|
|
6
8
|
import { IWithFormAssociation } from '../../core/mixins/form/with-form-associated';
|
|
7
|
-
import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
|
|
8
|
-
import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
|
|
9
9
|
import { IWithFormValidity } from '../../core/mixins/form/with-form-validity';
|
|
10
|
-
import { BaseComponent } from '../../core/base/base-component';
|
|
11
|
-
import { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
|
|
12
|
-
import { getFormState, getFormValue } from '../../constants';
|
|
13
|
-
import { FormValue, FormRestoreState, FormRestoreReason } from '../../core/utils/form-utils';
|
|
14
10
|
import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
11
|
+
import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
|
|
12
|
+
import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
|
|
13
|
+
import { FormRestoreReason, FormRestoreState, FormValue } from '../../core/utils/form-utils';
|
|
14
|
+
import { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
|
|
15
15
|
export interface IButtonToggleGroupComponent extends IWithLabelAwareness, IWithFormAssociation, IWithFormValidity, IWithElementInternals, IWithDefaultAria {
|
|
16
16
|
value: any;
|
|
17
17
|
outlined: boolean;
|
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
|
-
import { attachShadowTemplate, coerceBoolean,
|
|
7
|
+
import { attachShadowTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
|
|
8
|
+
import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
|
|
9
|
+
import { BaseComponent } from '../../core/base/base-component';
|
|
8
10
|
import { WithFormAssociation } from '../../core/mixins/form/with-form-associated';
|
|
9
|
-
import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
|
|
10
|
-
import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
|
|
11
11
|
import { WithFormValidity } from '../../core/mixins/form/with-form-validity';
|
|
12
|
-
import {
|
|
12
|
+
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
13
|
+
import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
|
|
14
|
+
import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
|
|
13
15
|
import { ButtonToggleComponent } from '../button-toggle/button-toggle';
|
|
14
16
|
import { ButtonToggleGroupAdapter } from './button-toggle-group-adapter';
|
|
15
17
|
import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
|
|
16
18
|
import { ButtonToggleGroupCore } from './button-toggle-group-core';
|
|
17
|
-
import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
|
|
18
|
-
import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
|
|
19
19
|
const template = '<template><div class=\"forge-button-toggle-group\" part=\"root\"><slot></slot></div></template>';
|
|
20
20
|
const styles = ':host{--_button-toggle-group-display:var(--forge-button-toggle-group-display, inline-flex)}:host{display:var(--_button-toggle-group-display)}:host([hidden]){display:none}.forge-button-toggle-group{--_button-toggle-group-gap:var(--forge-button-toggle-group-gap, 4px);--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 4px);--_button-toggle-group-padding-block:var(--forge-button-toggle-group-padding-block, var(--_button-toggle-group-padding));--_button-toggle-group-padding-inline:var(--forge-button-toggle-group-padding-inline, var(--_button-toggle-group-padding));--_button-toggle-group-height:var(--forge-button-toggle-group-height, var(--forge-button-height, 36px));--_button-toggle-group-dense-height:var(--forge-button-toggle-group-dense-height, var(--forge-button-dense-height, 24px));--_button-toggle-group-outline-width:var(--forge-button-toggle-group-outline-width, var(--forge-border-thin, 1px));--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, solid);--_button-toggle-group-outline-color:var(--forge-button-toggle-group-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_button-toggle-group-outline-color-active:var(--forge-button-toggle-group-outline-color-active, var(--forge-theme-outline-medium, #757575));--_button-toggle-group-shape:var(--forge-button-toggle-group-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-toggle-group-shape-start-start:var(--forge-button-toggle-group-shape-start-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-start-end:var(--forge-button-toggle-group-shape-start-end, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-start:var(--forge-button-toggle-group-shape-end-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-end:var(--forge-button-toggle-group-shape-end-end, var(--_button-toggle-group-shape));--_button-toggle-group-transition-duration:var(--forge-button-toggle-group-transition-duration, var(--forge-button-toggle-transition-duration, var(--forge-animation-duration-short3, 150ms)));--_button-toggle-group-transition-timing:var(--forge-button-toggle-group-transition-timing, var(--forge-button-toggle-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))))}.forge-button-toggle-group{display:flex;align-items:center;gap:var(--_button-toggle-group-gap);height:var(--_button-toggle-group-height);border-width:var(--_button-toggle-group-outline-width);border-style:var(--_button-toggle-group-outline-style);border-color:var(--_button-toggle-group-outline-color);border-start-start-radius:var(--_button-toggle-group-shape-start-start);border-start-end-radius:var(--_button-toggle-group-shape-start-end);border-end-start-radius:var(--_button-toggle-group-shape-end-start);border-end-end-radius:var(--_button-toggle-group-shape-end-end);padding-block:var(--_button-toggle-group-padding-block);padding-inline:var(--_button-toggle-group-padding-inline);transition-property:border-color;transition-duration:var(--_button-toggle-group-transition-duration);transition-timing-function:var(--_button-toggle-group-transition-timing)}:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:focus-within,:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:hover{--_button-toggle-group-outline-color:var(--_button-toggle-group-outline-color-active)}:host([no-outline]) .forge-button-toggle-group{--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 0);--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, none)}:host(:is([dense],[density=dense])) .forge-button-toggle-group{--_button-toggle-group-height:var(--_button-toggle-group-dense-height)}:host([vertical]) .forge-button-toggle-group{height:auto;flex-direction:column}:host([vertical]) ::slotted(forge-button-toggle){height:var(--_button-toggle-group-height);width:100%}:host([vertical]) ::slotted(forge-divider:not([vertical])){margin-inline:4px;width:100%}::slotted(forge-divider[vertical]){margin-block:4px}:host([stretch]){display:block}:host([stretch]) .forge-button-toggle-group{width:100%}:host(:not([vertical])[stretch]) ::slotted(forge-button-toggle){flex:1}:host([theme=primary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-primary-container, #d1d5ed);--forge-button-toggle-selected-color:var(--forge-theme-on-primary-container, #222c62);--forge-button-toggle-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-secondary-container, #fff0c3);--forge-button-toggle-selected-color:var(--forge-theme-on-secondary-container, #8a6804);--forge-button-toggle-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=success]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-success-container, #cde0ce);--forge-button-toggle-selected-color:var(--forge-theme-on-success-container, #19441b);--forge-button-toggle-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=error]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-error-container, #ecc2c9);--forge-button-toggle-selected-color:var(--forge-theme-on-error-container, #5f0011);--forge-button-toggle-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=warning]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-warning-container, #f4d3c2);--forge-button-toggle-selected-color:var(--forge-theme-on-warning-container, #712700);--forge-button-toggle-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=info]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-info-container, #c7daf0);--forge-button-toggle-selected-color:var(--forge-theme-on-info-container, #0b3768);--forge-button-toggle-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
|
|
21
21
|
/**
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
|
|
6
7
|
export declare const CARD_CONSTANTS: {
|
|
7
8
|
elementName: "forge-card";
|
|
8
9
|
observedAttributes: {
|
|
@@ -11,6 +11,7 @@ const observedAttributes = {
|
|
|
11
11
|
const attributes = {
|
|
12
12
|
...observedAttributes
|
|
13
13
|
};
|
|
14
|
+
/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
|
|
14
15
|
export const CARD_CONSTANTS = {
|
|
15
16
|
elementName,
|
|
16
17
|
observedAttributes,
|
package/esm/card/card.d.ts
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
7
|
-
export interface ICardComponent extends
|
|
6
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
7
|
+
export interface ICardComponent extends LitElement {
|
|
8
8
|
raised: boolean;
|
|
9
9
|
}
|
|
10
10
|
declare global {
|
|
@@ -12,14 +12,10 @@ declare global {
|
|
|
12
12
|
'forge-card': ICardComponent;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
+
export declare const CARD_TAG_NAME: keyof HTMLElementTagNameMap;
|
|
15
16
|
/**
|
|
16
17
|
* @tag forge-card
|
|
17
18
|
*
|
|
18
|
-
* @summary Cards are used to group related information and actions about a single subject.
|
|
19
|
-
*
|
|
20
|
-
* @property {boolean} [raised=false] - Whether the card has elevation or not.
|
|
21
|
-
*
|
|
22
|
-
* @attribute {boolean} [raised=false] - Whether the card has elevation or not.
|
|
23
19
|
* @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
|
|
24
20
|
*
|
|
25
21
|
* @cssproperty --forge-card-background - The background color of the card.
|
|
@@ -37,14 +33,17 @@ declare global {
|
|
|
37
33
|
*
|
|
38
34
|
* @csspart root - The root container element.
|
|
39
35
|
*
|
|
36
|
+
* @state raised - The state of the card when raised.
|
|
37
|
+
*
|
|
40
38
|
* @cssclass forge-card - The card container element _(required)_.
|
|
41
39
|
* @cssclass forge-card--raised - The card container element when raised _(required)_.
|
|
42
40
|
*/
|
|
43
|
-
export declare class CardComponent extends
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
export declare class CardComponent extends LitElement implements ICardComponent {
|
|
42
|
+
#private;
|
|
43
|
+
static styles: import("lit").CSSResult;
|
|
44
|
+
/** Whether the card has elevation or not. */
|
|
45
|
+
raised: boolean;
|
|
46
46
|
constructor();
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
set raised(value: boolean);
|
|
47
|
+
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
48
|
+
render(): TemplateResult;
|
|
50
49
|
}
|
package/esm/card/card.js
CHANGED
|
@@ -3,20 +3,16 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host([raised]) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
|
|
6
|
+
var _CardComponent_internals;
|
|
7
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
|
|
8
|
+
import { html, LitElement, unsafeCSS } from 'lit';
|
|
9
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
10
|
+
import { toggleState } from '../core/utils/utils';
|
|
11
|
+
const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host(:where([raised],:state(raised))) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
|
|
12
|
+
export const CARD_TAG_NAME = 'forge-card';
|
|
12
13
|
/**
|
|
13
14
|
* @tag forge-card
|
|
14
15
|
*
|
|
15
|
-
* @summary Cards are used to group related information and actions about a single subject.
|
|
16
|
-
*
|
|
17
|
-
* @property {boolean} [raised=false] - Whether the card has elevation or not.
|
|
18
|
-
*
|
|
19
|
-
* @attribute {boolean} [raised=false] - Whether the card has elevation or not.
|
|
20
16
|
* @attribute {boolean} [no-padding=false] - Removes the default padding from the card.
|
|
21
17
|
*
|
|
22
18
|
* @cssproperty --forge-card-background - The background color of the card.
|
|
@@ -34,39 +30,34 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_
|
|
|
34
30
|
*
|
|
35
31
|
* @csspart root - The root container element.
|
|
36
32
|
*
|
|
33
|
+
* @state raised - The state of the card when raised.
|
|
34
|
+
*
|
|
37
35
|
* @cssclass forge-card - The card container element _(required)_.
|
|
38
36
|
* @cssclass forge-card--raised - The card container element when raised _(required)_.
|
|
39
37
|
*/
|
|
40
|
-
let CardComponent = class CardComponent extends
|
|
41
|
-
static get observedAttributes() {
|
|
42
|
-
return Object.values(CARD_CONSTANTS.observedAttributes);
|
|
43
|
-
}
|
|
38
|
+
let CardComponent = class CardComponent extends LitElement {
|
|
44
39
|
constructor() {
|
|
45
40
|
super();
|
|
46
|
-
this
|
|
47
|
-
|
|
41
|
+
_CardComponent_internals.set(this, void 0);
|
|
42
|
+
/** Whether the card has elevation or not. */
|
|
43
|
+
this.raised = false; // TODO: remove reflect in v4 in favor of :state
|
|
44
|
+
__classPrivateFieldSet(this, _CardComponent_internals, this.attachInternals(), "f");
|
|
48
45
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
this.raised = coerceBoolean(newValue);
|
|
53
|
-
break;
|
|
46
|
+
willUpdate(changedProperties) {
|
|
47
|
+
if (changedProperties.has('raised')) {
|
|
48
|
+
toggleState(__classPrivateFieldGet(this, _CardComponent_internals, "f"), 'raised', this.raised);
|
|
54
49
|
}
|
|
55
50
|
}
|
|
56
|
-
|
|
57
|
-
return
|
|
58
|
-
}
|
|
59
|
-
set raised(value) {
|
|
60
|
-
value = Boolean(value);
|
|
61
|
-
if (this._raised !== value) {
|
|
62
|
-
this._raised = value;
|
|
63
|
-
this.toggleAttribute(CARD_CONSTANTS.attributes.RAISED, this._raised);
|
|
64
|
-
}
|
|
51
|
+
render() {
|
|
52
|
+
return html `<div class="forge-card" part="root"><slot></slot></div>`;
|
|
65
53
|
}
|
|
66
54
|
};
|
|
55
|
+
_CardComponent_internals = new WeakMap();
|
|
56
|
+
CardComponent.styles = unsafeCSS(styles);
|
|
57
|
+
__decorate([
|
|
58
|
+
property({ type: Boolean, reflect: true })
|
|
59
|
+
], CardComponent.prototype, "raised", void 0);
|
|
67
60
|
CardComponent = __decorate([
|
|
68
|
-
customElement(
|
|
69
|
-
name: CARD_CONSTANTS.elementName
|
|
70
|
-
})
|
|
61
|
+
customElement(CARD_TAG_NAME)
|
|
71
62
|
], CardComponent);
|
|
72
63
|
export { CardComponent };
|
package/esm/card/index.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
7
|
-
import { CardComponent } from './card';
|
|
6
|
+
import { tryDefine } from '@tylertech/forge-core';
|
|
7
|
+
import { CARD_TAG_NAME, CardComponent } from './card';
|
|
8
8
|
export * from './card-constants';
|
|
9
9
|
export * from './card';
|
|
10
10
|
export function defineCardComponent() {
|
|
11
|
-
|
|
11
|
+
tryDefine(CARD_TAG_NAME, CardComponent);
|
|
12
12
|
}
|
|
@@ -99,7 +99,11 @@ export declare class CheckboxComponent extends CheckboxComponent_base implements
|
|
|
99
99
|
labelClickedCallback(): void;
|
|
100
100
|
labelChangedCallback(value: string | null): void;
|
|
101
101
|
/** @ignore */
|
|
102
|
-
setFormValue(value: FormValue
|
|
102
|
+
setFormValue(value: (FormValue & {
|
|
103
|
+
[key: string]: any;
|
|
104
|
+
}) | null, state?: (FormValue & {
|
|
105
|
+
[key: string]: any;
|
|
106
|
+
}) | null | undefined): void;
|
|
103
107
|
/**
|
|
104
108
|
* Gets/sets whether the checkbox is checked.
|
|
105
109
|
* @default false
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export type BaseComponentDelegateProps<T extends HTMLElement> = Partial<T>;
|
|
7
7
|
export interface IBaseComponentDelegateOptions {
|
|
8
|
-
style?: Partial<CSSStyleDeclaration>
|
|
8
|
+
style?: Partial<CSSStyleDeclaration> & {
|
|
9
9
|
[key: string]: string;
|
|
10
10
|
};
|
|
11
11
|
attributes?: {
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import
|
|
6
|
+
import { InputMask, type AppendFlags, type FactoryArg, type Masked } from 'imask';
|
|
7
7
|
export interface IDateInputMaskOptions {
|
|
8
8
|
showMaskFormat?: boolean;
|
|
9
9
|
pattern?: string;
|
|
10
10
|
useBlockCharPlaceholder?: boolean;
|
|
11
|
-
prepareCallback?: (value: string, masked: Masked<string>, flags:
|
|
11
|
+
prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
|
|
12
12
|
onChange?: (value: string) => void;
|
|
13
13
|
}
|
|
14
14
|
export declare const DEFAULT_DATE_MASK = "0`0{/}`0`0{/}`0`0`0`0";
|
|
@@ -20,7 +20,7 @@ export declare class DateInputMask {
|
|
|
20
20
|
private _acceptListener;
|
|
21
21
|
constructor(_element: HTMLInputElement, _options?: IDateInputMaskOptions);
|
|
22
22
|
destroy(): void;
|
|
23
|
-
resolve(value: string):
|
|
23
|
+
resolve(value: string): void;
|
|
24
24
|
private _onAccept;
|
|
25
25
|
private get _isDefaultMask();
|
|
26
26
|
private _createOptions;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { InputMask, createMask, MaskedRange } from 'imask';
|
|
7
6
|
import { isNumeric } from '@tylertech/forge-core';
|
|
7
|
+
import { InputMask, MaskedRange, createMask } from 'imask';
|
|
8
8
|
export const DEFAULT_DATE_MASK = '0`0{/}`0`0{/}`0`0`0`0';
|
|
9
9
|
export class DateInputMask {
|
|
10
10
|
constructor(_element, _options = {}) {
|
|
@@ -25,7 +25,7 @@ export class DateInputMask {
|
|
|
25
25
|
}
|
|
26
26
|
resolve(value) {
|
|
27
27
|
const masked = createMask(this._maskOptions);
|
|
28
|
-
|
|
28
|
+
masked.resolve(value);
|
|
29
29
|
}
|
|
30
30
|
_onAccept() {
|
|
31
31
|
if (typeof this._options.onChange === 'function') {
|
|
@@ -36,11 +36,11 @@ export class DateInputMask {
|
|
|
36
36
|
return this._options.pattern === DEFAULT_DATE_MASK;
|
|
37
37
|
}
|
|
38
38
|
_createOptions() {
|
|
39
|
-
|
|
39
|
+
return {
|
|
40
40
|
mask: this._options.pattern || DEFAULT_DATE_MASK,
|
|
41
41
|
lazy: this._options.showMaskFormat === undefined ? false : !this._options.showMaskFormat,
|
|
42
42
|
overwrite: true,
|
|
43
|
-
|
|
43
|
+
prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
|
|
44
44
|
blocks: {
|
|
45
45
|
MM: {
|
|
46
46
|
mask: MaskedRange,
|
|
@@ -65,7 +65,6 @@ export class DateInputMask {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
-
return options;
|
|
69
68
|
}
|
|
70
69
|
_prepare(value, masked, flags, maskInstance) {
|
|
71
70
|
if (typeof this._options.prepareCallback === 'function') {
|
|
@@ -77,8 +76,8 @@ export class DateInputMask {
|
|
|
77
76
|
if (!flags.input || !value.length || !maskInstance) {
|
|
78
77
|
return value;
|
|
79
78
|
}
|
|
80
|
-
|
|
81
|
-
const isAllSelected =
|
|
79
|
+
const maskInstanceWithSelection = maskInstance;
|
|
80
|
+
const isAllSelected = maskInstanceWithSelection._selection && maskInstanceWithSelection._selection.end === 10;
|
|
82
81
|
const currentValue = isAllSelected ? '' : maskInstance.value;
|
|
83
82
|
if (!isNumeric(value)) {
|
|
84
83
|
// Before we ignore this character let's do some checks for common scenarios where the user enters a slash to help with coercion
|
|
@@ -135,7 +134,7 @@ export class DateInputMask {
|
|
|
135
134
|
}
|
|
136
135
|
_setMaskedValueAdjusted(value, position) {
|
|
137
136
|
this._mask.unmaskedValue = value;
|
|
138
|
-
|
|
137
|
+
this._mask.updateCursor(this._mask.cursorPos + position);
|
|
139
138
|
}
|
|
140
139
|
updateMask() {
|
|
141
140
|
this._mask.updateValue();
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { InputMask } from 'imask';
|
|
6
|
+
import { InputMask, type FactoryArg } from 'imask';
|
|
7
7
|
import { TimeSegmentType } from './time-segment-parser';
|
|
8
8
|
export declare const SEGMENT_CURSOR_POSITION: {
|
|
9
9
|
'hours-start': number;
|
|
@@ -19,7 +19,7 @@ export declare class IntermediateTimeParser {
|
|
|
19
19
|
private _char;
|
|
20
20
|
private _mask;
|
|
21
21
|
private _segmentParser;
|
|
22
|
-
constructor(_char: string, _mask: InputMask<
|
|
22
|
+
constructor(_char: string, _mask: InputMask<FactoryArg>);
|
|
23
23
|
get value(): string;
|
|
24
24
|
get numChar(): number;
|
|
25
25
|
get asPaddedChar(): string;
|
|
@@ -39,8 +39,7 @@ export class IntermediateTimeParser {
|
|
|
39
39
|
return value;
|
|
40
40
|
}
|
|
41
41
|
get isAllSelected() {
|
|
42
|
-
|
|
43
|
-
const { start, end } = this._mask['_selection'];
|
|
42
|
+
const { start, end } = this._mask._selection;
|
|
44
43
|
return start === 0 && end > 0 && end === this._mask.value.length;
|
|
45
44
|
}
|
|
46
45
|
/** Determines if this is the first non-zero hours character being entered. */
|
|
@@ -100,7 +99,7 @@ export class IntermediateTimeParser {
|
|
|
100
99
|
applyValue(value, cursorPos) {
|
|
101
100
|
this._mask.unmaskedValue = value;
|
|
102
101
|
if (cursorPos !== undefined) {
|
|
103
|
-
|
|
102
|
+
this._mask.updateCursor(SEGMENT_CURSOR_POSITION[cursorPos]);
|
|
104
103
|
}
|
|
105
104
|
}
|
|
106
105
|
}
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import
|
|
6
|
+
import { FactoryArg, InputMask, type AppendFlags, type Masked } from 'imask';
|
|
7
7
|
export interface ITimeInputMaskOptions {
|
|
8
8
|
showMaskFormat?: boolean;
|
|
9
9
|
use24HourTime?: boolean;
|
|
10
10
|
showSeconds?: boolean;
|
|
11
11
|
onChange?: (value: string) => void;
|
|
12
|
-
prepareCallback?: (value: string, masked: Masked<string>, flags:
|
|
12
|
+
prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
|
|
13
13
|
}
|
|
14
14
|
export declare const TWELVE_HOUR_TIME_MASK = "0`0{:}`0`0 `AM";
|
|
15
15
|
export declare const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = "0`0{:}`0`0{:}`0`0 `AM";
|
|
@@ -23,7 +23,7 @@ export declare class TimeInputMask {
|
|
|
23
23
|
private _acceptListener;
|
|
24
24
|
constructor(_element: HTMLInputElement, _options?: ITimeInputMaskOptions);
|
|
25
25
|
destroy(): void;
|
|
26
|
-
resolve(value: string):
|
|
26
|
+
resolve(value: string): void;
|
|
27
27
|
update(): void;
|
|
28
28
|
private _onAccept;
|
|
29
29
|
private _createOptions;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { isNumeric } from '@tylertech/forge-core';
|
|
7
|
-
import {
|
|
7
|
+
import { InputMask, MaskedEnum, createMask } from 'imask';
|
|
8
8
|
import { IntermediateTimeParser } from './intermediate-time-parser';
|
|
9
9
|
export const TWELVE_HOUR_TIME_MASK = '0`0{:}`0`0 `AM';
|
|
10
10
|
export const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = '0`0{:}`0`0{:}`0`0 `AM';
|
|
@@ -29,7 +29,7 @@ export class TimeInputMask {
|
|
|
29
29
|
}
|
|
30
30
|
resolve(value) {
|
|
31
31
|
const masked = createMask(this._maskOptions);
|
|
32
|
-
|
|
32
|
+
masked.resolve(value);
|
|
33
33
|
}
|
|
34
34
|
update() {
|
|
35
35
|
this._mask.updateValue();
|
|
@@ -44,7 +44,7 @@ export class TimeInputMask {
|
|
|
44
44
|
mask: this._getMaskFormat(),
|
|
45
45
|
overwrite: true,
|
|
46
46
|
lazy: !this._options.showMaskFormat,
|
|
47
|
-
|
|
47
|
+
prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
|
|
48
48
|
blocks: {
|
|
49
49
|
A: {
|
|
50
50
|
mask: MaskedEnum,
|
|
@@ -66,8 +66,7 @@ export class TimeInputMask {
|
|
|
66
66
|
}
|
|
67
67
|
// Whenever we paste text we don't care to send it through our custom prepare logic,
|
|
68
68
|
// so just return the character being processed.
|
|
69
|
-
|
|
70
|
-
if (maskInstance['_inputEvent']?.inputType !== 'insertText') {
|
|
69
|
+
if (maskInstance._inputEvent?.inputType !== 'insertText') {
|
|
71
70
|
return value;
|
|
72
71
|
}
|
|
73
72
|
return this._prepareDefault(value, maskInstance).toUpperCase();
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { AbstractConstructor, MixinBase } from '../../../constants';
|
|
6
|
+
import { AbstractConstructor, MixinBase, forgeLabelRef, updateTarget } from '../../../constants';
|
|
7
7
|
import { IBaseComponent } from '../../base/base-component';
|
|
8
8
|
/**
|
|
9
9
|
* An element that can be associated with a Forge label component.
|
|
@@ -20,6 +20,9 @@ export interface IWithLabelAwareness extends IBaseComponent {
|
|
|
20
20
|
* A callback for when the associated label is clicked.
|
|
21
21
|
*/
|
|
22
22
|
labelClickedCallback?(): void;
|
|
23
|
+
[forgeLabelRef]?: {
|
|
24
|
+
[updateTarget](target: HTMLElement): boolean;
|
|
25
|
+
};
|
|
23
26
|
}
|
|
24
27
|
export declare abstract class WithLabelAwarenessContract {
|
|
25
28
|
connectedCallback(): void;
|
|
@@ -135,11 +135,3 @@ export type DefaultAriaOptions = {
|
|
|
135
135
|
* }
|
|
136
136
|
*/
|
|
137
137
|
export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;
|
|
138
|
-
/**
|
|
139
|
-
* Adds or removes a state from an element's custom state set.
|
|
140
|
-
*
|
|
141
|
-
* @param internals - The element's internals object.
|
|
142
|
-
* @param state - The name of the custom state to toggle.
|
|
143
|
-
* @param value - Whether to add or remove the state.
|
|
144
|
-
*/
|
|
145
|
-
export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;
|