@brightspace-ui/core 2.91.3 → 2.92.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/components/inputs/README.md +1 -0
- package/components/inputs/demo/input-color-palette.js +67 -0
- package/components/inputs/demo/input-color.html +51 -0
- package/components/inputs/docs/input-color.md +60 -0
- package/components/inputs/input-color.js +414 -0
- package/custom-elements.json +161 -0
- package/lang/ar.js +3 -0
- package/lang/cy.js +3 -0
- package/lang/da.js +3 -0
- package/lang/de.js +3 -0
- package/lang/en.js +3 -0
- package/lang/es-es.js +3 -0
- package/lang/es.js +3 -0
- package/lang/fr-fr.js +3 -0
- package/lang/fr.js +3 -0
- package/lang/hi.js +3 -0
- package/lang/ja.js +3 -0
- package/lang/ko.js +3 -0
- package/lang/nl.js +3 -0
- package/lang/pt.js +3 -0
- package/lang/sv.js +3 -0
- package/lang/tr.js +3 -0
- package/lang/zh-cn.js +3 -0
- package/lang/zh-tw.js +3 -0
- package/package.json +1 -1
|
@@ -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)
|
|
@@ -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);
|
|
@@ -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>
|
|
@@ -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. |
|
|
@@ -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.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.92.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",
|