@tylertech/forge-core 3.2.1 → 3.3.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/README.md +1 -27
- package/dist/a11y/index.d.ts +2 -1
- package/dist/a11y/index.js +2 -1
- package/dist/a11y/live-announcer.d.ts +16 -0
- package/dist/a11y/live-announcer.js +39 -0
- package/dist/constants/date-constants.js +4 -46
- package/dist/constants/index.d.ts +1 -1
- package/dist/constants/index.js +1 -1
- package/dist/custom-elements/component-utils.js +3 -3
- package/dist/custom-elements/decorators/core-property.js +5 -7
- package/dist/custom-elements/decorators/custom-element.js +2 -2
- package/dist/custom-elements/decorators/index.d.ts +2 -2
- package/dist/custom-elements/decorators/index.js +2 -2
- package/dist/custom-elements/index.d.ts +3 -3
- package/dist/custom-elements/index.js +3 -3
- package/dist/events/index.d.ts +1 -1
- package/dist/events/index.js +1 -1
- package/dist/index.d.ts +10 -10
- package/dist/index.js +10 -10
- package/dist/media-observer/index.d.ts +3 -3
- package/dist/media-observer/index.js +3 -3
- package/dist/media-observer/media-observer-utils.d.ts +1 -1
- package/dist/media-observer/media-observer-utils.js +1 -1
- package/dist/media-observer/media-observer.d.ts +2 -2
- package/dist/media-observer/media-observer.js +13 -12
- package/dist/media-observer/types.d.ts +30 -30
- package/dist/media-observer/types.js +7 -15
- package/dist/message-list/index.d.ts +2 -2
- package/dist/message-list/index.js +2 -2
- package/dist/message-list/message-list.d.ts +26 -26
- package/dist/message-list/message-list.js +25 -25
- package/dist/observable/index.d.ts +2 -2
- package/dist/observable/index.js +2 -2
- package/dist/observable/observable.d.ts +1 -1
- package/dist/observable/observable.js +0 -2
- package/dist/resize/index.d.ts +2 -2
- package/dist/resize/index.js +2 -2
- package/dist/resize/resize-observer.d.ts +1 -1
- package/dist/resize/resize-observer.js +11 -11
- package/dist/scroll/index.d.ts +2 -2
- package/dist/scroll/index.js +2 -2
- package/dist/scroll/scroll-axis-observer.d.ts +2 -2
- package/dist/scroll/scroll-axis-observer.js +11 -5
- package/dist/services/index.d.ts +1 -1
- package/dist/services/index.js +1 -1
- package/dist/utils/dom-utils.js +8 -17
- package/dist/utils/http-utils.js +5 -3
- package/dist/utils/index.d.ts +10 -10
- package/dist/utils/index.js +10 -10
- package/dist/utils/item-manager.js +1 -1
- package/dist/utils/object-utils.js +5 -5
- package/dist/utils/platform.js +1 -1
- package/dist/utils/string-utils.js +1 -1
- package/dist/utils/utils.js +14 -15
- package/package.json +16 -36
package/README.md
CHANGED
|
@@ -1,29 +1,3 @@
|
|
|
1
1
|
# Tyler Forge™ Core
|
|
2
2
|
|
|
3
|
-
This library contains
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm i @tylertech/forge-core
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Development
|
|
12
|
-
|
|
13
|
-
Install dependencies:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm i
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Build library:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm run build
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Run tests:
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm test
|
|
29
|
-
```
|
|
3
|
+
This library contains core utilities that are used within Tyler Forge™.
|
package/dist/a11y/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from './a11y';
|
|
1
|
+
export * from './a11y.js';
|
|
2
|
+
export * from './live-announcer.js';
|
package/dist/a11y/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from './a11y';
|
|
1
|
+
export * from './a11y.js';
|
|
2
|
+
export * from './live-announcer.js';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare const LIVE_ANNOUNCER_KEY: unique symbol;
|
|
2
|
+
export type LiveAnnouncerPoliteness = 'polite' | 'assertive';
|
|
3
|
+
declare global {
|
|
4
|
+
interface Window {
|
|
5
|
+
[LIVE_ANNOUNCER_KEY]: LiveAnnouncer;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare class LiveAnnouncer {
|
|
9
|
+
private _politeElement;
|
|
10
|
+
private _assertiveElement;
|
|
11
|
+
private constructor();
|
|
12
|
+
static get instance(): LiveAnnouncer;
|
|
13
|
+
announce(message: string, politeness?: LiveAnnouncerPoliteness): void;
|
|
14
|
+
private _getElement;
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { createVisuallyHiddenElement } from '../utils/a11y.js';
|
|
2
|
+
const LIVE_ANNOUNCER_KEY = Symbol('forgeLiveAnnouncer');
|
|
3
|
+
export class LiveAnnouncer {
|
|
4
|
+
constructor() {
|
|
5
|
+
this._politeElement = null;
|
|
6
|
+
this._assertiveElement = null;
|
|
7
|
+
}
|
|
8
|
+
static get instance() {
|
|
9
|
+
if (!window[LIVE_ANNOUNCER_KEY]) {
|
|
10
|
+
window[LIVE_ANNOUNCER_KEY] = new LiveAnnouncer();
|
|
11
|
+
}
|
|
12
|
+
return window[LIVE_ANNOUNCER_KEY];
|
|
13
|
+
}
|
|
14
|
+
announce(message, politeness = 'polite') {
|
|
15
|
+
const element = this._getElement(politeness);
|
|
16
|
+
element.textContent = '';
|
|
17
|
+
setTimeout(() => {
|
|
18
|
+
element.textContent = message;
|
|
19
|
+
}, 100);
|
|
20
|
+
}
|
|
21
|
+
_getElement(politeness) {
|
|
22
|
+
const isPolite = politeness === 'polite';
|
|
23
|
+
const existing = isPolite ? this._politeElement : this._assertiveElement;
|
|
24
|
+
if (existing && document.body.contains(existing)) {
|
|
25
|
+
return existing;
|
|
26
|
+
}
|
|
27
|
+
const element = createVisuallyHiddenElement(`data-forge-live-announcer-${politeness}`);
|
|
28
|
+
element.setAttribute('aria-live', politeness);
|
|
29
|
+
element.setAttribute('aria-atomic', 'true');
|
|
30
|
+
document.body.appendChild(element);
|
|
31
|
+
if (isPolite) {
|
|
32
|
+
this._politeElement = element;
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
this._assertiveElement = element;
|
|
36
|
+
}
|
|
37
|
+
return element;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -1,49 +1,7 @@
|
|
|
1
|
-
const days = [
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
'We',
|
|
6
|
-
'Th',
|
|
7
|
-
'Fr',
|
|
8
|
-
'Sa'
|
|
9
|
-
];
|
|
10
|
-
const daysLong = [
|
|
11
|
-
'Sunday',
|
|
12
|
-
'Monday',
|
|
13
|
-
'Tuesday',
|
|
14
|
-
'Wednesday',
|
|
15
|
-
'Thursday',
|
|
16
|
-
'Friday',
|
|
17
|
-
'Saturday'
|
|
18
|
-
];
|
|
19
|
-
const months = [
|
|
20
|
-
'Jan',
|
|
21
|
-
'Feb',
|
|
22
|
-
'Mar',
|
|
23
|
-
'Apr',
|
|
24
|
-
'May',
|
|
25
|
-
'Jun',
|
|
26
|
-
'Jul',
|
|
27
|
-
'Aug',
|
|
28
|
-
'Sep',
|
|
29
|
-
'Oct',
|
|
30
|
-
'Nov',
|
|
31
|
-
'Dec'
|
|
32
|
-
];
|
|
33
|
-
const monthsLong = [
|
|
34
|
-
'January',
|
|
35
|
-
'February',
|
|
36
|
-
'March',
|
|
37
|
-
'April',
|
|
38
|
-
'May',
|
|
39
|
-
'June',
|
|
40
|
-
'July',
|
|
41
|
-
'August',
|
|
42
|
-
'September',
|
|
43
|
-
'October',
|
|
44
|
-
'November',
|
|
45
|
-
'December'
|
|
46
|
-
];
|
|
1
|
+
const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
2
|
+
const daysLong = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|
3
|
+
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
4
|
+
const monthsLong = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
47
5
|
export const DATE_CONSTANTS = {
|
|
48
6
|
days,
|
|
49
7
|
daysLong,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './date-constants';
|
|
1
|
+
export * from './date-constants.js';
|
package/dist/constants/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './date-constants';
|
|
1
|
+
export * from './date-constants.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { replaceElement, isArray, removeAllChildren, walkUpUntil } from '../utils';
|
|
2
|
-
import { CUSTOM_ELEMENT_CSS_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_STYLESHEETS_PROPERTY, CUSTOM_ELEMENT_TEMPLATE_PROPERTY, supportsConstructableStyleSheets } from './constants';
|
|
1
|
+
import { replaceElement, isArray, removeAllChildren, walkUpUntil } from '../utils/index.js';
|
|
2
|
+
import { CUSTOM_ELEMENT_CSS_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_STYLESHEETS_PROPERTY, CUSTOM_ELEMENT_TEMPLATE_PROPERTY, supportsConstructableStyleSheets } from './constants.js';
|
|
3
3
|
/**
|
|
4
4
|
* Recursively defines a component as a custom elements and all of its dependencies.
|
|
5
5
|
* @param component The component to import.
|
|
@@ -44,7 +44,7 @@ export function hasDefinedCustomElement(name) {
|
|
|
44
44
|
* @param property
|
|
45
45
|
*/
|
|
46
46
|
export function upgradeProperty(instance, property) {
|
|
47
|
-
if (
|
|
47
|
+
if (Object.prototype.hasOwnProperty.call(instance, property)) {
|
|
48
48
|
const value = instance[property];
|
|
49
49
|
delete instance[property];
|
|
50
50
|
instance[property] = value;
|
|
@@ -8,7 +8,7 @@ class CorePropertyOptions {
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
const CORE_PROPERTY_NAME = '_core';
|
|
11
|
-
const corePropertyNotFoundMessage = (className, propertyName) => `${className}
|
|
11
|
+
const corePropertyNotFoundMessage = (className, propertyName) => `${className}'s core does not contain the property "${propertyName}"`;
|
|
12
12
|
const coreNotFoundMessage = (className) => `${className} does not have a core`;
|
|
13
13
|
function runIfVerified(target, propertyName, action) {
|
|
14
14
|
if (target[CORE_PROPERTY_NAME]) {
|
|
@@ -68,26 +68,24 @@ export function coreProperty(options) {
|
|
|
68
68
|
const attributes = { configurable: true, enumerable: true };
|
|
69
69
|
const get = {
|
|
70
70
|
get() {
|
|
71
|
-
|
|
72
|
-
return wireDescriptorGet(that, corePropertyName, attrs => {
|
|
71
|
+
return wireDescriptorGet(this, corePropertyName, attrs => {
|
|
73
72
|
let setter;
|
|
74
73
|
if (allOptions.set) {
|
|
75
74
|
setter = { ...set };
|
|
76
75
|
}
|
|
77
|
-
Reflect.defineProperty(
|
|
76
|
+
Reflect.defineProperty(this, corePropertyName, { configurable: true, enumerable: true, ...attrs, ...setter });
|
|
78
77
|
return attrs.get();
|
|
79
78
|
});
|
|
80
79
|
}
|
|
81
80
|
};
|
|
82
81
|
const set = {
|
|
83
82
|
set(value) {
|
|
84
|
-
|
|
85
|
-
return wireDescriptorSet(that, corePropertyName, attrs => {
|
|
83
|
+
return wireDescriptorSet(this, corePropertyName, attrs => {
|
|
86
84
|
let getter;
|
|
87
85
|
if (allOptions.get) {
|
|
88
86
|
getter = { ...get };
|
|
89
87
|
}
|
|
90
|
-
Reflect.defineProperty(
|
|
88
|
+
Reflect.defineProperty(this, corePropertyName, { configurable: true, enumerable: true, ...attrs, ...getter });
|
|
91
89
|
attrs.set(value);
|
|
92
90
|
});
|
|
93
91
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineCustomElement } from '../component-utils';
|
|
2
|
-
import { CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY } from '../constants';
|
|
1
|
+
import { defineCustomElement } from '../component-utils.js';
|
|
2
|
+
import { CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY } from '../constants.js';
|
|
3
3
|
/**
|
|
4
4
|
* This decorator is intended to be used on classes that extend `HTMLElement` to
|
|
5
5
|
* extend/modify the behavior of a custom element.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './custom-element';
|
|
2
|
-
export * from './core-property';
|
|
1
|
+
export * from './custom-element.js';
|
|
2
|
+
export * from './core-property.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './custom-element';
|
|
2
|
-
export * from './core-property';
|
|
1
|
+
export * from './custom-element.js';
|
|
2
|
+
export * from './core-property.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from './decorators';
|
|
2
|
-
export * from './component-utils';
|
|
3
|
-
export * from './constants';
|
|
1
|
+
export * from './decorators/index.js';
|
|
2
|
+
export * from './component-utils.js';
|
|
3
|
+
export * from './constants.js';
|
|
4
4
|
export interface ICustomElement extends HTMLElement {
|
|
5
5
|
initializedCallback?: () => void;
|
|
6
6
|
connectedCallback?: () => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './decorators';
|
|
2
|
-
export * from './component-utils';
|
|
3
|
-
export * from './constants';
|
|
1
|
+
export * from './decorators/index.js';
|
|
2
|
+
export * from './component-utils.js';
|
|
3
|
+
export * from './constants.js';
|
package/dist/events/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './event-aware';
|
|
1
|
+
export * from './event-aware.js';
|
package/dist/events/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './event-aware';
|
|
1
|
+
export * from './event-aware.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2022 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
export * from './a11y';
|
|
7
|
-
export * from './constants';
|
|
8
|
-
export * from './custom-elements';
|
|
9
|
-
export * from './events';
|
|
10
|
-
export * from './media-observer';
|
|
11
|
-
export * from './message-list';
|
|
12
|
-
export * from './resize';
|
|
13
|
-
export * from './scroll';
|
|
14
|
-
export * from './services';
|
|
15
|
-
export * from './utils';
|
|
6
|
+
export * from './a11y/index.js';
|
|
7
|
+
export * from './constants/index.js';
|
|
8
|
+
export * from './custom-elements/index.js';
|
|
9
|
+
export * from './events/index.js';
|
|
10
|
+
export * from './media-observer/index.js';
|
|
11
|
+
export * from './message-list/index.js';
|
|
12
|
+
export * from './resize/index.js';
|
|
13
|
+
export * from './scroll/index.js';
|
|
14
|
+
export * from './services/index.js';
|
|
15
|
+
export * from './utils/index.js';
|
package/dist/index.js
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2022 Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
export * from './a11y';
|
|
7
|
-
export * from './constants';
|
|
8
|
-
export * from './custom-elements';
|
|
9
|
-
export * from './events';
|
|
10
|
-
export * from './media-observer';
|
|
11
|
-
export * from './message-list';
|
|
12
|
-
export * from './resize';
|
|
13
|
-
export * from './scroll';
|
|
14
|
-
export * from './services';
|
|
15
|
-
export * from './utils';
|
|
6
|
+
export * from './a11y/index.js';
|
|
7
|
+
export * from './constants/index.js';
|
|
8
|
+
export * from './custom-elements/index.js';
|
|
9
|
+
export * from './events/index.js';
|
|
10
|
+
export * from './media-observer/index.js';
|
|
11
|
+
export * from './message-list/index.js';
|
|
12
|
+
export * from './resize/index.js';
|
|
13
|
+
export * from './scroll/index.js';
|
|
14
|
+
export * from './services/index.js';
|
|
15
|
+
export * from './utils/index.js';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './media-observer';
|
|
2
|
-
export * from './media-observer-utils';
|
|
3
|
-
export * from './types';
|
|
1
|
+
export * from './media-observer.js';
|
|
2
|
+
export * from './media-observer-utils.js';
|
|
3
|
+
export * from './types.js';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './media-observer';
|
|
2
|
-
export * from './media-observer-utils';
|
|
3
|
-
export * from './types';
|
|
1
|
+
export * from './media-observer.js';
|
|
2
|
+
export * from './media-observer-utils.js';
|
|
3
|
+
export * from './types.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IMediaRange, MediaFeature, NamedMediaQuery, RangeMediaFeature } from './types';
|
|
1
|
+
import { IMediaRange, MediaFeature, NamedMediaQuery, RangeMediaFeature } from './types.js';
|
|
2
2
|
/** Returns the names of all queries that match. Used for range media features. */
|
|
3
3
|
export declare function getMatchingValues(namedQueries: NamedMediaQuery[]): string[];
|
|
4
4
|
/** Returns the name of one query that matches. Used for discrete media features. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Subject } from '../observable';
|
|
2
|
-
import { BooleanMediaFeature, IMediaObserverOptions, IMediaRange, MediaFeature as DiscreteMediaFeature, NamedMediaQuery, RangeMediaFeature } from './types';
|
|
1
|
+
import { Subject } from '../observable/index.js';
|
|
2
|
+
import { BooleanMediaFeature, IMediaObserverOptions, IMediaRange, MediaFeature as DiscreteMediaFeature, NamedMediaQuery, RangeMediaFeature } from './types.js';
|
|
3
3
|
/**
|
|
4
4
|
* A Subject that tracks the value of a media feature and exposes it synchronously and
|
|
5
5
|
* asynchronously.
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
import { Subject } from '../observable';
|
|
2
|
-
import { getBooleanValue, getMatchingValue, getMatchingValues, getRangeQuery, validateName } from './media-observer-utils';
|
|
3
|
-
import { mediaFeatureValues } from './types';
|
|
1
|
+
import { Subject } from '../observable/index.js';
|
|
2
|
+
import { getBooleanValue, getMatchingValue, getMatchingValues, getRangeQuery, validateName } from './media-observer-utils.js';
|
|
3
|
+
import { mediaFeatureValues } from './types.js';
|
|
4
4
|
/**
|
|
5
5
|
* A Subject that tracks the value of a media feature and exposes it synchronously and
|
|
6
6
|
* asynchronously.
|
|
7
7
|
*/
|
|
8
8
|
export class MediaObserver extends Subject {
|
|
9
|
+
/**
|
|
10
|
+
* STATIC MEMBERS
|
|
11
|
+
*/
|
|
12
|
+
/** A collection of all managed media observers. */
|
|
13
|
+
static { this._observers = {}; }
|
|
9
14
|
/**
|
|
10
15
|
* Returns a new media observer tracking a discrete feature.
|
|
11
16
|
* @param feature The name of a discrete media feature.
|
|
@@ -87,7 +92,6 @@ export class MediaObserver extends Subject {
|
|
|
87
92
|
get name() {
|
|
88
93
|
return this._name;
|
|
89
94
|
}
|
|
90
|
-
// eslint-disable-next-line @tylertech-eslint/require-private-modifier
|
|
91
95
|
constructor(name, namedQueries, value, track = true) {
|
|
92
96
|
super(value);
|
|
93
97
|
this._queries = [];
|
|
@@ -108,24 +112,22 @@ export class MediaObserver extends Subject {
|
|
|
108
112
|
_attachMediaQueries(namedQueries) {
|
|
109
113
|
return namedQueries.map(({ name, query }) => {
|
|
110
114
|
const queryList = window.matchMedia(query);
|
|
111
|
-
const handler =
|
|
115
|
+
const handler = event => this.setValue(event, name);
|
|
112
116
|
handler(queryList);
|
|
113
117
|
queryList.addEventListener('change', handler);
|
|
114
118
|
return { queryList, handler };
|
|
115
119
|
});
|
|
116
120
|
}
|
|
117
121
|
}
|
|
118
|
-
/**
|
|
119
|
-
* STATIC MEMBERS
|
|
120
|
-
*/
|
|
121
|
-
/** A collection of all managed media observers. */
|
|
122
|
-
MediaObserver._observers = {};
|
|
123
122
|
/**
|
|
124
123
|
* A media observer that tracks one feature with multiple discrete keyword values.
|
|
125
124
|
*/
|
|
126
125
|
export class DiscreteMediaObserver extends MediaObserver {
|
|
127
126
|
static create(feature, options) {
|
|
128
|
-
const namedQueries = mediaFeatureValues[feature].map(featureValue => ({
|
|
127
|
+
const namedQueries = mediaFeatureValues[feature].map(featureValue => ({
|
|
128
|
+
name: featureValue.toString(),
|
|
129
|
+
query: `(${feature}: ${featureValue})`
|
|
130
|
+
}));
|
|
129
131
|
const value = getMatchingValue(namedQueries);
|
|
130
132
|
const name = validateName(options?.name) ?? feature;
|
|
131
133
|
return new DiscreteMediaObserver(name, namedQueries, value, options?.track !== false);
|
|
@@ -148,7 +150,6 @@ export class RangeMediaObserver extends MediaObserver {
|
|
|
148
150
|
const name = validateName(options?.name) ?? feature;
|
|
149
151
|
return new RangeMediaObserver(name, namedQueries, value, options?.track !== false);
|
|
150
152
|
}
|
|
151
|
-
// eslint-disable-next-line @tylertech-eslint/require-private-modifier
|
|
152
153
|
constructor(name, namedQueries, value, track = true) {
|
|
153
154
|
super(name, namedQueries, value, track);
|
|
154
155
|
this._isAwaitingQueries = false;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export declare const DISCRETE_MEDIA_FEATURES: readonly ["any-hover", "any-pointer", "color-gamut", "display-mode", "dynamic-range", "forced-colors", "grid", "hover", "inverted-colors", "orientation", "overflow-block", "overflow-inline", "pointer", "prefers-contrast", "prefers-color-scheme", "prefers-reduced-motion", "scripting", "update", "video-dynamic-range"];
|
|
2
2
|
export declare const RANGE_MEDIA_FEATURES: readonly ["aspect-ratio", "color", "color-index", "height", "monochrome", "resolution", "width"];
|
|
3
|
-
export declare const ALL_MEDIA_FEATURES: ("
|
|
3
|
+
export declare const ALL_MEDIA_FEATURES: ("height" | "width" | "any-hover" | "any-pointer" | "color-gamut" | "display-mode" | "dynamic-range" | "forced-colors" | "grid" | "hover" | "inverted-colors" | "orientation" | "overflow-block" | "overflow-inline" | "pointer" | "prefers-contrast" | "prefers-color-scheme" | "prefers-reduced-motion" | "scripting" | "update" | "video-dynamic-range" | "aspect-ratio" | "color" | "color-index" | "monochrome" | "resolution")[];
|
|
4
4
|
export declare const BOOLEAN_MEDIA_FEATURES: readonly ["any-hover", "any-pointer", "color", "color-index", "dynamic-range", "forced-colors", "grid", "height", "hover", "inverted-colors", "monochrome", "overflow-block", "overflow-inline", "pointer", "prefers-contrast", "prefers-reduced-motion", "scripting", "update", "video-dynamic-range", "width"];
|
|
5
|
-
export type DiscreteMediaFeature = typeof DISCRETE_MEDIA_FEATURES[number];
|
|
6
|
-
export type RangeMediaFeature = typeof RANGE_MEDIA_FEATURES[number];
|
|
5
|
+
export type DiscreteMediaFeature = (typeof DISCRETE_MEDIA_FEATURES)[number];
|
|
6
|
+
export type RangeMediaFeature = (typeof RANGE_MEDIA_FEATURES)[number];
|
|
7
7
|
export type MediaFeature = DiscreteMediaFeature | RangeMediaFeature;
|
|
8
|
-
export type BooleanMediaFeature = typeof BOOLEAN_MEDIA_FEATURES[number];
|
|
8
|
+
export type BooleanMediaFeature = (typeof BOOLEAN_MEDIA_FEATURES)[number];
|
|
9
9
|
export declare const colorGamutValues: readonly ["srbg", "p3", "rec2020"];
|
|
10
10
|
export declare const displayModeValues: readonly ["fullscreen", "standalone", "minimal-ui", "browser", "window-controls-overlay"];
|
|
11
11
|
export declare const dynamicRangeValues: readonly ["standard", "high"];
|
|
@@ -23,38 +23,38 @@ export declare const prefersReducedMotionValues: readonly ["no-preference", "red
|
|
|
23
23
|
export declare const scriptingValues: readonly ["none", "initial-only", "enabled"];
|
|
24
24
|
export declare const updateValues: readonly ["none", "slow", "fast"];
|
|
25
25
|
export declare const videoDynamicRangeValues: readonly ["standard", "high"];
|
|
26
|
-
export type ColorGamutValue = typeof colorGamutValues[number];
|
|
27
|
-
export type DisplayModeValue = typeof displayModeValues[number];
|
|
28
|
-
export type DynamicRangeValue = typeof dynamicRangeValues[number];
|
|
29
|
-
export type ForcedColorsValue = typeof forcedColorsValues[number];
|
|
30
|
-
export type GridValue = typeof gridValues[number];
|
|
31
|
-
export type HoverValue = typeof hoverValues[number];
|
|
32
|
-
export type InvertedColorsValue = typeof invertedColorsValues[number];
|
|
33
|
-
export type OrientationValue = typeof orientationValues[number];
|
|
34
|
-
export type OverflowBlockValue = typeof overflowBlockValues[number];
|
|
35
|
-
export type OverflowInlineValue = typeof overflowInlineValues[number];
|
|
36
|
-
export type PointerValue = typeof pointerValues[number];
|
|
37
|
-
export type PrefersContrastValue = typeof prefersContrastValues[number];
|
|
38
|
-
export type PrefersColorSchemeValue = typeof prefersColorSchemeValues[number];
|
|
39
|
-
export type PrefersReducedMotionValue = typeof prefersReducedMotionValues[number];
|
|
40
|
-
export type ScriptingValue = typeof scriptingValues[number];
|
|
41
|
-
export type UpdateValue = typeof updateValues[number];
|
|
42
|
-
export type VideoDynamicRangeValue = typeof videoDynamicRangeValues[number];
|
|
43
|
-
export
|
|
26
|
+
export type ColorGamutValue = (typeof colorGamutValues)[number];
|
|
27
|
+
export type DisplayModeValue = (typeof displayModeValues)[number];
|
|
28
|
+
export type DynamicRangeValue = (typeof dynamicRangeValues)[number];
|
|
29
|
+
export type ForcedColorsValue = (typeof forcedColorsValues)[number];
|
|
30
|
+
export type GridValue = (typeof gridValues)[number];
|
|
31
|
+
export type HoverValue = (typeof hoverValues)[number];
|
|
32
|
+
export type InvertedColorsValue = (typeof invertedColorsValues)[number];
|
|
33
|
+
export type OrientationValue = (typeof orientationValues)[number];
|
|
34
|
+
export type OverflowBlockValue = (typeof overflowBlockValues)[number];
|
|
35
|
+
export type OverflowInlineValue = (typeof overflowInlineValues)[number];
|
|
36
|
+
export type PointerValue = (typeof pointerValues)[number];
|
|
37
|
+
export type PrefersContrastValue = (typeof prefersContrastValues)[number];
|
|
38
|
+
export type PrefersColorSchemeValue = (typeof prefersColorSchemeValues)[number];
|
|
39
|
+
export type PrefersReducedMotionValue = (typeof prefersReducedMotionValues)[number];
|
|
40
|
+
export type ScriptingValue = (typeof scriptingValues)[number];
|
|
41
|
+
export type UpdateValue = (typeof updateValues)[number];
|
|
42
|
+
export type VideoDynamicRangeValue = (typeof videoDynamicRangeValues)[number];
|
|
43
|
+
export interface NamedMediaQuery {
|
|
44
44
|
name: string;
|
|
45
45
|
query: string;
|
|
46
|
-
}
|
|
47
|
-
export
|
|
46
|
+
}
|
|
47
|
+
export interface ManagedMediaQuery {
|
|
48
48
|
queryList: MediaQueryList;
|
|
49
49
|
handler: MediaQueryHandler;
|
|
50
|
-
}
|
|
50
|
+
}
|
|
51
51
|
export type MediaQueryHandler = (event: MediaQueryList | MediaQueryListEvent) => void;
|
|
52
52
|
export declare const mediaFeatureValues: {
|
|
53
53
|
'any-hover': ("none" | "hover")[];
|
|
54
54
|
'any-pointer': ("none" | "coarse" | "fine")[];
|
|
55
|
-
'color-gamut': ("
|
|
56
|
-
'display-mode': ("
|
|
57
|
-
'dynamic-range': ("
|
|
55
|
+
'color-gamut': ("srbg" | "p3" | "rec2020")[];
|
|
56
|
+
'display-mode': ("fullscreen" | "standalone" | "minimal-ui" | "browser" | "window-controls-overlay")[];
|
|
57
|
+
'dynamic-range': ("standard" | "high")[];
|
|
58
58
|
'forced-colors': ("none" | "active")[];
|
|
59
59
|
grid: (0 | 1)[];
|
|
60
60
|
hover: ("none" | "hover")[];
|
|
@@ -63,12 +63,12 @@ export declare const mediaFeatureValues: {
|
|
|
63
63
|
'overflow-block': ("none" | "scroll" | "optional-paged" | "paged")[];
|
|
64
64
|
'overflow-inline': ("none" | "scroll")[];
|
|
65
65
|
pointer: ("none" | "coarse" | "fine")[];
|
|
66
|
-
'prefers-contrast': ("
|
|
66
|
+
'prefers-contrast': ("no-preference" | "more" | "less" | "custom")[];
|
|
67
67
|
'prefers-color-scheme': ("light" | "dark")[];
|
|
68
68
|
'prefers-reduced-motion': ("reduce" | "no-preference")[];
|
|
69
69
|
scripting: ("none" | "initial-only" | "enabled")[];
|
|
70
70
|
update: ("none" | "slow" | "fast")[];
|
|
71
|
-
'video-dynamic-range': ("
|
|
71
|
+
'video-dynamic-range': ("standard" | "high")[];
|
|
72
72
|
};
|
|
73
73
|
export interface IMediaObserverOptions {
|
|
74
74
|
name?: string;
|
|
@@ -19,15 +19,7 @@ export const DISCRETE_MEDIA_FEATURES = [
|
|
|
19
19
|
'update',
|
|
20
20
|
'video-dynamic-range'
|
|
21
21
|
];
|
|
22
|
-
export const RANGE_MEDIA_FEATURES = [
|
|
23
|
-
'aspect-ratio',
|
|
24
|
-
'color',
|
|
25
|
-
'color-index',
|
|
26
|
-
'height',
|
|
27
|
-
'monochrome',
|
|
28
|
-
'resolution',
|
|
29
|
-
'width'
|
|
30
|
-
];
|
|
22
|
+
export const RANGE_MEDIA_FEATURES = ['aspect-ratio', 'color', 'color-index', 'height', 'monochrome', 'resolution', 'width'];
|
|
31
23
|
export const ALL_MEDIA_FEATURES = [...DISCRETE_MEDIA_FEATURES, ...RANGE_MEDIA_FEATURES];
|
|
32
24
|
export const BOOLEAN_MEDIA_FEATURES = [
|
|
33
25
|
'any-hover',
|
|
@@ -75,17 +67,17 @@ export const mediaFeatureValues = {
|
|
|
75
67
|
'display-mode': Array.from(displayModeValues.values()),
|
|
76
68
|
'dynamic-range': Array.from(dynamicRangeValues.values()),
|
|
77
69
|
'forced-colors': Array.from(forcedColorsValues.values()),
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
grid: Array.from(gridValues.values()),
|
|
71
|
+
hover: Array.from(hoverValues.values()),
|
|
80
72
|
'inverted-colors': Array.from(invertedColorsValues.values()),
|
|
81
|
-
|
|
73
|
+
orientation: Array.from(orientationValues.values()),
|
|
82
74
|
'overflow-block': Array.from(overflowBlockValues.values()),
|
|
83
75
|
'overflow-inline': Array.from(overflowInlineValues.values()),
|
|
84
|
-
|
|
76
|
+
pointer: Array.from(pointerValues.values()),
|
|
85
77
|
'prefers-contrast': Array.from(prefersContrastValues.values()),
|
|
86
78
|
'prefers-color-scheme': Array.from(prefersColorSchemeValues.values()),
|
|
87
79
|
'prefers-reduced-motion': Array.from(prefersReducedMotionValues.values()),
|
|
88
|
-
|
|
89
|
-
|
|
80
|
+
scripting: Array.from(scriptingValues.values()),
|
|
81
|
+
update: Array.from(updateValues.values()),
|
|
90
82
|
'video-dynamic-range': Array.from(videoDynamicRangeValues.values())
|
|
91
83
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './message-list-entry';
|
|
2
|
-
export * from './message-list';
|
|
1
|
+
export * from './message-list-entry.js';
|
|
2
|
+
export * from './message-list.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './message-list-entry';
|
|
2
|
-
export * from './message-list';
|
|
1
|
+
export * from './message-list-entry.js';
|
|
2
|
+
export * from './message-list.js';
|