@tylertech/forge 2.16.6 → 2.18.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 +152 -0
- package/dist/esm/app-bar/help-button/index.js +1 -1
- package/dist/esm/app-bar/index.js +1 -1
- package/dist/esm/app-bar/profile-button/index.js +1 -1
- package/dist/esm/autocomplete/index.js +1 -1
- package/dist/esm/calendar/calendar-dropdown/index.js +1 -1
- package/dist/esm/calendar/index.js +1 -1
- package/dist/esm/chip-field/index.js +1 -1
- package/dist/esm/chunks/chunk.3C44DXZ2.js +7 -0
- package/dist/esm/chunks/chunk.3C44DXZ2.js.map +7 -0
- package/dist/esm/chunks/{chunk.CN4XKIQI.js → chunk.44WDRTRR.js} +2 -2
- package/dist/esm/chunks/chunk.6BTPAMJ7.js +7 -0
- package/dist/esm/chunks/chunk.6BTPAMJ7.js.map +7 -0
- package/dist/esm/chunks/chunk.BINM3NUA.js +7 -0
- package/dist/esm/chunks/chunk.BINM3NUA.js.map +7 -0
- package/dist/esm/chunks/{chunk.KRUEPHLG.js → chunk.BKNYDA4V.js} +2 -2
- package/dist/esm/chunks/{chunk.BTMBIAL2.js → chunk.CR2XZYFM.js} +2 -2
- package/dist/esm/chunks/{chunk.BTMBIAL2.js.map → chunk.CR2XZYFM.js.map} +2 -2
- package/dist/esm/chunks/{chunk.VUOTKGLB.js → chunk.FBHCNPUL.js} +2 -2
- package/dist/esm/chunks/{chunk.VUOTKGLB.js.map → chunk.FBHCNPUL.js.map} +2 -2
- package/dist/esm/chunks/chunk.H5XOBZLW.js +7 -0
- package/dist/esm/chunks/chunk.H5XOBZLW.js.map +7 -0
- package/dist/esm/chunks/{chunk.MWHVRJW5.js → chunk.HHDEJSOK.js} +2 -2
- package/dist/esm/chunks/{chunk.D5OLAPHE.js → chunk.JPVIN4NH.js} +2 -2
- package/dist/esm/chunks/{chunk.PW7IGEHF.js → chunk.KIBLZSFZ.js} +2 -2
- package/dist/esm/chunks/chunk.KQK2XX5H.js +7 -0
- package/dist/esm/chunks/chunk.KQK2XX5H.js.map +7 -0
- package/dist/esm/chunks/{chunk.PFYLJBUV.js → chunk.L4CNH27W.js} +2 -2
- package/dist/esm/chunks/{chunk.PFYLJBUV.js.map → chunk.L4CNH27W.js.map} +2 -2
- package/dist/esm/chunks/{chunk.JRUIOKFS.js → chunk.MCIDFQOG.js} +2 -2
- package/dist/esm/chunks/{chunk.NEFQWOLN.js → chunk.OYIW3AI6.js} +2 -2
- package/dist/esm/chunks/{chunk.QAWXAPHR.js → chunk.QJ7LOIUK.js} +2 -2
- package/dist/esm/chunks/chunk.RW6UJSE4.js +7 -0
- package/dist/esm/chunks/{chunk.G4DG233F.js.map → chunk.RW6UJSE4.js.map} +2 -2
- package/dist/esm/chunks/{chunk.UVW3YDEX.js → chunk.WO32MVS4.js} +2 -2
- package/dist/esm/chunks/{chunk.UVW3YDEX.js.map → chunk.WO32MVS4.js.map} +1 -1
- package/dist/esm/chunks/{chunk.VNLVFGQ2.js → chunk.WRV4KYM5.js} +2 -2
- package/dist/esm/chunks/{chunk.VNLVFGQ2.js.map → chunk.WRV4KYM5.js.map} +2 -2
- package/dist/esm/chunks/{chunk.EAGRODVX.js → chunk.WVRUVLT4.js} +2 -2
- package/dist/esm/chunks/{chunk.HRNLQ7GB.js → chunk.XNCXVZJA.js} +2 -2
- package/dist/esm/chunks/{chunk.6CO3CIUY.js → chunk.Y7N4KA4U.js} +2 -2
- package/dist/esm/chunks/{chunk.P4Z7NC6O.js → chunk.Z7KJ4SA5.js} +2 -2
- package/dist/esm/chunks/chunk.ZPWB74RA.js +7 -0
- package/dist/esm/chunks/chunk.ZPWB74RA.js.map +7 -0
- package/dist/esm/date-picker/index.js +1 -1
- package/dist/esm/date-range-picker/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/keyboard-shortcut/index.js +1 -1
- package/dist/esm/list-dropdown/index.js +1 -1
- package/dist/esm/menu/index.js +1 -1
- package/dist/esm/paginator/index.js +1 -1
- package/dist/esm/popup/index.js +1 -1
- package/dist/esm/select/core/index.js +1 -1
- package/dist/esm/select/index.js +1 -1
- package/dist/esm/select/option/index.js +1 -1
- package/dist/esm/select/select/index.js +1 -1
- package/dist/esm/select/select-dropdown/index.js +1 -1
- package/dist/esm/split-view/index.js +1 -1
- package/dist/esm/split-view/split-view/index.js +1 -1
- package/dist/esm/split-view/split-view-panel/index.js +1 -1
- package/dist/esm/time-picker/index.js +1 -1
- package/esm/autocomplete/autocomplete-constants.d.ts +3 -0
- package/esm/autocomplete/autocomplete-foundation.d.ts +3 -1
- package/esm/autocomplete/autocomplete-foundation.js +14 -0
- package/esm/autocomplete/autocomplete.d.ts +7 -1
- package/esm/autocomplete/autocomplete.js +7 -0
- package/esm/calendar/calendar-foundation.js +6 -0
- package/esm/chip-field/chip-field-adapter.js +1 -1
- package/esm/chip-field/chip-field.js +2 -2
- package/esm/date-picker/base/base-date-picker-foundation.js +1 -1
- package/esm/date-range-picker/date-range-picker-foundation.js +2 -2
- package/esm/keyboard-shortcut/keyboard-shortcut-constants.d.ts +1 -0
- package/esm/keyboard-shortcut/keyboard-shortcut-foundation.d.ts +6 -0
- package/esm/keyboard-shortcut/keyboard-shortcut-foundation.js +9 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.d.ts +4 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.js +3 -0
- package/esm/list-dropdown/list-dropdown-constants.d.ts +4 -0
- package/esm/list-dropdown/list-dropdown-utils.js +14 -3
- package/esm/popup/popup-adapter.d.ts +3 -1
- package/esm/popup/popup-adapter.js +3 -0
- package/esm/popup/popup-foundation.js +5 -3
- package/esm/popup/popup.d.ts +4 -1
- package/esm/select/core/base-select-adapter.js +3 -0
- package/esm/select/option/option-constants.d.ts +1 -0
- package/esm/select/option/option-constants.js +1 -0
- package/esm/select/option/option-foundation.d.ts +13 -0
- package/esm/select/option/option-foundation.js +28 -0
- package/esm/select/option/option.d.ts +7 -0
- package/esm/select/option/option.js +13 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/time-picker/time-picker-foundation.js +3 -3
- package/package.json +1 -1
- package/styles/chip-field/_base.scss +1 -0
- package/styles/chip-field/_selector.scss +2 -2
- package/dist/esm/chunks/chunk.7GCT4NUC.js +0 -7
- package/dist/esm/chunks/chunk.7GCT4NUC.js.map +0 -7
- package/dist/esm/chunks/chunk.A4UN74PV.js +0 -7
- package/dist/esm/chunks/chunk.A4UN74PV.js.map +0 -7
- package/dist/esm/chunks/chunk.FFVZ6JMP.js +0 -7
- package/dist/esm/chunks/chunk.FFVZ6JMP.js.map +0 -7
- package/dist/esm/chunks/chunk.G4DG233F.js +0 -7
- package/dist/esm/chunks/chunk.IMEODSRH.js +0 -7
- package/dist/esm/chunks/chunk.IMEODSRH.js.map +0 -7
- package/dist/esm/chunks/chunk.ROQGMLH3.js +0 -7
- package/dist/esm/chunks/chunk.ROQGMLH3.js.map +0 -7
- package/dist/esm/chunks/chunk.XMAKEISF.js +0 -7
- package/dist/esm/chunks/chunk.XMAKEISF.js.map +0 -7
- /package/dist/esm/chunks/{chunk.CN4XKIQI.js.map → chunk.44WDRTRR.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.KRUEPHLG.js.map → chunk.BKNYDA4V.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.MWHVRJW5.js.map → chunk.HHDEJSOK.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.D5OLAPHE.js.map → chunk.JPVIN4NH.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.PW7IGEHF.js.map → chunk.KIBLZSFZ.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.JRUIOKFS.js.map → chunk.MCIDFQOG.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.NEFQWOLN.js.map → chunk.OYIW3AI6.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.QAWXAPHR.js.map → chunk.QJ7LOIUK.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.EAGRODVX.js.map → chunk.WVRUVLT4.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.HRNLQ7GB.js.map → chunk.XNCXVZJA.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.6CO3CIUY.js.map → chunk.Y7N4KA4U.js.map} +0 -0
- /package/dist/esm/chunks/{chunk.P4Z7NC6O.js.map → chunk.Z7KJ4SA5.js.map} +0 -0
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { IListDropdownAware, ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
|
|
7
|
-
import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
|
|
7
|
+
import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteForceFilterOptions, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
|
|
8
8
|
export interface IAutocompleteComponent extends IListDropdownAware {
|
|
9
9
|
mode: `${AutocompleteMode}`;
|
|
10
10
|
multiple: boolean;
|
|
@@ -26,6 +26,7 @@ export interface IAutocompleteComponent extends IListDropdownAware {
|
|
|
26
26
|
appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
|
|
27
27
|
openDropdown(): void;
|
|
28
28
|
closeDropdown(): void;
|
|
29
|
+
forceFilter(opts?: IAutocompleteForceFilterOptions): void;
|
|
29
30
|
}
|
|
30
31
|
declare global {
|
|
31
32
|
interface HTMLElementTagNameMap {
|
|
@@ -93,4 +94,9 @@ export declare class AutocompleteComponent extends ListDropdownAware implements
|
|
|
93
94
|
openDropdown(): void;
|
|
94
95
|
/** Closes the dropdown. */
|
|
95
96
|
closeDropdown(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Forces the filter callback to be executed to update the current selection state with new options.
|
|
99
|
+
* @param opts
|
|
100
|
+
*/
|
|
101
|
+
forceFilter(opts?: IAutocompleteForceFilterOptions): void;
|
|
96
102
|
}
|
|
@@ -108,6 +108,13 @@ let AutocompleteComponent = class AutocompleteComponent extends ListDropdownAwar
|
|
|
108
108
|
closeDropdown() {
|
|
109
109
|
this.open = false;
|
|
110
110
|
}
|
|
111
|
+
/**
|
|
112
|
+
* Forces the filter callback to be executed to update the current selection state with new options.
|
|
113
|
+
* @param opts
|
|
114
|
+
*/
|
|
115
|
+
forceFilter(opts = { preserveValue: false }) {
|
|
116
|
+
this._foundation.forceFilter(opts);
|
|
117
|
+
}
|
|
111
118
|
};
|
|
112
119
|
__decorate([
|
|
113
120
|
FoundationProperty()
|
|
@@ -1471,6 +1471,9 @@ export class CalendarFoundation {
|
|
|
1471
1471
|
}
|
|
1472
1472
|
_applyMin() {
|
|
1473
1473
|
this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute);
|
|
1474
|
+
if (this._min && this._min.getMonth() > this._month) {
|
|
1475
|
+
this._month = this._min.getMonth();
|
|
1476
|
+
}
|
|
1474
1477
|
if (this._isInitialized) {
|
|
1475
1478
|
this._applyDisabledDates();
|
|
1476
1479
|
if (this._min && this._min > this._focusedDate) {
|
|
@@ -1483,6 +1486,9 @@ export class CalendarFoundation {
|
|
|
1483
1486
|
}
|
|
1484
1487
|
_applyMax() {
|
|
1485
1488
|
this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute);
|
|
1489
|
+
if (this._max && this._max.getMonth() < this._month) {
|
|
1490
|
+
this._month = this._max.getMonth();
|
|
1491
|
+
}
|
|
1486
1492
|
if (this._isInitialized) {
|
|
1487
1493
|
this._applyDisabledDates();
|
|
1488
1494
|
if (this._max && this._max < this._focusedDate) {
|
|
@@ -46,7 +46,7 @@ export class ChipFieldAdapter extends FieldAdapter {
|
|
|
46
46
|
tryPropagateClick(target) {
|
|
47
47
|
var _a;
|
|
48
48
|
// We only propagate the click to the input if it originated from our internal input container
|
|
49
|
-
if (target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
|
|
49
|
+
if (!this._inputElement.disabled && target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
|
|
50
50
|
(_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click'));
|
|
51
51
|
}
|
|
52
52
|
}
|
|
@@ -10,8 +10,8 @@ import { ChipFieldFoundation } from './chip-field-foundation';
|
|
|
10
10
|
import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
|
|
11
11
|
import { ChipComponent } from '../chips';
|
|
12
12
|
import { FieldComponent } from '../field/field';
|
|
13
|
-
const template = '<template><div class=\"forge-chip-field__wrapper\" part=\"root\"><div class=\"forge-chip-field forge-field\" part=\"container\"><slot name=\"leading\"></slot><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot name=\"label\"></slot><div class=\"forge-field__input-container\" part=\"input-container\"><slot name=\"member\"></slot><slot></slot></div></div><slot name=\"trailing\"></slot><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
|
|
14
|
-
const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-chip-field-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-chip-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-chip-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-chip-field-margin-top,0);display:grid;grid-template-columns:[leading] -webkit-min-content [input] 1fr [trailing] -webkit-min-content [addon-end] -webkit-min-content [end];grid-template-columns:[leading] min-content [input] 1fr [trailing] min-content [addon-end] min-content [end]}.forge-chip-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-chip-field:not(.forge-field--dense):not(.forge-field--roomy){height:auto;min-height:46px;min-height:var(--forge-chip-field-height,46px)}.forge-chip-field.forge-field--roomy:not(.forge-field--dense){height:auto;min-height:3.5rem;min-height:var(--forge-chip-field-height,3.5rem)}.forge-chip-field.forge-field--dense:not(.forge-field--roomy){height:auto;min-height:1.5rem;min-height:var(--forge-chip-field-height,1.5rem)}.forge-field__label-input-container{grid-column-start:input;grid-column-end:trailing}.forge-field__input-container{-webkit-box-flex:1;flex:1 1 0.0001px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field__input-container{padding:2px 12px}.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-field__input-container{padding-left:32px}.forge-field--leading:not(.forge-field--shape-rounded) .forge-field__input-container{padding-left:0}.forge-field--shape-rounded.forge-field--leading .forge-field__input-container{padding-left:0}.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) .forge-field__input-container{padding-right:32px}.forge-field--addon-end:not(.forge-field--shape-rounded) .forge-field__input-container,.forge-field--trailing:not(.forge-field--shape-rounded) .forge-field__input-container{padding-right:0}.forge-field--shape-rounded.forge-field--addon-end .forge-field__input-container,.forge-field--shape-rounded.forge-field--trailing .forge-field__input-container{padding-right:0}.forge-field ::slotted([slot=member]){display:block}.forge-field--disabled ::slotted([slot=member]){--mdc-theme-primary:rgba(0, 0, 0, 0.38);--mdc-theme-primary:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));cursor:not-allowed;pointer-events:none}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 8px 2px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=member]){margin:6px 12px 6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 6px 2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:20px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:16px}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem;font-size:var(--forge-chip-field-font-size, .875rem)}.forge-field ::slotted(input){-webkit-box-flex:1;flex:1 1 0.0001px;min-width:40px;display:block;align-self:flex-start;padding:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){margin:4px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){margin:6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){margin:2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){height:1.25rem;line-height:1.25rem}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field ::slotted([slot=leading]){grid-column-start:leading;grid-column-end:input;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=leading]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){padding-top:0;padding-bottom:0}.forge-field ::slotted([slot=trailing]){grid-column-start:trailing;grid-column-end:addon-end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=trailing]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){padding-top:0;padding-bottom:0}.forge-field--addon-end .forge-field__addon-end-container{grid-column-start:addon-end;grid-column-end:end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=addon-end]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:0;margin-bottom:0}.forge-field ::slotted(forge-icon-button){display:-webkit-inline-box!important;display:inline-flex!important}:host{display:block;contain:layout}:host([hidden]){display:none}';
|
|
13
|
+
const template = '<template><div class=\"forge-chip-field__wrapper\" part=\"root\"><div class=\"forge-chip-field forge-field\" part=\"container\"><div class=\"forge-field__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot name=\"label\"></slot><div class=\"forge-field__input-container\" part=\"input-container\"><slot name=\"member\"></slot><slot></slot></div></div><div class=\"forge-field__trailing-container\" part=\"trailing-container\"><slot name=\"trailing\"></slot></div><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
|
|
14
|
+
const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-chip-field-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-chip-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-chip-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-chip-field-margin-top,0);display:grid;grid-template-columns:[leading] -webkit-min-content [input] 1fr [trailing] -webkit-min-content [addon-end] -webkit-min-content [end];grid-template-columns:[leading] min-content [input] 1fr [trailing] min-content [addon-end] min-content [end]}.forge-chip-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-chip-field:not(.forge-field--dense):not(.forge-field--roomy){height:auto;min-height:46px;min-height:var(--forge-chip-field-height,46px)}.forge-chip-field.forge-field--roomy:not(.forge-field--dense){height:auto;min-height:3.5rem;min-height:var(--forge-chip-field-height,3.5rem)}.forge-chip-field.forge-field--dense:not(.forge-field--roomy){height:auto;min-height:1.5rem;min-height:var(--forge-chip-field-height,1.5rem)}.forge-field__label-input-container{grid-column-start:input;grid-column-end:trailing}.forge-field__input-container{-webkit-box-flex:1;flex:1 1 0.0001px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field__input-container{padding:2px 12px}.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-field__input-container{padding-left:32px}.forge-field--leading:not(.forge-field--shape-rounded) .forge-field__input-container{padding-left:0}.forge-field--shape-rounded.forge-field--leading .forge-field__input-container{padding-left:0}.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) .forge-field__input-container{padding-right:32px}.forge-field--addon-end:not(.forge-field--shape-rounded) .forge-field__input-container,.forge-field--trailing:not(.forge-field--shape-rounded) .forge-field__input-container{padding-right:0}.forge-field--shape-rounded.forge-field--addon-end .forge-field__input-container,.forge-field--shape-rounded.forge-field--trailing .forge-field__input-container{padding-right:0}.forge-field ::slotted([slot=member]){display:block}.forge-field--disabled ::slotted([slot=member]){--mdc-theme-primary:rgba(0, 0, 0, 0.38);--mdc-theme-primary:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));cursor:not-allowed;pointer-events:none}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 8px 2px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=member]){margin:6px 12px 6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 6px 2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:20px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-min-height:16px}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem;font-size:var(--forge-chip-field-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem;font-size:var(--forge-chip-field-font-size, .875rem)}.forge-field ::slotted(input){-webkit-box-flex:1;flex:1 1 0.0001px;min-width:40px;display:block;align-self:flex-start;padding:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){margin:4px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){margin:6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){margin:2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){height:1.25rem;line-height:1.25rem}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--leading .forge-field__leading-container{grid-column-start:leading;grid-column-end:input;align-self:flex-start;display:-webkit-box;display:flex}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=leading]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){padding-top:0;padding-bottom:0}.forge-field--trailing .forge-field__trailing-container{grid-column-start:trailing;grid-column-end:addon-end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=trailing]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){padding-top:0;padding-bottom:0}.forge-field--addon-end .forge-field__addon-end-container{grid-column-start:addon-end;grid-column-end:end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=addon-end]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:0;margin-bottom:0}.forge-field ::slotted(forge-icon-button){display:-webkit-inline-box!important;display:inline-flex!important}:host{display:block;contain:layout}:host([hidden]){display:none}';
|
|
15
15
|
/**
|
|
16
16
|
* The web component class behind the `<forge-chip-field>` custom element.
|
|
17
17
|
*
|
|
@@ -92,10 +92,10 @@ export class BaseDatePickerFoundation {
|
|
|
92
92
|
this._handleInput(this._adapter.getInputValue());
|
|
93
93
|
}
|
|
94
94
|
_onInputFocus(evt) {
|
|
95
|
-
this._adapter.selectInputText();
|
|
96
95
|
if (this.masked && this.showMaskFormat) {
|
|
97
96
|
this._applyMask();
|
|
98
97
|
}
|
|
98
|
+
this._adapter.selectInputText();
|
|
99
99
|
}
|
|
100
100
|
_onInputBlur(evt) {
|
|
101
101
|
if (this.masked && this.showMaskFormat) {
|
|
@@ -271,11 +271,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
_onToInputFocus() {
|
|
274
|
-
this._adapter.selectToInputText();
|
|
275
274
|
if (this.masked && this._showMaskFormat) {
|
|
276
275
|
this._initializeMask();
|
|
277
276
|
this._initializeToMask();
|
|
278
277
|
}
|
|
278
|
+
this._adapter.selectToInputText();
|
|
279
279
|
}
|
|
280
280
|
_onToInputBlur(evt) {
|
|
281
281
|
if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
|
|
@@ -288,11 +288,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
|
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
_onInputFocus(evt) {
|
|
291
|
-
this._adapter.selectInputText();
|
|
292
291
|
if (this.masked && this._showMaskFormat) {
|
|
293
292
|
this._initializeMask();
|
|
294
293
|
this._initializeToMask();
|
|
295
294
|
}
|
|
295
|
+
this._adapter.selectInputText();
|
|
296
296
|
}
|
|
297
297
|
_onInputBlur(evt) {
|
|
298
298
|
if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
|
|
@@ -23,6 +23,7 @@ export declare const KEYBOARD_SHORTCUT_CONSTANTS: {
|
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
export declare const textInputTypes: string[];
|
|
26
|
+
export declare type KeyboardShortcutActivateCallback = (event: KeyboardEvent) => void;
|
|
26
27
|
export interface IKeyCombination {
|
|
27
28
|
key: string;
|
|
28
29
|
modifier?: string;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { ICustomElementFoundation } from '@tylertech/forge-core';
|
|
7
7
|
import { IKeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
|
|
8
|
+
import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
|
|
8
9
|
export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
|
|
9
10
|
key: string | null | undefined;
|
|
10
11
|
target: string;
|
|
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
|
|
|
14
15
|
capture: boolean;
|
|
15
16
|
useCode: boolean;
|
|
16
17
|
disabled: boolean;
|
|
18
|
+
activateCallback: KeyboardShortcutActivateCallback | null | undefined;
|
|
17
19
|
}
|
|
18
20
|
export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
|
|
19
21
|
private _adapter;
|
|
@@ -25,6 +27,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
|
|
|
25
27
|
private _capture;
|
|
26
28
|
private _useCode;
|
|
27
29
|
private _disabled;
|
|
30
|
+
private _activateCallback;
|
|
28
31
|
private _keyCombinations;
|
|
29
32
|
private _keyDownListener;
|
|
30
33
|
constructor(_adapter: IKeyboardShortcutAdapter);
|
|
@@ -60,4 +63,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
|
|
|
60
63
|
/** Gets/sets whether the event will be emitted. */
|
|
61
64
|
get disabled(): boolean;
|
|
62
65
|
set disabled(value: boolean);
|
|
66
|
+
/** Gets/sets the activation callback. */
|
|
67
|
+
get activateCallback(): KeyboardShortcutActivateCallback | null | undefined;
|
|
68
|
+
set activateCallback(value: KeyboardShortcutActivateCallback | null | undefined);
|
|
63
69
|
}
|
|
@@ -48,6 +48,7 @@ export class KeyboardShortcutFoundation {
|
|
|
48
48
|
}
|
|
49
49
|
_onKeyDown(evt) {
|
|
50
50
|
// Here we may check if the target element is disabled, but disabled elements typically can't receive focus anyway
|
|
51
|
+
var _a;
|
|
51
52
|
// Ignore the event if it originates from a text field
|
|
52
53
|
// TODO: bypass this and allow it if a modifier key is used?
|
|
53
54
|
if (!this._allowWhileTyping && elementAcceptsTextInput(evt.target)) {
|
|
@@ -58,6 +59,7 @@ export class KeyboardShortcutFoundation {
|
|
|
58
59
|
evt.preventDefault();
|
|
59
60
|
}
|
|
60
61
|
this._adapter.emitHostEvent(KEYBOARD_SHORTCUT_CONSTANTS.events.ACTIVATE, evt);
|
|
62
|
+
(_a = this._activateCallback) === null || _a === void 0 ? void 0 : _a.call(null, evt);
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
/** Sets the key combinations. */
|
|
@@ -161,4 +163,11 @@ export class KeyboardShortcutFoundation {
|
|
|
161
163
|
}
|
|
162
164
|
}
|
|
163
165
|
}
|
|
166
|
+
/** Gets/sets the activation callback. */
|
|
167
|
+
get activateCallback() {
|
|
168
|
+
return this._activateCallback;
|
|
169
|
+
}
|
|
170
|
+
set activateCallback(value) {
|
|
171
|
+
this._activateCallback = value;
|
|
172
|
+
}
|
|
164
173
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
|
|
6
7
|
import { BaseComponent, IBaseComponent } from '../core/base/base-component';
|
|
7
8
|
export interface IKeyboardShortcutComponent extends IBaseComponent {
|
|
8
9
|
key: string | null | undefined;
|
|
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutComponent extends IBaseComponent {
|
|
|
14
15
|
capture: boolean;
|
|
15
16
|
useCode: boolean;
|
|
16
17
|
disabled: boolean;
|
|
18
|
+
activateCallback: KeyboardShortcutActivateCallback | null | undefined;
|
|
17
19
|
}
|
|
18
20
|
declare global {
|
|
19
21
|
interface HTMLElementTagNameMap {
|
|
@@ -54,4 +56,6 @@ export declare class KeyboardShortcutComponent extends BaseComponent implements
|
|
|
54
56
|
useCode: boolean;
|
|
55
57
|
/** Gets/sets whether the callback will be called. */
|
|
56
58
|
disabled: boolean;
|
|
59
|
+
/** Gets/sets whether the activation callback. */
|
|
60
|
+
activateCallback: KeyboardShortcutActivateCallback | null | undefined;
|
|
57
61
|
}
|
|
@@ -97,6 +97,9 @@ __decorate([
|
|
|
97
97
|
__decorate([
|
|
98
98
|
FoundationProperty()
|
|
99
99
|
], KeyboardShortcutComponent.prototype, "disabled", void 0);
|
|
100
|
+
__decorate([
|
|
101
|
+
FoundationProperty()
|
|
102
|
+
], KeyboardShortcutComponent.prototype, "activateCallback", void 0);
|
|
100
103
|
KeyboardShortcutComponent = __decorate([
|
|
101
104
|
CustomElement({
|
|
102
105
|
name: KEYBOARD_SHORTCUT_CONSTANTS.elementName
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { IIconComponent } from '../icon';
|
|
6
7
|
import { IPopupPosition, PopupPlacement } from '../popup';
|
|
7
8
|
export declare const LIST_DROPDOWN_CONSTANTS: {
|
|
8
9
|
attributes: {
|
|
@@ -29,15 +30,18 @@ export declare type ListDropdownIconType = 'font' | 'component';
|
|
|
29
30
|
export interface IBaseListDropdownOption<T = any> {
|
|
30
31
|
value: T;
|
|
31
32
|
label: string;
|
|
33
|
+
secondaryLabel?: string;
|
|
32
34
|
disabled?: boolean;
|
|
33
35
|
divider?: boolean;
|
|
34
36
|
optionClass?: string | string[];
|
|
35
37
|
leadingIcon?: string;
|
|
36
38
|
leadingIconClass?: string;
|
|
37
39
|
leadingIconType?: ListDropdownIconType;
|
|
40
|
+
leadingIconComponentProps?: Partial<IIconComponent>;
|
|
38
41
|
trailingIcon?: string;
|
|
39
42
|
trailingIconClass?: string;
|
|
40
43
|
trailingIconType?: ListDropdownIconType;
|
|
44
|
+
trailingIconComponentProps?: Partial<IIconComponent>;
|
|
41
45
|
leadingBuilder?: () => HTMLElement;
|
|
42
46
|
trailingBuilder?: () => HTMLElement;
|
|
43
47
|
}
|
|
@@ -204,6 +204,14 @@ export function createListItems(config, listElement, options, startIndex = 0, re
|
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
|
+
// Check for secondary (subtitle) text
|
|
208
|
+
if (option.secondaryLabel) {
|
|
209
|
+
const secondaryLabelElement = document.createElement('span');
|
|
210
|
+
secondaryLabelElement.slot = 'subtitle';
|
|
211
|
+
secondaryLabelElement.textContent = option.secondaryLabel;
|
|
212
|
+
listItemElement.twoLine = true;
|
|
213
|
+
listItemElement.appendChild(secondaryLabelElement);
|
|
214
|
+
}
|
|
207
215
|
// If multiple selections are enabled then we need to create and append a leading checkbox element
|
|
208
216
|
if (config.multiple) {
|
|
209
217
|
const checkboxElement = createCheckboxElement(isSelected);
|
|
@@ -225,7 +233,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
|
|
|
225
233
|
}
|
|
226
234
|
}
|
|
227
235
|
else if (option.leadingIcon) {
|
|
228
|
-
const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
|
|
236
|
+
const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass, option.leadingIconComponentProps);
|
|
229
237
|
leadingIconElement.slot = 'leading';
|
|
230
238
|
listItemElement.appendChild(leadingIconElement);
|
|
231
239
|
}
|
|
@@ -238,7 +246,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
|
|
|
238
246
|
}
|
|
239
247
|
}
|
|
240
248
|
else if (option.trailingIcon) {
|
|
241
|
-
const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
|
|
249
|
+
const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass, option.trailingIconComponentProps);
|
|
242
250
|
trailingIconElement.slot = 'trailing';
|
|
243
251
|
listItemElement.appendChild(trailingIconElement);
|
|
244
252
|
}
|
|
@@ -292,7 +300,7 @@ function createDivider() {
|
|
|
292
300
|
divider.setAttribute('aria-hidden', 'true');
|
|
293
301
|
return divider;
|
|
294
302
|
}
|
|
295
|
-
function createIconElement(type = 'font', iconName, iconClass) {
|
|
303
|
+
function createIconElement(type = 'font', iconName, iconClass, componentProps) {
|
|
296
304
|
if (type === 'component') {
|
|
297
305
|
const icon = document.createElement('forge-icon');
|
|
298
306
|
if (iconClass) {
|
|
@@ -300,6 +308,9 @@ function createIconElement(type = 'font', iconName, iconClass) {
|
|
|
300
308
|
}
|
|
301
309
|
icon.setAttribute('aria-hidden', 'true');
|
|
302
310
|
icon.name = iconName;
|
|
311
|
+
if (componentProps) {
|
|
312
|
+
Object.assign(icon, componentProps);
|
|
313
|
+
}
|
|
303
314
|
return icon;
|
|
304
315
|
}
|
|
305
316
|
const iconElement = document.createElement('i');
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
|
|
7
|
-
import { IPopupComponent } from './popup';
|
|
7
|
+
import { IPopupComponent, IPopupCloseEventData } from './popup';
|
|
8
8
|
export interface IPopupAdapter extends IBaseAdapter {
|
|
9
9
|
setAttribute(attribute: string, value: string, element?: HTMLElement): void;
|
|
10
10
|
removeAttribute(attribute: string, element?: HTMLElement): void;
|
|
@@ -19,6 +19,7 @@ export interface IPopupAdapter extends IBaseAdapter {
|
|
|
19
19
|
removeEventListener(type: string, listener: (evt: Event) => void): void;
|
|
20
20
|
setBlurListener(listener: () => void): () => void;
|
|
21
21
|
trySetInitialFocus(): void;
|
|
22
|
+
getCloseEventData(): IPopupCloseEventData;
|
|
22
23
|
}
|
|
23
24
|
export declare class PopupAdapter extends BaseAdapter<IPopupComponent> implements IPopupAdapter {
|
|
24
25
|
private _windowEventCallback?;
|
|
@@ -33,6 +34,7 @@ export declare class PopupAdapter extends BaseAdapter<IPopupComponent> implement
|
|
|
33
34
|
removePopup(manageFocus: boolean): void;
|
|
34
35
|
manageWindowEvents(add?: boolean): void;
|
|
35
36
|
dispatchEvent(type: string, data?: any, bubbles?: boolean, cancelable?: boolean): boolean;
|
|
37
|
+
getCloseEventData(): IPopupCloseEventData;
|
|
36
38
|
addClass(classes: string | string[]): void;
|
|
37
39
|
removeClass(classes: string | string[]): void;
|
|
38
40
|
setAnimationEndListener(listener: (evt: TransitionEvent) => void, classes?: string | string[]): void;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { isElement } from '@tylertech/forge-core';
|
|
7
|
-
import { PopupAnimationType, POPUP_CONSTANTS
|
|
7
|
+
import { PopupAnimationType, POPUP_CONSTANTS } from './popup-constants';
|
|
8
8
|
export class PopupFoundation {
|
|
9
9
|
constructor(_adapter) {
|
|
10
10
|
this._adapter = _adapter;
|
|
@@ -42,7 +42,7 @@ export class PopupFoundation {
|
|
|
42
42
|
this._destroyBlurListener = this._adapter.setBlurListener(this._blurListener);
|
|
43
43
|
}
|
|
44
44
|
this._adapter.manageWindowEvents(true);
|
|
45
|
-
this._adapter.dispatchEvent(
|
|
45
|
+
this._adapter.dispatchEvent(POPUP_CONSTANTS.events.OPEN);
|
|
46
46
|
}
|
|
47
47
|
_closePopup() {
|
|
48
48
|
if (this._destroyBlurListener) {
|
|
@@ -59,7 +59,9 @@ export class PopupFoundation {
|
|
|
59
59
|
_destroyPopup() {
|
|
60
60
|
this._adapter.manageWindowEvents(false);
|
|
61
61
|
this._adapter.removePopup(this._manageFocus);
|
|
62
|
-
this._adapter.
|
|
62
|
+
const eventData = this._adapter.getCloseEventData();
|
|
63
|
+
this._adapter.dispatchEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
|
|
64
|
+
this._adapter.emitHostEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
|
|
63
65
|
this._adapter.removeAttribute(POPUP_CONSTANTS.attributes.OPEN);
|
|
64
66
|
}
|
|
65
67
|
_applyOpenAnimation() {
|
package/esm/popup/popup.d.ts
CHANGED
|
@@ -19,13 +19,16 @@ export interface IPopupComponent extends IBaseComponent {
|
|
|
19
19
|
openCallback: PopupStateCallback;
|
|
20
20
|
closeCallback: PopupStateCallback;
|
|
21
21
|
}
|
|
22
|
+
export interface IPopupCloseEventData {
|
|
23
|
+
popup: IPopupComponent;
|
|
24
|
+
}
|
|
22
25
|
declare global {
|
|
23
26
|
interface HTMLElementTagNameMap {
|
|
24
27
|
'forge-popup': IPopupComponent;
|
|
25
28
|
}
|
|
26
29
|
interface HTMLElementEventMap {
|
|
27
30
|
'forge-popup-open': CustomEvent<void>;
|
|
28
|
-
'forge-popup-close': CustomEvent<
|
|
31
|
+
'forge-popup-close': CustomEvent<IPopupCloseEventData>;
|
|
29
32
|
'forge-popup-position': CustomEvent<IPopupPositionEventData>;
|
|
30
33
|
'forge-popup-blur': CustomEvent<void>;
|
|
31
34
|
}
|
|
@@ -46,6 +46,7 @@ export class BaseSelectAdapter extends BaseAdapter {
|
|
|
46
46
|
return {
|
|
47
47
|
// eslint-disable-next-line @typescript-eslint/no-extra-parens
|
|
48
48
|
label: o.hasAttribute(OPTION_CONSTANTS.attributes.LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.LABEL) : (isDefined(o.label) ? o.label : o.innerText),
|
|
49
|
+
secondaryLabel: o.hasAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) : isDefined(o.secondaryLabel) ? o.secondaryLabel : undefined,
|
|
49
50
|
value: o.hasAttribute(OPTION_CONSTANTS.attributes.VALUE) ? o.getAttribute(OPTION_CONSTANTS.attributes.VALUE) : o.value,
|
|
50
51
|
disabled: o.hasAttribute(OPTION_CONSTANTS.attributes.DISABLED),
|
|
51
52
|
divider: o.hasAttribute(OPTION_CONSTANTS.attributes.DIVIDER),
|
|
@@ -53,9 +54,11 @@ export class BaseSelectAdapter extends BaseAdapter {
|
|
|
53
54
|
leadingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) : o.leadingIcon,
|
|
54
55
|
leadingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) : o.leadingIconClass,
|
|
55
56
|
leadingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) : o.leadingIconType,
|
|
57
|
+
leadingIconComponentProps: o.leadingIconComponentProps,
|
|
56
58
|
trailingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) : o.trailingIcon,
|
|
57
59
|
trailingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) : o.trailingIconClass,
|
|
58
60
|
trailingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) : o.trailingIconType,
|
|
61
|
+
trailingIconComponentProps: o.trailingIconComponentProps,
|
|
59
62
|
leadingBuilder: o.leadingBuilder,
|
|
60
63
|
trailingBuilder: o.trailingBuilder
|
|
61
64
|
};
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { ICustomElementFoundation } from '@tylertech/forge-core';
|
|
7
|
+
import { IIconComponent } from '../../icon';
|
|
7
8
|
import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
|
|
8
9
|
import { IOptionAdapter } from './option-adapter';
|
|
9
10
|
export interface IOptionFoundation extends ICustomElementFoundation, Required<IBaseListDropdownOption> {
|
|
@@ -13,15 +14,18 @@ export declare class OptionFoundation implements IOptionFoundation {
|
|
|
13
14
|
private _adapter;
|
|
14
15
|
private _value;
|
|
15
16
|
private _label;
|
|
17
|
+
private _secondaryLabel;
|
|
16
18
|
private _disabled;
|
|
17
19
|
private _divider;
|
|
18
20
|
private _optionClass;
|
|
19
21
|
private _leadingIcon;
|
|
20
22
|
private _leadingIconClass;
|
|
21
23
|
private _leadingIconType;
|
|
24
|
+
private _leadingIconComponentProps;
|
|
22
25
|
private _trailingIcon;
|
|
23
26
|
private _trailingIconClass;
|
|
24
27
|
private _trailingIconType;
|
|
28
|
+
private _trailingIconComponentProps;
|
|
25
29
|
private _leadingBuilder;
|
|
26
30
|
private _trailingBuilder;
|
|
27
31
|
constructor(_adapter: IOptionAdapter);
|
|
@@ -31,6 +35,9 @@ export declare class OptionFoundation implements IOptionFoundation {
|
|
|
31
35
|
/** Gets/sets the label of this option. */
|
|
32
36
|
get label(): string;
|
|
33
37
|
set label(value: string);
|
|
38
|
+
/** Gets/sets the secondary label of this option. */
|
|
39
|
+
get secondaryLabel(): string;
|
|
40
|
+
set secondaryLabel(value: string);
|
|
34
41
|
/** Gets/sets the disabled status of this option. */
|
|
35
42
|
get disabled(): boolean;
|
|
36
43
|
set disabled(value: boolean);
|
|
@@ -49,6 +56,9 @@ export declare class OptionFoundation implements IOptionFoundation {
|
|
|
49
56
|
/** Gets/sets the leading icon type of this option. */
|
|
50
57
|
get leadingIconType(): ListDropdownIconType;
|
|
51
58
|
set leadingIconType(value: ListDropdownIconType);
|
|
59
|
+
/** Gets/sets the props on the leading icon component. */
|
|
60
|
+
get leadingIconComponentProps(): Partial<IIconComponent>;
|
|
61
|
+
set leadingIconComponentProps(value: Partial<IIconComponent>);
|
|
52
62
|
/** Gets/sets the trailing icon of this option. */
|
|
53
63
|
get trailingIcon(): string;
|
|
54
64
|
set trailingIcon(value: string);
|
|
@@ -58,6 +68,9 @@ export declare class OptionFoundation implements IOptionFoundation {
|
|
|
58
68
|
/** Gets/sets the trailing icon type of this option. */
|
|
59
69
|
get trailingIconType(): ListDropdownIconType;
|
|
60
70
|
set trailingIconType(value: ListDropdownIconType);
|
|
71
|
+
/** Gets/sets the props on the trailing icon component. */
|
|
72
|
+
get trailingIconComponentProps(): Partial<IIconComponent>;
|
|
73
|
+
set trailingIconComponentProps(value: Partial<IIconComponent>);
|
|
61
74
|
/** Gets/sets the leading builder of this option. */
|
|
62
75
|
get leadingBuilder(): (() => HTMLElement);
|
|
63
76
|
set leadingBuilder(value: (() => HTMLElement));
|
|
@@ -32,6 +32,16 @@ export class OptionFoundation {
|
|
|
32
32
|
this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LABEL, !!this._label, this._label);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
+
/** Gets/sets the secondary label of this option. */
|
|
36
|
+
get secondaryLabel() {
|
|
37
|
+
return this._secondaryLabel;
|
|
38
|
+
}
|
|
39
|
+
set secondaryLabel(value) {
|
|
40
|
+
if (this._secondaryLabel !== value) {
|
|
41
|
+
this._secondaryLabel = value;
|
|
42
|
+
this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL, !!this._secondaryLabel, this._secondaryLabel);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
35
45
|
/** Gets/sets the disabled status of this option. */
|
|
36
46
|
get disabled() {
|
|
37
47
|
return this._disabled;
|
|
@@ -99,6 +109,15 @@ export class OptionFoundation {
|
|
|
99
109
|
this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE, !!this._leadingIconType, this._leadingIconType);
|
|
100
110
|
}
|
|
101
111
|
}
|
|
112
|
+
/** Gets/sets the props on the leading icon component. */
|
|
113
|
+
get leadingIconComponentProps() {
|
|
114
|
+
return this._leadingIconComponentProps;
|
|
115
|
+
}
|
|
116
|
+
set leadingIconComponentProps(value) {
|
|
117
|
+
if (this._leadingIconComponentProps !== value) {
|
|
118
|
+
this._leadingIconComponentProps = value;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
102
121
|
/** Gets/sets the trailing icon of this option. */
|
|
103
122
|
get trailingIcon() {
|
|
104
123
|
return this._trailingIcon;
|
|
@@ -129,6 +148,15 @@ export class OptionFoundation {
|
|
|
129
148
|
this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE, !!this._trailingIconType, this._trailingIconType);
|
|
130
149
|
}
|
|
131
150
|
}
|
|
151
|
+
/** Gets/sets the props on the trailing icon component. */
|
|
152
|
+
get trailingIconComponentProps() {
|
|
153
|
+
return this._trailingIconComponentProps;
|
|
154
|
+
}
|
|
155
|
+
set trailingIconComponentProps(value) {
|
|
156
|
+
if (this._trailingIconComponentProps !== value) {
|
|
157
|
+
this._trailingIconComponentProps = value;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
132
160
|
/** Gets/sets the leading builder of this option. */
|
|
133
161
|
get leadingBuilder() {
|
|
134
162
|
return this._leadingBuilder;
|