@brightspace-ui/labs 2.53.0 → 2.55.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/package.json
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"./components/accordion.js": "./src/components/accordion/accordion.js",
|
|
9
9
|
"./components/accordion-collapse.js": "./src/components/accordion/accordion-collapse.js",
|
|
10
10
|
"./components/attribute-picker.js": "./src/components/attribute-picker/attribute-picker.js",
|
|
11
|
+
"./components/button-ai.js": "./src/components/button-ai/button-ai.js",
|
|
11
12
|
"./components/card-overlay.js": "./src/components/card-overlay/card-overlay.js",
|
|
12
13
|
"./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
|
|
13
14
|
"./components/community-button.js": "./src/components/community/community-button.js",
|
|
@@ -110,5 +111,5 @@
|
|
|
110
111
|
"parse-srt": "^1.0.0-alpha",
|
|
111
112
|
"webvtt-parser": "^2"
|
|
112
113
|
},
|
|
113
|
-
"version": "2.
|
|
114
|
+
"version": "2.55.0"
|
|
114
115
|
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import '@brightspace-ui/core/components/tooltip/tooltip.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { ButtonMixin } from '@brightspace-ui/core/components/button/button-mixin.js';
|
|
4
|
+
import { buttonStyles } from '@brightspace-ui/core/components/button/button-styles.js';
|
|
5
|
+
import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
|
|
6
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
|
+
import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
8
|
+
import { SlottedIconMixin } from '@brightspace-ui/core/components/icons/slotted-icon-mixin.js';
|
|
9
|
+
|
|
10
|
+
class ButtonAI extends SlottedIconMixin(ButtonMixin(LitElement)) {
|
|
11
|
+
static properties = {
|
|
12
|
+
/**
|
|
13
|
+
* ACCESSIBILITY: REQUIRED: Text for the button
|
|
14
|
+
* @type {string}
|
|
15
|
+
*/
|
|
16
|
+
text: { type: String, reflect: true }
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
static styles = [super.styles, labelStyles, buttonStyles,
|
|
20
|
+
css`
|
|
21
|
+
:host {
|
|
22
|
+
/* comes from --d2l-color-celestine-plus-1 + 0.5 opacity */
|
|
23
|
+
--d2l-color-celestine-plus-1-opacity-50: #29a6ff80;
|
|
24
|
+
|
|
25
|
+
/* comes from --d2l-color-fluorite-plus-1 + 0.5 opacity */
|
|
26
|
+
--d2l-color-fluorite-plus-1-opacity-50: #ce68fa80;
|
|
27
|
+
display: inline-block;
|
|
28
|
+
}
|
|
29
|
+
:host([hidden]) {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
button {
|
|
34
|
+
align-items: center;
|
|
35
|
+
background:
|
|
36
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
37
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1), var(--d2l-color-celestine-plus-1)) border-box;
|
|
38
|
+
border: 0.1rem solid transparent;
|
|
39
|
+
border-radius: 0.4rem;
|
|
40
|
+
column-gap: 0.3rem;
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
font-family: inherit;
|
|
43
|
+
padding-block: 0;
|
|
44
|
+
padding-inline: 0.6rem;
|
|
45
|
+
position: relative;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
button:hover,
|
|
49
|
+
button:focus {
|
|
50
|
+
background:
|
|
51
|
+
linear-gradient(var(--d2l-color-gypsum), var(--d2l-color-gypsum)) padding-box,
|
|
52
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1), var(--d2l-color-celestine-plus-1)) border-box;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host([disabled]) button {
|
|
56
|
+
background:
|
|
57
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
58
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1-opacity-50), var(--d2l-color-celestine-plus-1-opacity-50)) border-box;
|
|
59
|
+
cursor: default;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host([disabled]) button::before {
|
|
63
|
+
background:
|
|
64
|
+
linear-gradient(#ffffff, #ffffff) padding-box,
|
|
65
|
+
linear-gradient(to top left, var(--d2l-color-fluorite-plus-1-opacity-50), var(--d2l-color-celestine-plus-1-opacity-50)) border-box;
|
|
66
|
+
border-radius: inherit;
|
|
67
|
+
content: "";
|
|
68
|
+
inset: 0;
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
position: absolute;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
button,
|
|
74
|
+
.property-icon,
|
|
75
|
+
slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
76
|
+
color: var(--d2l-color-celestine);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host(:not([disabled])) button:hover,
|
|
80
|
+
:host(:not([disabled])) button:focus,
|
|
81
|
+
:host(:not([disabled])) button:hover .property-icon,
|
|
82
|
+
:host(:not([disabled])) button:focus .property-icon,
|
|
83
|
+
:host(:not([disabled])) button:hover slot[name="icon"]::slotted(d2l-icon-custom),
|
|
84
|
+
:host(:not([disabled])) button:focus slot[name="icon"]::slotted(d2l-icon-custom) {
|
|
85
|
+
color: var(--d2l-color-celestine-minus-1);
|
|
86
|
+
}
|
|
87
|
+
`];
|
|
88
|
+
|
|
89
|
+
constructor() {
|
|
90
|
+
super();
|
|
91
|
+
this.icon = 'tier1:ai';
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
render() {
|
|
95
|
+
return html `
|
|
96
|
+
<button
|
|
97
|
+
aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
|
|
98
|
+
?disabled=${this.disabled && !this.disabledTooltip}
|
|
99
|
+
id="${this.#buttonId}"
|
|
100
|
+
class="d2l-label-text">
|
|
101
|
+
${this._renderIcon()}
|
|
102
|
+
${this.text}
|
|
103
|
+
</button>
|
|
104
|
+
${this.disabled && this.disabledTooltip ? html`<d2l-tooltip class="vdiff-target" for="${this.#buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
|
|
105
|
+
`;
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
#buttonId = getUniqueId();
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
customElements.define('d2l-labs-button-ai', ButtonAI);
|
|
@@ -24,6 +24,8 @@ The checkbox drawer can be used to get a checkbox with a description. When check
|
|
|
24
24
|
|--|--|--|
|
|
25
25
|
| `checked` | Boolean | True if the checkbox is checked. False if not checked. |
|
|
26
26
|
| `description` | String | Extra information that is displayed beneath the `label`. Optionally used when `label` is used. |
|
|
27
|
+
| `disabled` | Boolean | Disables the input |
|
|
28
|
+
| `disabled-tooltip` | String | Tooltip text when disabled |
|
|
27
29
|
| `label` | String | Provides visible information about the component. |
|
|
28
30
|
| `read-only` | Boolean | Makes the checkbox non-interactable, replacing it with checkmark if checked is true or an X otherwise |
|
|
29
31
|
|
|
@@ -4,6 +4,7 @@ import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
|
4
4
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
6
|
import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
8
|
import { LocalizeLabsElement } from '../localize-labs-element.js';
|
|
8
9
|
import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
|
|
9
10
|
|
|
@@ -13,6 +14,8 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
13
14
|
return {
|
|
14
15
|
checked: { type: Boolean },
|
|
15
16
|
description: { type: String },
|
|
17
|
+
disabled: { type: Boolean },
|
|
18
|
+
disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
|
|
16
19
|
label: { type: String },
|
|
17
20
|
readOnly: { type: Boolean, attribute: 'read-only' },
|
|
18
21
|
_expandCollapseBusy: { state: true }
|
|
@@ -52,6 +55,7 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
52
55
|
constructor() {
|
|
53
56
|
super();
|
|
54
57
|
this.checked = false;
|
|
58
|
+
this.disabled = false;
|
|
55
59
|
this._expandCollapseBusy = false;
|
|
56
60
|
}
|
|
57
61
|
|
|
@@ -77,6 +81,8 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
77
81
|
class="d2l-input-checkbox"
|
|
78
82
|
?skeleton="${this.skeleton}"
|
|
79
83
|
description=${this.localize(`components:checkboxDrawer:checkbox${this.checked ? 'Expanded' : 'Collapsed'}`)}
|
|
84
|
+
?disabled="${this.disabled}"
|
|
85
|
+
disabled-tooltip=${ifDefined(this.disabledTooltip)}
|
|
80
86
|
@change="${this._onCheckboxChange}">
|
|
81
87
|
${this.label}
|
|
82
88
|
<div slot="inline-help">${this.description}</div>
|