@brightspace-ui/core 3.270.2 → 3.271.1
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.
|
@@ -71,21 +71,17 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
|
|
|
71
71
|
:host([_state="shown"]) #visible,
|
|
72
72
|
:host([_state="hiding"]) #visible {
|
|
73
73
|
display: flex;
|
|
74
|
-
|
|
74
|
+
inset: 0;
|
|
75
75
|
justify-content: center;
|
|
76
76
|
position: absolute;
|
|
77
|
-
top: 0;
|
|
78
|
-
width: 100%;
|
|
79
77
|
z-index: 999;
|
|
80
78
|
}
|
|
81
79
|
|
|
82
80
|
.backdrop {
|
|
83
81
|
background-color: var(--d2l-theme-backdrop-background-color);
|
|
84
|
-
|
|
82
|
+
inset: 0;
|
|
85
83
|
opacity: 0;
|
|
86
84
|
position: absolute;
|
|
87
|
-
top: 0;
|
|
88
|
-
width: 100%;
|
|
89
85
|
}
|
|
90
86
|
:host([_state="shown"]) .backdrop {
|
|
91
87
|
opacity: var(--d2l-theme-backdrop-opacity);
|
|
@@ -14,23 +14,25 @@ registerSemanticVariableForSvgImageUrl(
|
|
|
14
14
|
</svg>`
|
|
15
15
|
);
|
|
16
16
|
|
|
17
|
+
function _getInputBaseStyleDelegates(selector, focusSelector) {
|
|
18
|
+
return {
|
|
19
|
+
selector: focusClass => `
|
|
20
|
+
${focusSelector ? `${focusSelector},` : ''}
|
|
21
|
+
${selector}:${focusClass}:not(:disabled),
|
|
22
|
+
${selector}:hover:not(:disabled)`,
|
|
23
|
+
style: fullSelector => css`
|
|
24
|
+
${fullSelector} {
|
|
25
|
+
border-color: var(--d2l-theme-border-color-focus);
|
|
26
|
+
border-width: 2px;
|
|
27
|
+
outline: none;
|
|
28
|
+
padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
|
|
29
|
+
}`
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
17
33
|
function getStyleDelegates(selector, focusSelector, textAreaSelector) {
|
|
18
34
|
return {
|
|
19
|
-
input:
|
|
20
|
-
selector: focusClass => `
|
|
21
|
-
${focusSelector ? `${focusSelector},` : ''}
|
|
22
|
-
${selector}:${focusClass}:not(:disabled),
|
|
23
|
-
${selector}:hover:not(:disabled)
|
|
24
|
-
`,
|
|
25
|
-
style: fullSelector => css`
|
|
26
|
-
${fullSelector} {
|
|
27
|
-
border-color: var(--d2l-theme-border-color-focus);
|
|
28
|
-
border-width: 2px;
|
|
29
|
-
outline: none;
|
|
30
|
-
padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
|
|
31
|
-
}
|
|
32
|
-
`
|
|
33
|
-
},
|
|
35
|
+
input: _getInputBaseStyleDelegates(selector, focusSelector),
|
|
34
36
|
textarea: {
|
|
35
37
|
selector: focusClass => `
|
|
36
38
|
${textAreaSelector}:hover:not(:disabled),
|
|
@@ -58,13 +60,7 @@ function getStyleDelegates(selector, focusSelector, textAreaSelector) {
|
|
|
58
60
|
};
|
|
59
61
|
}
|
|
60
62
|
|
|
61
|
-
|
|
62
|
-
if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return '';
|
|
63
|
-
const lastSpaceIndex = selector.lastIndexOf(' ');
|
|
64
|
-
const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`);
|
|
65
|
-
const delegates = getStyleDelegates(selector, focusSelector, textareaSelector);
|
|
66
|
-
|
|
67
|
-
selector = unsafeCSS(selector);
|
|
63
|
+
function _generateInputBaseStyles(selector) {
|
|
68
64
|
return css`
|
|
69
65
|
${selector} {
|
|
70
66
|
background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
|
|
@@ -89,30 +85,74 @@ export function _generateInputStyles(selector, focusSelector) {
|
|
|
89
85
|
vertical-align: middle;
|
|
90
86
|
width: 100%;
|
|
91
87
|
}
|
|
92
|
-
|
|
88
|
+
`;
|
|
89
|
+
}
|
|
93
90
|
|
|
91
|
+
export function _generateInputPlaceholderBaseStyles(selector) {
|
|
92
|
+
return css`
|
|
94
93
|
${selector}::placeholder {
|
|
95
94
|
color: var(--d2l-theme-text-color-static-faint);
|
|
96
95
|
font-size: 0.8rem;
|
|
97
96
|
font-weight: 400;
|
|
98
97
|
opacity: 1; /* Firefox has non-1 default */
|
|
99
98
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
font-size: 0.8rem;
|
|
103
|
-
font-weight: 400;
|
|
104
|
-
}
|
|
99
|
+
`;
|
|
100
|
+
}
|
|
105
101
|
|
|
106
|
-
|
|
102
|
+
function _generateInputAriaInvalidBaseStyles(selector) {
|
|
103
|
+
return css`
|
|
104
|
+
${selector}[aria-invalid="true"]:not(:disabled) {
|
|
107
105
|
border-color: var(--d2l-theme-status-color-error);
|
|
108
106
|
}
|
|
107
|
+
`;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function _generateInputDisabledBaseStyles(selector) {
|
|
111
|
+
return css`
|
|
109
112
|
${selector}:disabled {
|
|
110
113
|
opacity: var(--d2l-theme-opacity-disabled-control);
|
|
111
114
|
}
|
|
115
|
+
`;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function _generatewebkitSearchStyles(selector) {
|
|
119
|
+
return css`
|
|
112
120
|
${selector}::-webkit-search-cancel-button,
|
|
113
121
|
${selector}::-webkit-search-decoration {
|
|
114
122
|
display: none;
|
|
115
123
|
}
|
|
124
|
+
`;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* A private helper method that should not be used by general consumers
|
|
129
|
+
*/
|
|
130
|
+
export function _generateInputStyles(selector, focusSelector) {
|
|
131
|
+
if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return '';
|
|
132
|
+
const lastSpaceIndex = selector.lastIndexOf(' ');
|
|
133
|
+
const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`);
|
|
134
|
+
const delegates = getStyleDelegates(selector, focusSelector, textareaSelector);
|
|
135
|
+
|
|
136
|
+
selector = unsafeCSS(selector);
|
|
137
|
+
return css`
|
|
138
|
+
${_generateInputBaseStyles(selector)}
|
|
139
|
+
|
|
140
|
+
${getFocusVisibleStyles(delegates.input.selector, delegates.input.style)}
|
|
141
|
+
|
|
142
|
+
${_generateInputPlaceholderBaseStyles(selector)}
|
|
143
|
+
|
|
144
|
+
${selector}::-ms-input-placeholder {
|
|
145
|
+
color: var(--d2l-theme-text-color-static-faint);
|
|
146
|
+
font-size: 0.8rem;
|
|
147
|
+
font-weight: 400;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
${_generateInputAriaInvalidBaseStyles(selector)}
|
|
151
|
+
|
|
152
|
+
${_generateInputDisabledBaseStyles(selector)}
|
|
153
|
+
|
|
154
|
+
${_generatewebkitSearchStyles(selector)}
|
|
155
|
+
|
|
116
156
|
${selector}::-ms-clear {
|
|
117
157
|
display: none;
|
|
118
158
|
height: 0;
|
|
@@ -150,6 +190,29 @@ export function _generateInputStyles(selector, focusSelector) {
|
|
|
150
190
|
`;
|
|
151
191
|
}
|
|
152
192
|
|
|
193
|
+
/**
|
|
194
|
+
* A private helper method that should not be used by general consumers
|
|
195
|
+
*/
|
|
196
|
+
export function _generateInputTextStyles(selector) {
|
|
197
|
+
if (!_isValidCssSelector(selector)) return '';
|
|
198
|
+
const finalSelector = unsafeCSS(selector);
|
|
199
|
+
const input = _getInputBaseStyleDelegates(selector);
|
|
200
|
+
|
|
201
|
+
return css`
|
|
202
|
+
${ _generateInputBaseStyles(finalSelector) }
|
|
203
|
+
|
|
204
|
+
${ _generateInputPlaceholderBaseStyles(finalSelector) }
|
|
205
|
+
|
|
206
|
+
${ getFocusVisibleStyles(input.selector, input.style) }
|
|
207
|
+
|
|
208
|
+
${ _generateInputAriaInvalidBaseStyles(finalSelector) }
|
|
209
|
+
|
|
210
|
+
${ _generateInputDisabledBaseStyles(finalSelector) }
|
|
211
|
+
|
|
212
|
+
${ _generatewebkitSearchStyles(finalSelector) }
|
|
213
|
+
`;
|
|
214
|
+
}
|
|
215
|
+
|
|
153
216
|
export const inputStyles = getFlag('GAUD-8852-use-input-generated-styles', true) ? _generateInputStyles('.d2l-input', '.d2l-input-focus') : css`
|
|
154
217
|
.d2l-input {
|
|
155
218
|
background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
|
|
@@ -66,6 +66,10 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
|
|
|
66
66
|
.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-dropdown-context-menu {
|
|
67
67
|
vertical-align: top;
|
|
68
68
|
}
|
|
69
|
+
d2l-table-controls > d2l-input-radio-group {
|
|
70
|
+
align-content: center;
|
|
71
|
+
max-height: 42px;
|
|
72
|
+
}
|
|
69
73
|
`];
|
|
70
74
|
|
|
71
75
|
constructor() {
|
|
@@ -89,14 +93,14 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
|
|
|
89
93
|
<d2l-selection-action
|
|
90
94
|
text="Sticky controls"
|
|
91
95
|
icon="tier1:${this.stickyControls ? 'check' : 'close-default'}"
|
|
92
|
-
@d2l-selection-action-click="${this._toggleStickyControls}"
|
|
93
|
-
|
|
96
|
+
@d2l-selection-action-click="${this._toggleStickyControls}">
|
|
97
|
+
</d2l-selection-action>
|
|
94
98
|
<d2l-selection-action
|
|
95
99
|
text="Sticky headers"
|
|
96
100
|
icon="tier1:${this.stickyHeaders ? 'check' : 'close-default'}"
|
|
97
|
-
@d2l-selection-action-click="${this._toggleStickyHeaders}"
|
|
98
|
-
|
|
99
|
-
<d2l-input-radio-group
|
|
101
|
+
@d2l-selection-action-click="${this._toggleStickyHeaders}">
|
|
102
|
+
</d2l-selection-action>
|
|
103
|
+
<d2l-input-radio-group label="Date State" horizontal label-hidden name="dataState" @change=${this._handleDataStateChange}>
|
|
100
104
|
<d2l-input-radio label="Clean" value="clean" ?checked=${this.dataState === 'clean'}></d2l-input-radio>
|
|
101
105
|
<d2l-input-radio label="Dirty" value="dirty" ?checked=${this.dataState === 'dirty'}></d2l-input-radio>
|
|
102
106
|
<d2l-input-radio label="Loading" value="loading" ?checked=${this.dataState === 'loading'}></d2l-input-radio>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.271.1",
|
|
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",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@rollup/plugin-node-resolve": "^16",
|
|
57
57
|
"@rollup/plugin-replace": "^6",
|
|
58
58
|
"@stylistic/eslint-plugin": "^5",
|
|
59
|
-
"@web/dev-server": "^0
|
|
59
|
+
"@web/dev-server": "^1.0",
|
|
60
60
|
"chalk": "^5",
|
|
61
61
|
"eslint": "^9",
|
|
62
62
|
"eslint-config-brightspace": "^4",
|