@brightspace-ui/core 2.91.3 → 2.93.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/components/demo/demo-page.js +2 -1
  2. package/components/inputs/README.md +1 -0
  3. package/components/inputs/demo/input-color-palette.js +67 -0
  4. package/components/inputs/demo/input-color.html +51 -0
  5. package/components/inputs/docs/input-color.md +60 -0
  6. package/components/inputs/input-color.js +414 -0
  7. package/custom-elements.json +161 -0
  8. package/lang/ar.js +3 -0
  9. package/lang/cy.js +3 -0
  10. package/lang/da.js +3 -0
  11. package/lang/de.js +3 -0
  12. package/lang/en-gb.js +129 -0
  13. package/lang/en.js +3 -0
  14. package/lang/es-es.js +3 -0
  15. package/lang/es.js +3 -0
  16. package/lang/fr-fr.js +3 -0
  17. package/lang/fr.js +3 -0
  18. package/lang/hi.js +3 -0
  19. package/lang/ja.js +3 -0
  20. package/lang/ko.js +3 -0
  21. package/lang/nl.js +3 -0
  22. package/lang/pt.js +3 -0
  23. package/lang/sv.js +3 -0
  24. package/lang/tr.js +3 -0
  25. package/lang/zh-cn.js +3 -0
  26. package/lang/zh-tw.js +3 -0
  27. package/mixins/localize-dynamic-mixin.js +1 -1
  28. package/package.json +1 -1
package/components/demo/demo-page.js CHANGED
@@ -80,7 +80,8 @@ class DemoPage extends LitElement {
80
80
  const classes = {
81
81
  'no-scroll': this._noScroll
82
82
  };
83
- const selectedLanguageCode = getDocumentLocaleSettings().language;
83
+ let selectedLanguageCode = getDocumentLocaleSettings().language;
84
+ if (selectedLanguageCode === 'en') selectedLanguageCode = 'en-us';
84
85
  let foundSelected = false;
85
86
  const languageOptions = supportedLocalesDetails.map((l) => {
86
87
  const selected = !foundSelected && l.code.startsWith(selectedLanguageCode);
package/components/inputs/README.md CHANGED
@@ -3,6 +3,7 @@
3
3
  There are various input components available:
4
4
 
5
5
  - [Checkboxes (input-checkbox*)](docs/input-checkbox.md)
6
+ - [Color Input (input-color)](docs/input-color.md)
6
7
  - [Date & Time Inputs (input-date, input-time, input-date-time)](docs/input-date-time.md)
7
8
  - [Numeric Inputs (input-number, input-percent)](docs/input-numeric.md)
8
9
  - [Radio Buttons (input-radio-*)](docs/input-radio.md)
package/components/inputs/demo/input-color-palette.js ADDED
@@ -0,0 +1,67 @@
1
+ import '../../button/button.js';
2
+ import '../input-text.js';
3
+ import { css, html, LitElement } from 'lit';
4
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
+
6
+ class InputColorPalette extends LitElement {
7
+
8
+ static get properties() {
9
+ return {
10
+ value: { type: String }
11
+ };
12
+ }
13
+
14
+ static get styles() {
15
+ return [ css`
16
+ :host {
17
+ display: block;
18
+ padding: 12px;
19
+ }
20
+ :host([hidden]) {
21
+ display: none;
22
+ }
23
+ p {
24
+ margin-top: 0;
25
+ }
26
+ span {
27
+ margin: 0 0.2rem 0 0.55rem;
28
+ }
29
+ div {
30
+ align-items: flex-end;
31
+ display: flex;
32
+ gap: 6px;
33
+ }
34
+ `];
35
+ }
36
+
37
+ render() {
38
+ return html`
39
+ <p>On a MVC page, its color palette will render in here.</p>
40
+ <div>
41
+ <d2l-input-text input-width="120px" label="Value (HEX)" maxlength="6" value="${ifDefined(this.value)}"><span slot="left" aria-hidden="true">#</span></d2l-input-text>
42
+ <d2l-button primary @click="${this._handleOK}">OK</d2l-button>
43
+ <d2l-button @click="${this._handleCancel}">Cancel</d2l-button>
44
+ </div>
45
+ `;
46
+ }
47
+
48
+ _handleCancel() {
49
+ this.dispatchEvent(new CustomEvent(
50
+ 'd2l-input-color-dropdown-close', { bubbles: true, composed: false }
51
+ ));
52
+ }
53
+
54
+ _handleOK() {
55
+ let value = this.shadowRoot.querySelector('d2l-input-text').value.trim();
56
+ if (value.length === 0) {
57
+ value = undefined;
58
+ } else {
59
+ value = `#${value}`;
60
+ }
61
+ this.dispatchEvent(new CustomEvent(
62
+ 'd2l-input-color-dropdown-close', { bubbles: true, composed: false, detail: { newValue: value } }
63
+ ));
64
+ }
65
+
66
+ }
67
+ customElements.define('d2l-test-input-color-palette', InputColorPalette);
package/components/inputs/demo/input-color.html ADDED
@@ -0,0 +1,51 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta charset="UTF-8">
6
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script type="module">
8
+ import '../../demo/demo-page.js';
9
+ import '../input-color.js';
10
+ import './input-color-palette.js';
11
+ </script>
12
+ <style>
13
+ d2l-input-color {
14
+ margin-inline-end: 30px;
15
+ vertical-align: top;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body unresolved>
20
+ <d2l-demo-page page-title="d2l-input-color">
21
+
22
+ <h2>Normal (dropdown)</h2>
23
+ <d2l-demo-snippet>
24
+ <template>
25
+ <d2l-input-color type="foreground" launch-type="dropdown" disallow-none value="#D97B32"><d2l-test-input-color-palette value="D97B32"></d2l-test-input-color-palette></d2l-input-color>
26
+ <d2l-input-color type="background" launch-type="dropdown"><d2l-test-input-color-palette></d2l-test-input-color-palette></d2l-input-color>
27
+ <d2l-input-color label="Custom Color" type="custom" launch-type="dropdown" value="#8ad934"><d2l-test-input-color-palette value="8ad934"></d2l-test-input-color-palette></d2l-input-color>
28
+ </template>
29
+ </d2l-demo-snippet>
30
+
31
+ <h2>Readonly</h2>
32
+ <d2l-demo-snippet>
33
+ <template>
34
+ <d2l-input-color type="foreground" disallow-none value="#D97B32" readonly></d2l-input-color>
35
+ <d2l-input-color type="background" readonly></d2l-input-color>
36
+ <d2l-input-color label="Custom Color" type="custom" value="#8ad934" readonly></d2l-input-color>
37
+ </template>
38
+ </d2l-demo-snippet>
39
+
40
+ <h2>Disabled</h2>
41
+ <d2l-demo-snippet>
42
+ <template>
43
+ <d2l-input-color type="foreground" disallow-none value="#D97B32" disabled></d2l-input-color>
44
+ <d2l-input-color type="background" disabled></d2l-input-color>
45
+ <d2l-input-color label="Custom Color" type="custom" value="#8ad934" disabled></d2l-input-color>
46
+ </template>
47
+ </d2l-demo-snippet>
48
+
49
+ </d2l-demo-page>
50
+ </body>
51
+ </html>
package/components/inputs/docs/input-color.md ADDED
@@ -0,0 +1,60 @@
1
+ # Color Inputs
2
+
3
+ Color inputs allow users to select a color from a palette and perform color contrast analysis.
4
+
5
+ > **Note**: Color inputs rely on functionality only available in the MVC framework, and can therefore only be used inside a MVC page. This restriction may go away in the future as more functionality is built into the color input web component itself.
6
+
7
+ <!-- docs: demo -->
8
+ ```html
9
+ <script type="module">
10
+ import '@brightspace-ui/core/components/inputs/input-color.js';
11
+ </script>
12
+ <d2l-input-color type="foreground" value="#ff0000"></d2l-input-color>
13
+ ```
14
+
15
+ ## Color Input [d2l-input-color]
16
+
17
+ The `<d2l-input-color>` will open a dialog to allow the user to select a color from a palette.
18
+
19
+ <!-- docs: demo live name:d2l-input-color -->
20
+ ```html
21
+ <script type="module">
22
+ import '@brightspace-ui/core/components/inputs/input-color.js';
23
+ </script>
24
+ <d2l-input-color type="background" value="#00ff00"></d2l-input-color>
25
+ ```
26
+
27
+ <!-- docs: start hidden content -->
28
+ ### Properties
29
+
30
+ | Property | Type | Description |
31
+ |---|---|---|
32
+ | `associated-value` | String | Optional value of an associated color as a HEX which will be used for color contrast analysis. |
33
+ | `disabled` | Boolean, default: `false` | Disables the input. |
34
+ | `disallow-none` | Boolean, default: `false` | Disallows the user from selecting "None" as a color value. |
35
+ | `label` | String, required | Label for the input. Comes with a default value for background & foreground types. |
36
+ | `label-hidden` | Boolean, default: `false` | Hides the label visually. |
37
+ | `readonly` | Boolean, default: `false` | Puts the input into a read-only state. |
38
+ | `type` | String, default: `custom` | Type of color being chosen. Can be one of: `custom`, `background`, `foreground`. |
39
+ | `value` | Number | Value of the input. |
40
+
41
+ ### Events
42
+
43
+ * `change`: Dispatched when the value is changed.
44
+
45
+ ```javascript
46
+ // fired when value changes are committed
47
+ input.addEventListener('change', (e) => {
48
+ console.log(input.value);
49
+ });
50
+ ```
51
+ <!-- docs: end hidden content -->
52
+
53
+ ### Accessibility Properties
54
+
55
+ To make your usage of `d2l-input-color` accessible, use the following properties when applicable:
56
+
57
+ | Attribute | Description |
58
+ |---|---|
59
+ | `label` | **REQUIRED** when type is `custom`. [Acts as a primary label for the button](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
60
+ | `label-hidden` | Use if label should be visually hidden. |
package/components/inputs/input-color.js ADDED
@@ -0,0 +1,414 @@
1
+ import '../dropdown/dropdown.js';
2
+ import '../dropdown/dropdown-content.js';
3
+ import '../tooltip/tooltip.js';
4
+ import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
5
+ import { buttonStyles } from '../button/button-styles.js';
6
+ import { classMap } from 'lit/directives/class-map.js';
7
+ import { FocusMixin } from '../../mixins/focus-mixin.js';
8
+ import { FormElementMixin } from '../form/form-element-mixin.js';
9
+ import { getFocusPseudoClass } from '../../helpers/focus.js';
10
+ import { ifDefined } from 'lit/directives/if-defined.js';
11
+ import { inputLabelStyles } from './input-label-styles.js';
12
+ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
13
+ import { styleMap } from 'lit/directives/style-map.js';
14
+
15
+ const DEFAULT_VALUE = '#000000';
16
+ const DEFAULT_VALUE_BG = '#FFFFFF';
17
+ const HEX_REGEX = /#([0-9a-fA-F]){6}/;
18
+ const ICON_BACKGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="none" viewBox="0 0 16 13">
19
+ <g fill="#202122" clip-path="url(#a)">
20
+ <path fill-rule="evenodd" d="M1.609 5.356c-2.706 2.706 4.329 9.741 7.035 7.035l4.87-4.87C15.897 5.137 8.862-1.898 6.48.486l-4.87 4.87Zm5.945 5.297L12 6.207a1.774 1.774 0 0 0-.116-.42c-.231-.613-.766-1.41-1.514-2.157-.748-.748-1.545-1.283-2.158-1.515A1.774 1.774 0 0 0 7.793 2L3.347 6.446c.988.286 1.898.863 2.62 1.586.724.723 1.301 1.633 1.587 2.62Zm.154-8.65c-.001-.002.011-.006.04-.006-.024.008-.038.008-.04.006Zm4.289 4.289c-.002-.002-.002-.016.005-.04 0 .029-.003.041-.005.04Z" clip-rule="evenodd"/>
21
+ <path d="M12.994 11c0 1 .506 1.5 1.506 1.5S16 12 16 11c0-2-1-4.5-1.794-4.526 0 2.526-1.211 2.851-1.212 4.525Z"/>
22
+ <path fill-rule="evenodd" d="M7.544 4.205a.55.55 0 0 1-.004-.01c-.334-.785-.925-1.602-1.603-2.218C5.244 1.347 4.543 1 4 1a.227.227 0 0 0-.086.011.208.208 0 0 0-.027.073c-.039.162-.02.44.066.8.081.343.205.694.312.964a9.174 9.174 0 0 0 .174.41l.01.022.002.005v.001a.5.5 0 0 1-.903.428L4 3.5l-.452.214v-.001l-.002-.002-.003-.008-.013-.028a10.168 10.168 0 0 1-.195-.46 8.313 8.313 0 0 1-.355-1.1c-.092-.39-.161-.86-.066-1.262.05-.21.153-.436.355-.606C3.475.073 3.731 0 4 0c.914 0 1.849.545 2.61 1.237a7.784 7.784 0 0 1 1.719 2.278 1 1 0 1 1-.784.69ZM3.91 1.014l.003-.002-.003.002Z" clip-rule="evenodd"/>
23
+ </g>
24
+ <defs>
25
+ <clipPath id="a">
26
+ <path fill="#fff" d="M0 0h16v13H0z"/>
27
+ </clipPath>
28
+ </defs>
29
+ </svg>`;
30
+ const ICON_FOREGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="none" viewBox="0 0 16 13">
31
+ <g clip-path="url(#a)">
32
+ <path fill="#202122" d="M10.325 8.086 8.74 3.757a9.472 9.472 0 0 1-.243-.684 22.281 22.281 0 0 1-.252-.855c-.078.306-.16.594-.243.864-.084.264-.165.495-.243.693L6.185 8.086h4.14ZM14.6 13h-1.872a.815.815 0 0 1-.513-.153 1.016 1.016 0 0 1-.297-.396l-.972-2.655H5.555l-.972 2.655a.863.863 0 0 1-.28.378.779.779 0 0 1-.512.171H1.9L7.02-.014h2.467L14.6 13Z"/>
33
+ </g>
34
+ <defs>
35
+ <clipPath id="a">
36
+ <path fill="#fff" d="M0 0h16v13H0z"/>
37
+ </clipPath>
38
+ </defs>
39
+ </svg>`;
40
+ const SWATCH_TRANSPARENT = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" fill="none" viewBox="0 0 24 20">
41
+ <mask id="a" width="24" height="20" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">
42
+ <path fill="#fff" d="M0 0h24v20H0z"/>
43
+ <path stroke="#000" stroke-opacity=".42" d="M.5.5h23v19H.5z"/>
44
+ </mask>
45
+ <g mask="url(#a)">
46
+ <path fill="#000" fill-opacity=".1" d="M0 0h4v4H0z"/>
47
+ <path fill="#fff" fill-opacity=".6" d="M4 0h4v4H4z"/>
48
+ <path fill="#000" fill-opacity=".1" d="M8 0h4v4H8z"/>
49
+ <path fill="#fff" fill-opacity=".6" d="M12 0h4v4h-4z"/>
50
+ <path fill="#000" fill-opacity=".1" d="M16 0h4v4h-4z"/>
51
+ <path fill="#fff" fill-opacity=".6" d="M20 0h4v4h-4z"/>
52
+ <path fill="#000" fill-opacity=".1" d="M0 16h4v4H0z"/>
53
+ <path fill="#fff" fill-opacity=".6" d="M4 16h4v4H4z"/>
54
+ <path fill="#000" fill-opacity=".1" d="M8 16h4v4H8z"/>
55
+ <path fill="#fff" fill-opacity=".6" d="M12 16h4v4h-4z"/>
56
+ <path fill="#000" fill-opacity=".1" d="M16 16h4v4h-4z"/>
57
+ <path fill="#fff" fill-opacity=".6" d="M20 16h4v4h-4z"/>
58
+ <path fill="#000" fill-opacity=".1" d="M20 4h4v4h-4z"/>
59
+ <path fill="#fff" fill-opacity=".6" d="M0 4h4v4H0z"/>
60
+ <path fill="#000" fill-opacity=".1" d="M4 4h4v4H4z"/>
61
+ <path fill="#fff" fill-opacity=".6" d="M8 4h4v4H8z"/>
62
+ <path fill="#000" fill-opacity=".1" d="M12 4h4v4h-4z"/>
63
+ <path fill="#fff" fill-opacity=".6" d="M16 4h4v4h-4z"/>
64
+ <path fill="#000" fill-opacity=".1" d="M0 8h4v4H0z"/>
65
+ <path fill="#fff" fill-opacity=".6" d="M4 8h4v4H4z"/>
66
+ <path fill="#000" fill-opacity=".1" d="M8 8h4v4H8z"/>
67
+ <path fill="#fff" fill-opacity=".6" d="M12 8h4v4h-4z"/>
68
+ <path fill="#000" fill-opacity=".1" d="M16 8h4v4h-4z"/>
69
+ <path fill="#fff" fill-opacity=".6" d="M20 8h4v4h-4z"/>
70
+ <path fill="#000" fill-opacity=".1" d="M20 12h4v4h-4z"/>
71
+ <path fill="#fff" fill-opacity=".6" d="M0 12h4v4H0z"/>
72
+ <path fill="#000" fill-opacity=".1" d="M4 12h4v4H4z"/>
73
+ <path fill="#fff" fill-opacity=".6" d="M8 12h4v4H8z"/>
74
+ <path fill="#000" fill-opacity=".1" d="M12 12h4v4h-4z"/>
75
+ <path fill="#fff" fill-opacity=".6" d="M16 12h4v4h-4z"/>
76
+ </g>
77
+ </svg>`;
78
+
79
+ /**
80
+ * This component allows for inputting a HEX color value.
81
+ * @fires change - Dispatched when an alteration to the value is committed by the user.
82
+ */
83
+ class InputColor extends FocusMixin(FormElementMixin(LocalizeCoreElement(LitElement))) {
84
+
85
+ static get properties() {
86
+ return {
87
+ /**
88
+ * Value of an associated color as a HEX which will be used for color contrast analysis
89
+ * @type {string}
90
+ */
91
+ associatedValue: { attribute: 'associated-value', type: String },
92
+ /**
93
+ * Puts the input into a disabled state
94
+ * @type {boolean}
95
+ */
96
+ disabled: { reflect: true, type: Boolean },
97
+ /**
98
+ * Disallows the user from selecting "None" as a color value
99
+ * @type {boolean}
100
+ */
101
+ disallowNone: { attribute: 'disallow-none', type: Boolean },
102
+ /**
103
+ * REQUIRED: Label for the input, comes with a default value for background & foreground types.
104
+ * @type {string}
105
+ */
106
+ label: { type: String },
107
+ /**
108
+ * Hides the label visually
109
+ * @type {boolean}
110
+ */
111
+ labelHidden: { attribute: 'label-hidden', type: Boolean },
112
+ /**
113
+ * Puts the input into a read-only state
114
+ * @type {boolean}
115
+ */
116
+ readonly: { type: Boolean },
117
+ /**
118
+ * Type of color being chosen
119
+ * @type {'background'|'foreground'|'custom'}
120
+ * @default end
121
+ */
122
+ type: { reflect: true, type: String },
123
+ /**
124
+ * Value of the input as a HEX color
125
+ * @type {string}
126
+ */
127
+ value: { type: String },
128
+ /**
129
+ * @ignore
130
+ */
131
+ launchType: { attribute: 'launch-type', type: String },
132
+ _opened: { state: true }
133
+ };
134
+ }
135
+
136
+ static get styles() {
137
+ return [ buttonStyles, inputLabelStyles,
138
+ css`
139
+ :host {
140
+ display: inline-block;
141
+ }
142
+ :host([hidden]) {
143
+ display: none;
144
+ }
145
+
146
+ button {
147
+ align-items: center;
148
+ background-color: var(--d2l-color-gypsum);
149
+ display: flex;
150
+ gap: 0.15rem;
151
+ min-height: auto;
152
+ padding: 0.55rem;
153
+ position: relative;
154
+ }
155
+ button:not([aria-disabled]):hover,
156
+ button:not([aria-disabled]):focus,
157
+ button.opened {
158
+ background-color: var(--d2l-color-mica);
159
+ }
160
+ :host([disabled]) button {
161
+ cursor: default;
162
+ opacity: 0.5;
163
+ }
164
+ /* Firefox includes a hidden border which messes up button dimensions */
165
+ button::-moz-focus-inner {
166
+ border: 0;
167
+ }
168
+
169
+ .d2l-input-label {
170
+ margin-bottom: 0;
171
+ padding-bottom: 7px; /* prevent margin-collapse with readonly swatch margins */
172
+ }
173
+
174
+ .swatch {
175
+ border: 1px inset rgba(0, 0, 0, 0.42);
176
+ border-radius: 0.1rem;
177
+ box-sizing: border-box;
178
+ display: inline-block;
179
+ height: 0.3rem;
180
+ width: 1.2rem;
181
+ }
182
+ :host([type="custom"]) .swatch {
183
+ border-radius: 0.15rem;
184
+ height: 1rem;
185
+ }
186
+ .swatch-transparent {
187
+ background-image: url("data:image/svg+xml;base64,${unsafeCSS(btoa(SWATCH_TRANSPARENT))}");
188
+ background-position-y: -1.5px;
189
+ background-size: cover;
190
+ }
191
+ :host([type="custom"]) .swatch-transparent {
192
+ background-position-y: 0;
193
+ }
194
+
195
+ .icon-wrapper {
196
+ align-items: center;
197
+ display: flex;
198
+ flex-direction: column;
199
+ gap: 0.1rem;
200
+ }
201
+ .icon-wrapper > svg {
202
+ height: 0.6rem;
203
+ }
204
+
205
+ .readonly-wrapper {
206
+ border-radius: 0.1rem;
207
+ display: block;
208
+ line-height: 0;
209
+ margin: 0.55rem 0;
210
+ outline: none;
211
+ width: 1.2rem;
212
+ }
213
+ .readonly-wrapper:focus {
214
+ outline: none;
215
+ }
216
+ .readonly-wrapper.focus-visible,
217
+ .readonly-wrapper:${unsafeCSS(getFocusPseudoClass())} {
218
+ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
219
+ }
220
+ `
221
+ ];
222
+ }
223
+
224
+ constructor() {
225
+ super();
226
+ this.disabled = false;
227
+ this.disallowNone = false;
228
+ this.labelHidden = false;
229
+ this.launchType = 'dialog';
230
+ this.readonly = false;
231
+ this.type = 'custom';
232
+ this._associatedValue = undefined;
233
+ this._missingLabelErrorHasBeenThrown = false;
234
+ this._opened = false;
235
+ this._validatingLabelTimeout = null;
236
+ this._value = undefined;
237
+ }
238
+
239
+ get associatedValue() { return this._associatedValue; }
240
+ set associatedValue(val) {
241
+ if (val !== undefined && !HEX_REGEX.test(val)) {
242
+ throw new TypeError(`<d2l-input-color>: invalid HEX associated-value "${val}"`);
243
+ }
244
+ const oldVal = this._associatedValue;
245
+ this._associatedValue = (typeof val === 'string') ? val.toUpperCase() : undefined;
246
+ this.requestUpdate('associatedValue', oldVal);
247
+ }
248
+
249
+ get value() {
250
+ if (this._value === undefined && this.disallowNone) {
251
+ return this.type === 'background' ? DEFAULT_VALUE_BG : DEFAULT_VALUE;
252
+ }
253
+ return this._value;
254
+ }
255
+ set value(val) {
256
+ if (val !== undefined && !HEX_REGEX.test(val)) {
257
+ throw new TypeError(`<d2l-input-color>: invalid HEX value "${val}"`);
258
+ }
259
+ const oldVal = this._value;
260
+ this._value = (typeof val === 'string') ? val.toUpperCase() : undefined;
261
+ this.requestUpdate('value', oldVal);
262
+ }
263
+
264
+ static get focusElementSelector() {
265
+ return '#opener';
266
+ }
267
+
268
+ firstUpdated(changedProperties) {
269
+ super.firstUpdated(changedProperties);
270
+ this._validateLabel();
271
+ }
272
+
273
+ render() {
274
+
275
+ const label = !this.labelHidden ? html`<div class="d2l-input-label">${this._getLabel()}</div>` : nothing;
276
+ const tooltip = !this._opened ? html`<d2l-tooltip for="opener" for-type="label">${this._getTooltipLabel()}</d2l-tooltip>` : nothing;
277
+ const opener = this._getOpener();
278
+
279
+ return html`${label}${opener}${tooltip}`;
280
+
281
+ }
282
+
283
+ async updated(changedProperties) {
284
+
285
+ super.updated(changedProperties);
286
+
287
+ if (changedProperties.has('label') || changedProperties.has('type')) this._validateLabel();
288
+
289
+ }
290
+
291
+ _getLabel() {
292
+ if (this.label !== undefined) return this.label;
293
+ if (this.type === 'background') return this.localize('components.input-color.backgroundColor');
294
+ if (this.type === 'foreground') return this.localize('components.input-color.foregroundColor');
295
+ return '';
296
+ }
297
+
298
+ _getOpener() {
299
+ if (this.readonly) {
300
+ return html`<div class="readonly-wrapper" id="opener" role="img" tabindex="0">${this._getSwatch()}</div>`;
301
+ }
302
+ const buttonClass = {
303
+ 'd2l-button': true,
304
+ 'd2l-dropdown-opener': this.launchType === 'dropdown',
305
+ 'opened': this._opened
306
+ };
307
+ const ariaLabel = this._opened ? this._getTooltipLabel() : undefined;
308
+ const button = html`
309
+ <button id="opener" class="${classMap(buttonClass)}" aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" aria-label="${ifDefined(ariaLabel)}" @click="${this._handleOpenDialog}">
310
+ ${this._getSwatch()}
311
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none" viewBox="0 0 10 6">
312
+ <path fill="#202122" d="M4.792 5.528a.733.733 0 0 1-.537-.223L.224 1.282a.745.745 0 0 1 0-1.065.751.751 0 0 1 1.057 0l3.51 3.511L8.303.218A.751.751 0 0 1 9.36 1.281L5.337 5.305a.753.753 0 0 1-.535.223h-.01Z"/>
313
+ </svg>
314
+ </button>`;
315
+ if (this.launchType === 'dialog') {
316
+ return button;
317
+ }
318
+ return html`
319
+ <d2l-dropdown @d2l-dropdown-close="${this._handleClose}" @d2l-dropdown-open="${this._handleOpenDropdown}">
320
+ ${button}
321
+ <d2l-dropdown-content max-width="350" mobile-tray="left" no-padding ?opened="${this._opened}">
322
+ <slot @d2l-input-color-dropdown-close="${this._handleCloseRequest}"><div style="padding: 10px">Currently, color inputs only support a "launch-type" of "dropdown" from within the MVC framework. Use "launch-type" of "dialog" instead.</div></slot>
323
+ </d2l-dropdown-content>
324
+ </d2l-dropdown>`;
325
+ }
326
+
327
+ _getSwatch() {
328
+ const styles = {
329
+ backgroundColor: this.value ?? 'transparent'
330
+ };
331
+ const swatchClass = {
332
+ 'swatch': true,
333
+ 'swatch-transparent': (this.value === undefined)
334
+ };
335
+ const swatch = html`<div class="${classMap(swatchClass)}" style="${styleMap(styles)}"></div>`;
336
+ if (this.type === 'background' || this.type === 'foreground') {
337
+ const icon = (this.type === 'background') ? ICON_BACKGROUND : ICON_FOREGROUND;
338
+ return html`<div class="icon-wrapper">${icon}${swatch}</div>`;
339
+ }
340
+ return swatch;
341
+ }
342
+
343
+ _getTooltipLabel() {
344
+ const valueLabel = this.value !== undefined ? this.value : this.localize('components.input-color.none');
345
+ return `${this._getLabel()}: ${valueLabel}.`;
346
+ }
347
+
348
+ _handleClose() {
349
+ this._opened = false;
350
+ this.dispatchEvent(new CustomEvent(
351
+ 'd2l-input-color-close', { bubbles: false, composed: false }
352
+ ));
353
+ }
354
+
355
+ _handleCloseRequest(e) {
356
+ if (this.launchType !== 'dropdown') return;
357
+ this._opened = false;
358
+ if (!e.detail) return;
359
+ this._updateValueAndDispatchEvent(e.detail.newValue);
360
+ }
361
+
362
+ _handleOpenDialog() {
363
+ if (this.launchType !== 'dialog') return;
364
+ if (window?.D2L?.LP?.Web?.UI?.Desktop?.MasterPages?.Dialog?.Open === undefined) {
365
+ console.warn('<d2l-color-input>: when "launch-type" is "dialog", component must be hosted in a LMS page.');
366
+ return;
367
+ }
368
+ let url = new D2L.LP.Web.Http.UrlLocation('/d2l/lp/colourSelector')
369
+ .WithQueryString('type', this.type);
370
+ if (this.value !== undefined) {
371
+ url = url.WithQueryString('value', this.value);
372
+ }
373
+ if (this.associatedValue !== undefined) {
374
+ url = url.WithQueryString('associatedValue', this.associatedValue);
375
+ }
376
+ const callback = (val) => {
377
+ if (val === undefined) return; // cancel from dialog
378
+ this._updateValueAndDispatchEvent(val);
379
+ };
380
+ const dialogResult = D2L.LP.Web.UI.Desktop.MasterPages.Dialog.Open(this, url);
381
+ dialogResult.AddReleaseListener(callback);
382
+ dialogResult.AddListener(callback);
383
+ }
384
+
385
+ _handleOpenDropdown() {
386
+ this._opened = true;
387
+ this.dispatchEvent(new CustomEvent(
388
+ 'd2l-input-color-open', { bubbles: false, composed: false }
389
+ ));
390
+ }
391
+
392
+ _updateValueAndDispatchEvent(newVal) {
393
+ newVal = (typeof newVal === 'string') ? newVal.toUpperCase() : undefined;
394
+ if (newVal === this.value) return;
395
+ this.value = newVal;
396
+ this.dispatchEvent(new CustomEvent(
397
+ 'change', { bubbles: true, composed: false }
398
+ ));
399
+ }
400
+
401
+ _validateLabel() {
402
+ clearTimeout(this._validatingLabelTimeout);
403
+ // don't error immediately in case it doesn't get set immediately
404
+ this._validatingLabelTimeout = setTimeout(() => {
405
+ this._validatingLabelTimeout = null;
406
+ const hasLabel = (typeof this.label === 'string') && this.label.length > 0;
407
+ if (!hasLabel && this.type === 'custom') {
408
+ throw new Error('<d2l-input-color>: "label" attribute is required when "type" is "custom"');
409
+ }
410
+ }, 3000);
411
+ }
412
+
413
+ }
414
+ customElements.define('d2l-input-color', InputColor);
package/custom-elements.json CHANGED
@@ -4315,6 +4315,28 @@
4315
4315
  }
4316
4316
  ]
4317
4317
  },
4318
+ {
4319
+ "name": "d2l-test-input-color-palette",
4320
+ "path": "./components/inputs/demo/input-color-palette.js",
4321
+ "attributes": [
4322
+ {
4323
+ "name": "value",
4324
+ "type": "string"
4325
+ }
4326
+ ],
4327
+ "properties": [
4328
+ {
4329
+ "name": "value",
4330
+ "attribute": "value",
4331
+ "type": "string"
4332
+ }
4333
+ ],
4334
+ "events": [
4335
+ {
4336
+ "name": "d2l-input-color-dropdown-close"
4337
+ }
4338
+ ]
4339
+ },
4318
4340
  {
4319
4341
  "name": "d2l-test-input-radio-label-simple",
4320
4342
  "path": "./components/inputs/demo/input-radio-label-simple-test.js"
@@ -4567,6 +4589,145 @@
4567
4589
  }
4568
4590
  ]
4569
4591
  },
4592
+ {
4593
+ "name": "d2l-input-color",
4594
+ "path": "./components/inputs/input-color.js",
4595
+ "description": "This component allows for inputting a HEX color value.",
4596
+ "attributes": [
4597
+ {
4598
+ "name": "label",
4599
+ "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
4600
+ "type": "string"
4601
+ },
4602
+ {
4603
+ "name": "associated-value",
4604
+ "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
4605
+ "type": "string"
4606
+ },
4607
+ {
4608
+ "name": "value",
4609
+ "description": "Value of the input as a HEX color",
4610
+ "type": "string"
4611
+ },
4612
+ {
4613
+ "name": "disabled",
4614
+ "description": "Puts the input into a disabled state",
4615
+ "type": "boolean",
4616
+ "default": "false"
4617
+ },
4618
+ {
4619
+ "name": "disallow-none",
4620
+ "description": "Disallows the user from selecting \"None\" as a color value",
4621
+ "type": "boolean",
4622
+ "default": "false"
4623
+ },
4624
+ {
4625
+ "name": "label-hidden",
4626
+ "description": "Hides the label visually",
4627
+ "type": "boolean",
4628
+ "default": "false"
4629
+ },
4630
+ {
4631
+ "name": "readonly",
4632
+ "description": "Puts the input into a read-only state",
4633
+ "type": "boolean",
4634
+ "default": "false"
4635
+ },
4636
+ {
4637
+ "name": "type",
4638
+ "description": "Type of color being chosen",
4639
+ "type": "'background'|'foreground'|'custom'",
4640
+ "default": "\"end\""
4641
+ },
4642
+ {
4643
+ "name": "name",
4644
+ "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
4645
+ "type": "string"
4646
+ }
4647
+ ],
4648
+ "properties": [
4649
+ {
4650
+ "name": "label",
4651
+ "attribute": "label",
4652
+ "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
4653
+ "type": "string"
4654
+ },
4655
+ {
4656
+ "name": "associatedValue",
4657
+ "attribute": "associated-value",
4658
+ "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
4659
+ "type": "string"
4660
+ },
4661
+ {
4662
+ "name": "value",
4663
+ "attribute": "value",
4664
+ "description": "Value of the input as a HEX color",
4665
+ "type": "string"
4666
+ },
4667
+ {
4668
+ "name": "disabled",
4669
+ "attribute": "disabled",
4670
+ "description": "Puts the input into a disabled state",
4671
+ "type": "boolean",
4672
+ "default": "false"
4673
+ },
4674
+ {
4675
+ "name": "disallowNone",
4676
+ "attribute": "disallow-none",
4677
+ "description": "Disallows the user from selecting \"None\" as a color value",
4678
+ "type": "boolean",
4679
+ "default": "false"
4680
+ },
4681
+ {
4682
+ "name": "labelHidden",
4683
+ "attribute": "label-hidden",
4684
+ "description": "Hides the label visually",
4685
+ "type": "boolean",
4686
+ "default": "false"
4687
+ },
4688
+ {
4689
+ "name": "launchType",
4690
+ "type": "string",
4691
+ "default": "\"dialog\""
4692
+ },
4693
+ {
4694
+ "name": "readonly",
4695
+ "attribute": "readonly",
4696
+ "description": "Puts the input into a read-only state",
4697
+ "type": "boolean",
4698
+ "default": "false"
4699
+ },
4700
+ {
4701
+ "name": "type",
4702
+ "attribute": "type",
4703
+ "description": "Type of color being chosen",
4704
+ "type": "'background'|'foreground'|'custom'",
4705
+ "default": "\"end\""
4706
+ },
4707
+ {
4708
+ "name": "name",
4709
+ "attribute": "name",
4710
+ "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
4711
+ "type": "string"
4712
+ },
4713
+ {
4714
+ "name": "documentLocaleSettings",
4715
+ "default": "\"getDocumentLocaleSettings()\""
4716
+ }
4717
+ ],
4718
+ "events": [
4719
+ {
4720
+ "name": "change",
4721
+ "description": "Dispatched when an alteration to the value is committed by the user."
4722
+ },
4723
+ {
4724
+ "name": "d2l-input-color-close"
4725
+ },
4726
+ {
4727
+ "name": "d2l-input-color-open"
4728
+ }
4729
+ ]
4730
+ },
4570
4731
  {
4571
4732
  "name": "d2l-input-date-range",
4572
4733
  "path": "./components/inputs/input-date-range.js",
package/lang/ar.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
33
33
  "components.form-element.valueMissing": "{label} مطلوبة.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
35
+ "components.input-color.backgroundColor": "لون الخلفية",
36
+ "components.input-color.foregroundColor": "لون المقدمة",
37
+ "components.input-color.none": "بلا",
35
38
  "components.input-date-range.endDate": "تاريخ الانتهاء",
36
39
  "components.input-date-range.errorBadInput": "يجب أن يكون تاريخ {startLabel} قبل {endLabel}",
37
40
  "components.input-date-range.startDate": "تاريخ البدء",
package/lang/cy.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "Nid yw'r URL yn ddilys.",
33
33
  "components.form-element.valueMissing": "Mae angen {label}.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch} other {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch}}",
35
+ "components.input-color.backgroundColor": "Lliw Cefndir",
36
+ "components.input-color.foregroundColor": "Lliw Blaendir",
37
+ "components.input-color.none": "Dim",
35
38
  "components.input-date-range.endDate": "Dyddiad Dod i Ben",
36
39
  "components.input-date-range.errorBadInput": "Rhaid i {startLabel} fod cyn {endLabel}",
37
40
  "components.input-date-range.startDate": "Dyddiad Dechrau",
package/lang/da.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL-adresse er ikke gyldig",
33
33
  "components.form-element.valueMissing": "{label} er påkrævet.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Der blev fundet {count} fejl i de oplysninger, du indsendte} other {Der blev fundet {count} fejl i de oplysninger, du indsendte}}",
35
+ "components.input-color.backgroundColor": "Baggrundsfarve",
36
+ "components.input-color.foregroundColor": "Forgrundsfarve",
37
+ "components.input-color.none": "Ingen",
35
38
  "components.input-date-range.endDate": "Slutdato",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} skal være før {endLabel}",
37
40
  "components.input-date-range.startDate": "Startdato",
package/lang/de.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL ist ungültig",
33
33
  "components.form-element.valueMissing": "{label} ist erforderlich.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Die von Ihnen übermittelten Informationen enthalten {count} Fehler} other {Die von Ihnen übermittelten Informationen enthalten {count} Fehler}}",
35
+ "components.input-color.backgroundColor": "Hintergrundfarbe",
36
+ "components.input-color.foregroundColor": "Vordergrundfarbe",
37
+ "components.input-color.none": "Keine",
35
38
  "components.input-date-range.endDate": "Enddatum",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} muss vor {endLabel} liegen",
37
40
  "components.input-date-range.startDate": "Startdatum",
package/lang/en-gb.js ADDED
@@ -0,0 +1,129 @@
1
+ export default {
2
+ "components.alert.close": "Close Alert",
3
+ "components.breadcrumbs.breadcrumb": "Breadcrumb",
4
+ "components.calendar.notSelected": "Not Selected.",
5
+ "components.calendar.selected": "Selected.",
6
+ "components.calendar.show": "Show {month}",
7
+ "components.count-badge.plus" : "{number}+",
8
+ "components.dialog.close": "Close this dialog",
9
+ "components.dropdown.close": "Close",
10
+ "components.filter.activeFilters": "Active Filters:",
11
+ "components.filter.clear": "Clear",
12
+ "components.filter.clearAll": "Clear All",
13
+ "components.filter.clearAllAnnounce": "Clearing all filters",
14
+ "components.filter.clearAllAnnounceOverride": "Clearing all filters for: {filterText}",
15
+ "components.filter.clearAllDescription": "Clear all filters",
16
+ "components.filter.clearAllDescriptionOverride": "Clear all filters for: {filterText}",
17
+ "components.filter.clearAnnounce": "Clearing filters for: {filterName}",
18
+ "components.filter.clearDescription": "Clear filters for: {filterName}",
19
+ "components.filter.loading": "Loading filters",
20
+ "components.filter.filterCountDescription": "{number, plural, =0 {No filters applied.} one {{number} filter applied.} other {{number} filters applied.}}",
21
+ "components.filter.filters": "Filters",
22
+ "components.filter.noFilters": "No available filters",
23
+ "components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
24
+ "components.filter.singleDimensionDescription": "Filter by: {filterName}",
25
+ "components.form-element.defaultError": "{label} is invalid.",
26
+ "components.form-element.defaultFieldLabel": "Field",
27
+ "components.form-element.input.email.typeMismatch": "Email is not valid",
28
+ "components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {Number must be greater than {min} and less than {max}.} other {Number must be greater than {min} and less than or equal to {max}.}}} other {{maxExclusive, select, true {Number must be greater than or equal to {min} and less than {max}.} other {Number must be greater than or equal to {min} and less than or equal to {max}.}}}}",
29
+ "components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {Number must be less than {max}.} other {Number must be less than or equal to {max}.}}",
30
+ "components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {Number must be greater than {min}.} other {Number must be greater than or equal to {min}.}}",
31
+ "components.form-element.input.text.tooShort": "{label} must be at least {minlength} characters",
32
+ "components.form-element.input.url.typeMismatch": "URL is not valid",
33
+ "components.form-element.valueMissing": "{label} is required.",
34
+ "components.form-error-summary.errorSummary": "{count, plural, one {There was {count} error found in the information you submitted} other {There were {count} errors found in the information you submitted}}",
35
+ "components.input-color.backgroundColor": "Background Colour",
36
+ "components.input-color.foregroundColor": "Foreground Colour",
37
+ "components.input-color.none": "None",
38
+ "components.input-date-range.endDate": "End Date",
39
+ "components.input-date-range.errorBadInput": "{startLabel} must be before {endLabel}",
40
+ "components.input-date-range.startDate": "Start Date",
41
+ "components.input-date-time-range-to.to": "to",
42
+ "components.input-date-time-range.endDate": "End Date",
43
+ "components.input-date-time-range.errorBadInput": "{startLabel} must be before {endLabel}",
44
+ "components.input-date-time-range.startDate": "Start Date",
45
+ "components.input-date-time.date": "Date",
46
+ "components.input-date-time.errorMaxDateOnly": "Date must be before {maxDate}",
47
+ "components.input-date-time.errorMinDateOnly": "Date must be after {minDate}",
48
+ "components.input-date-time.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
49
+ "components.input-date-time.time": "Time",
50
+ "components.input-date.clear": "Clear",
51
+ "components.input-date.errorMaxDateOnly": "Date must be before {maxDate}",
52
+ "components.input-date.errorMinDateOnly": "Date must be after {minDate}",
53
+ "components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
54
+ "components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
55
+ "components.input-date.now": "Now",
56
+ "components.input-date.today": "Today",
57
+ "components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
58
+ "components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
59
+ "components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",
60
+ "components.input-number.hintDecimalIncorrectPeriod": "To add a decimal use the period \".\" character",
61
+ "components.input-search.clear": "Clear Search",
62
+ "components.input-search.defaultPlaceholder": "Search...",
63
+ "components.input-search.search": "Search",
64
+ "components.input-time-range.endTime": "End Time",
65
+ "components.input-time-range.errorBadInput": "{startLabel} must be before {endLabel}",
66
+ "components.input-time-range.startTime": "Start Time",
67
+ "components.interactive.instructions": "Press Enter to interact, Escape to exit",
68
+ "components.list-controls.label": "Actions for list",
69
+ "components.list-item-drag-handle.default": "Reorder item action for {name}",
70
+ "components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
71
+ "components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
72
+ "components.list-item-tooltip.enter-key": "Enter",
73
+ "components.list-item-tooltip.enter-desc": "Activate the focused option.",
74
+ "components.list-item-tooltip.up-down-key": "Up/Down",
75
+ "components.list-item-tooltip.up-down-desc": "Move focus between list items.",
76
+ "components.list-item-tooltip.left-right-key": "Left/Right",
77
+ "components.list-item-tooltip.left-right-desc": "Move focus within current item.",
78
+ "components.list-item-tooltip.page-up-down-key": "Page Up/Down",
79
+ "components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
80
+ "components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
81
+ "components.list-item-drag-handle-tooltip.enter-key": "Enter",
82
+ "components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
83
+ "components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
84
+ "components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
85
+ "components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
86
+ "components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
87
+ "components.menu-item-return.return": "Return to previous menu.",
88
+ "components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
89
+ "components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
90
+ "components.meter-mixin.fraction": "{x}∕{y}",
91
+ "components.meter-mixin.progressIndicator": "Progress Indicator",
92
+ "components.more-less.less": "less",
93
+ "components.more-less.more": "more",
94
+ "components.object-property-list.item-placeholder-text": "Placeholder Item",
95
+ "components.overflow-group.moreActions": "More Actions",
96
+ "components.pager-load-more.action": "Load {count} More",
97
+ "components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
98
+ "components.pager-load-more.status-loading": "Loading more items",
99
+ "components.selection.action-hint": "Select an item to perform this action.",
100
+ "components.selection.select-all": "Select All",
101
+ "components.selection.select-all-items": "Select All {count} Items",
102
+ "components.selection.selected": "{count} selected",
103
+ "components.selection.selected-plus": "{count}+ selected",
104
+ "components.selection-controls.label": "Actions for selection",
105
+ "components.switch.visible": "Visible",
106
+ "components.switch.visibleWithPeriod": "Visible.",
107
+ "components.switch.hidden": "Hidden",
108
+ "components.switch.conditions": "Conditions must be met",
109
+ "components.tabs.next": "Scroll Forward",
110
+ "components.tabs.previous": "Scroll Backward",
111
+ "components.tag-list.clear": "Click, press backspace, or press delete key to remove item {value}",
112
+ "components.tag-list.clear-all": "Clear All",
113
+ "components.tag-list.cleared-all": "Removed all tag list items",
114
+ "components.tag-list.cleared-item": "Removed tag list item {value}",
115
+ "components.tag-list.interactive-label": "Tag List, {count} items",
116
+ "components.tag-list.num-hidden": "+ {count} more",
117
+ "components.tag-list.role-description": "Tag List",
118
+ "components.tag-list.show-less": "Show Less",
119
+ "components.tag-list.show-more-description": "Select to show hidden tag list items",
120
+ "components.tag-list-item.role-description": "Tag",
121
+ "components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
122
+ "components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
123
+ "components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
124
+ "components.tag-list-item.tooltip-delete-key-desc": "Delete the focused tag",
125
+ "components.tag-list-item.tooltip-title": "Keyboard Controls",
126
+ "templates.primary-secondary.adjustableSplitView": "Adjustable Split View",
127
+ "templates.primary-secondary.keyboardHorizontal": "Arrow left or right to adjust the size of the view panels",
128
+ "templates.primary-secondary.keyboardVertical": "Arrow up or down to adjust the size of the view panels"
129
+ };
package/lang/en.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL is not valid",
33
33
  "components.form-element.valueMissing": "{label} is required.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {There was {count} error found in the information you submitted} other {There were {count} errors found in the information you submitted}}",
35
+ "components.input-color.backgroundColor": "Background Color",
36
+ "components.input-color.foregroundColor": "Foreground Color",
37
+ "components.input-color.none": "None",
35
38
  "components.input-date-range.endDate": "End Date",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} must be before {endLabel}",
37
40
  "components.input-date-range.startDate": "Start Date",
package/lang/es-es.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
33
33
  "components.form-element.valueMissing": "{label} es obligatorio.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Se ha encontrado {count} error en la información que ha enviado} other {Se han encontrado {count} errores en la información que ha enviado}}",
35
+ "components.input-color.backgroundColor": "Color de fondo",
36
+ "components.input-color.foregroundColor": "Color del primer plano",
37
+ "components.input-color.none": "Ninguno",
35
38
  "components.input-date-range.endDate": "Fecha final",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} debe ser anterior a {endLabel}",
37
40
  "components.input-date-range.startDate": "Fecha de inicio",
package/lang/es.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
33
33
  "components.form-element.valueMissing": "{label} es obligatoria.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Se encontró {count} error en la información que envió} other {Se encontraron {count} errores en la información que envió}}",
35
+ "components.input-color.backgroundColor": "Color de fondo",
36
+ "components.input-color.foregroundColor": "Color del primer plano",
37
+ "components.input-color.none": "Ninguno",
35
38
  "components.input-date-range.endDate": "Fecha final",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} debe estar antes de {endLabel}",
37
40
  "components.input-date-range.startDate": "Fecha de inicio",
package/lang/fr-fr.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL non valide",
33
33
  "components.form-element.valueMissing": "{label} est requis.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {{count} erreur trouvée dans les informations soumises} other {{count} erreurs trouvées dans les informations soumises}}",
35
+ "components.input-color.backgroundColor": "Couleur de l'arrière-plan",
36
+ "components.input-color.foregroundColor": "Couleur de l’avant-plan",
37
+ "components.input-color.none": "Aucune",
35
38
  "components.input-date-range.endDate": "Date de fin",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} doit être antérieur à {endLabel}",
37
40
  "components.input-date-range.startDate": "Date de début",
package/lang/fr.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "L'URL n'est pas valide",
33
33
  "components.form-element.valueMissing": "{label} est requis.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Il y avait {count} erreur trouvée dans les informations que vous avez soumises} other {Il y avait {count} erreurs trouvées dans les informations que vous avez soumises}}",
35
+ "components.input-color.backgroundColor": "Couleur d'arrière-plan",
36
+ "components.input-color.foregroundColor": "Couleur de l’avant-plan",
37
+ "components.input-color.none": "Aucun",
35
38
  "components.input-date-range.endDate": "Date de fin",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} doit précéder {endLabel}",
37
40
  "components.input-date-range.startDate": "Date du début",
package/lang/hi.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL मान्य नहीं है",
33
33
  "components.form-element.valueMissing": "{label} आवश्यक है।",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं} other {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं}}",
35
+ "components.input-color.backgroundColor": "पृष्ठभूमि का रंग",
36
+ "components.input-color.foregroundColor": "अग्रभूमि रंग",
37
+ "components.input-color.none": "कोई नहीं",
35
38
  "components.input-date-range.endDate": "समाप्ति तारीख़",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} {endLabel} से पहले का होना चाहिए",
37
40
  "components.input-date-range.startDate": "प्रारंभ तारीख़",
package/lang/ja.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL が有効ではありません",
33
33
  "components.form-element.valueMissing": "{label} は必須です。",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, other {送信した情報に {count} 件のエラーが見つかりました}}",
35
+ "components.input-color.backgroundColor": "背景色",
36
+ "components.input-color.foregroundColor": "前景色",
37
+ "components.input-color.none": "なし",
35
38
  "components.input-date-range.endDate": "終了日",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} は {endLabel} より前にする必要があります",
37
40
  "components.input-date-range.startDate": "開始日",
package/lang/ko.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL이 유효하지 않습니다",
33
33
  "components.form-element.valueMissing": "{label}이(가) 필요합니다.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, other {제출한 정보에서 {count}개의 오류가 발견되었습니다}}",
35
+ "components.input-color.backgroundColor": "배경 색상",
36
+ "components.input-color.foregroundColor": "전경 색상",
37
+ "components.input-color.none": "없음",
35
38
  "components.input-date-range.endDate": "종료일",
36
39
  "components.input-date-range.errorBadInput": "{startLabel}은(는) {endLabel} 앞에 있어야 합니다",
37
40
  "components.input-date-range.startDate": "시작일",
package/lang/nl.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL is niet geldig",
33
33
  "components.form-element.valueMissing": "{label} is vereist.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Er is {count} fout gevonden in de informatie die u hebt ingediend} other {Er zijn {count} fouten gevonden in de informatie die u hebt ingediend}}",
35
+ "components.input-color.backgroundColor": "Achtergrondkleur",
36
+ "components.input-color.foregroundColor": "Voorgrondkleur",
37
+ "components.input-color.none": "Geen",
35
38
  "components.input-date-range.endDate": "Einddatum",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} moet voor {endLabel} liggen",
37
40
  "components.input-date-range.startDate": "Startdatum",
package/lang/pt.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL inválido",
33
33
  "components.form-element.valueMissing": "{label} é obrigatório.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {{count} erro foi encontrado nas informações enviadas} other {{count} erros foram encontrados nas informações enviadas}}",
35
+ "components.input-color.backgroundColor": "Cor do Plano de Fundo",
36
+ "components.input-color.foregroundColor": "Cor do Primeiro Plano",
37
+ "components.input-color.none": "Nenhum",
35
38
  "components.input-date-range.endDate": "Data final",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} precisa ser anterior a {endLabel}",
37
40
  "components.input-date-range.startDate": "Data de início",
package/lang/sv.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL är inte giltigt",
33
33
  "components.form-element.valueMissing": "{label} krävs.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Det finns {count} fel i informationen som du skickade} other {Det finns {count} fel i informationen som du skickade}}",
35
+ "components.input-color.backgroundColor": "Bakgrundsfärg",
36
+ "components.input-color.foregroundColor": "Förgrundsfärg",
37
+ "components.input-color.none": "Inget",
35
38
  "components.input-date-range.endDate": "Slutdatum",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} måste vara före {endLabel}",
37
40
  "components.input-date-range.startDate": "Startdatum",
package/lang/tr.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL geçerli değil",
33
33
  "components.form-element.valueMissing": "{label} zorunludur.",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, one {Gönderdiğiniz bilgilerde {count} hata bulundu} other {Gönderdiğiniz bilgilerde {count} hata bulundu}}",
35
+ "components.input-color.backgroundColor": "Arka Plan Rengi",
36
+ "components.input-color.foregroundColor": "Ön Plan Rengi",
37
+ "components.input-color.none": "Yok",
35
38
  "components.input-date-range.endDate": "Bitiş Tarihi",
36
39
  "components.input-date-range.errorBadInput": "{startLabel}, {endLabel} tarihinden önce olmalıdır",
37
40
  "components.input-date-range.startDate": "Başlangıç Tarihi",
package/lang/zh-cn.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL 无效",
33
33
  "components.form-element.valueMissing": "{label} 为必填项。",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, other {在您提交的信息中发现 {count} 个错误}}",
35
+ "components.input-color.backgroundColor": "背景颜色",
36
+ "components.input-color.foregroundColor": "前景颜色",
37
+ "components.input-color.none": "无",
35
38
  "components.input-date-range.endDate": "结束日期",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} 必须早于 {endLabel}",
37
40
  "components.input-date-range.startDate": "开始日期",
package/lang/zh-tw.js CHANGED
@@ -32,6 +32,9 @@ export default {
32
32
  "components.form-element.input.url.typeMismatch": "URL 無效",
33
33
  "components.form-element.valueMissing": "{label} 為必填。",
34
34
  "components.form-error-summary.errorSummary": "{count, plural, other {您提交的資訊中發現 {count} 個錯誤}}",
35
+ "components.input-color.backgroundColor": "背景顏色",
36
+ "components.input-color.foregroundColor": "前景顏色",
37
+ "components.input-color.none": "無",
35
38
  "components.input-date-range.endDate": "結束日期",
36
39
  "components.input-date-range.errorBadInput": "{startLabel} 必須早於 {endLabel}",
37
40
  "components.input-date-range.startDate": "開始日期",
package/mixins/localize-dynamic-mixin.js CHANGED
@@ -2,7 +2,7 @@ import { getLocalizeOverrideResources } from '../helpers/getLocalizeResources.js
2
2
  import { LocalizeMixin } from './localize-mixin.js';
3
3
 
4
4
  const fallbackLang = 'en';
5
- const supportedLangpacks = ['ar', 'cy', 'da', 'de', 'en', 'es', 'es-es', 'fr', 'fr-fr', 'fr-on', 'hi', 'ja', 'ko', 'nl', 'pt', 'sv', 'tr', 'zh-cn', 'zh-tw'];
5
+ const supportedLangpacks = ['ar', 'cy', 'da', 'de', 'en', 'en-gb', 'es', 'es-es', 'fr', 'fr-fr', 'fr-on', 'hi', 'ja', 'ko', 'nl', 'pt', 'sv', 'tr', 'zh-cn', 'zh-tw'];
6
6
 
7
7
  export const LocalizeDynamicMixin = superclass => class extends LocalizeMixin(superclass) {
8
8
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.91.3",
3
+ "version": "2.93.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",