@brightspace-ui/core 3.247.1 → 3.248.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.
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import '../icons/icon.js';
|
|
3
|
+
import '../tooltip/tooltip.js';
|
|
4
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
5
|
+
import { highlightBorderStyles, highlightButtonStyles } from './page-header-styles.js';
|
|
6
|
+
import { FocusMixin } from '../../mixins/focus-mixin.js';
|
|
7
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Page header button with an icon and text.
|
|
12
|
+
*/
|
|
13
|
+
class PageHeaderButton extends FocusMixin(LitElement) {
|
|
14
|
+
|
|
15
|
+
static get properties() {
|
|
16
|
+
return {
|
|
17
|
+
/**
|
|
18
|
+
* Disables the button
|
|
19
|
+
* @type {boolean}
|
|
20
|
+
*/
|
|
21
|
+
disabled: { reflect: true, type: Boolean },
|
|
22
|
+
/**
|
|
23
|
+
* REQUIRED: Preset icon key (e.g. "tier1:gear")
|
|
24
|
+
* @type {string}
|
|
25
|
+
*/
|
|
26
|
+
icon: { type: String },
|
|
27
|
+
/**
|
|
28
|
+
* Position of the icon.
|
|
29
|
+
* @type {'start'|'end'}
|
|
30
|
+
*/
|
|
31
|
+
iconPosition: { attribute: 'icon-position', type: String },
|
|
32
|
+
/**
|
|
33
|
+
* Visually hides the highlight border when hovered/focused
|
|
34
|
+
* @type {boolean}
|
|
35
|
+
*/
|
|
36
|
+
noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
|
|
37
|
+
/**
|
|
38
|
+
* REQUIRED: Text for the button
|
|
39
|
+
* @type {string}
|
|
40
|
+
*/
|
|
41
|
+
text: { type: String },
|
|
42
|
+
/**
|
|
43
|
+
* Visually hides the text but still accessible
|
|
44
|
+
* @type {boolean}
|
|
45
|
+
*/
|
|
46
|
+
textHidden: { attribute: 'text-hidden', type: Boolean },
|
|
47
|
+
/**
|
|
48
|
+
* Offset of the tooltip
|
|
49
|
+
* @type {Number}
|
|
50
|
+
*/
|
|
51
|
+
tooltipOffset: { attribute: 'tooltip-offset', type: Number },
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
static get styles() {
|
|
56
|
+
return [highlightBorderStyles, highlightButtonStyles, css`
|
|
57
|
+
:host {
|
|
58
|
+
display: inline-block;
|
|
59
|
+
height: 100%;
|
|
60
|
+
}
|
|
61
|
+
:host([hidden]) {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
`];
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
constructor() {
|
|
68
|
+
super();
|
|
69
|
+
this.disabled = false;
|
|
70
|
+
this.iconPosition = 'start';
|
|
71
|
+
this.noHighlightBorder = false;
|
|
72
|
+
this.textHidden = false;
|
|
73
|
+
this.tooltipPosition = 'bottom';
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
static get focusElementSelector() {
|
|
77
|
+
return 'button';
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
render() {
|
|
81
|
+
const { ariaLabel, id, text, tooltip } = this.#getRenderSettings();
|
|
82
|
+
const highlightBorder = (!this.disabled && !this.noHighlightBorder) ? html`<span class="d2l-labs-navigation-highlight-border"></span>` : nothing;
|
|
83
|
+
const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
|
|
84
|
+
return html`
|
|
85
|
+
<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">
|
|
86
|
+
${highlightBorder}
|
|
87
|
+
${this.iconPosition === 'start' ? icon : nothing}
|
|
88
|
+
${text}
|
|
89
|
+
${this.iconPosition === 'end' ? icon : nothing}
|
|
90
|
+
</button>
|
|
91
|
+
${tooltip}
|
|
92
|
+
`;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#buttonId = getUniqueId();
|
|
96
|
+
|
|
97
|
+
#getRenderSettings() {
|
|
98
|
+
if (this.textHidden) {
|
|
99
|
+
return {
|
|
100
|
+
ariaLabel: this.text,
|
|
101
|
+
id: this.#buttonId,
|
|
102
|
+
text: nothing,
|
|
103
|
+
tooltip: html`<d2l-tooltip close-on-click for="${this.#buttonId}" for-type="label" offset="${ifDefined(this.tooltipOffset)}" class="vdiff-target">${this.text}</d2l-tooltip>`
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
return {
|
|
107
|
+
ariaLabel: undefined,
|
|
108
|
+
id: undefined,
|
|
109
|
+
text: this.text,
|
|
110
|
+
tooltip: nothing
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
customElements.define('d2l-page-header-button', PageHeaderButton);
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import { css } from 'lit';
|
|
3
|
+
|
|
4
|
+
export const highlightBorderStyles = css`
|
|
5
|
+
.d2l-labs-navigation-highlight-border {
|
|
6
|
+
background: transparent;
|
|
7
|
+
border-bottom-left-radius: 4px;
|
|
8
|
+
border-bottom-right-radius: 4px;
|
|
9
|
+
display: block;
|
|
10
|
+
height: 4px;
|
|
11
|
+
inset-inline: -7px;
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
}
|
|
15
|
+
*:focus > .d2l-labs-navigation-highlight-border,
|
|
16
|
+
*:hover > .d2l-labs-navigation-highlight-border,
|
|
17
|
+
*[active] > .d2l-labs-navigation-highlight-border {
|
|
18
|
+
background: var(--d2l-color-celestine);
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
|
|
22
|
+
export const highlightButtonStyles = css`
|
|
23
|
+
button {
|
|
24
|
+
align-items: center;
|
|
25
|
+
background: transparent;
|
|
26
|
+
border: none;
|
|
27
|
+
color: var(--d2l-color-ferrite);
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
font-family: inherit;
|
|
31
|
+
font-size: inherit;
|
|
32
|
+
gap: 6px;
|
|
33
|
+
height: 100%;
|
|
34
|
+
margin: 0;
|
|
35
|
+
min-height: 40px;
|
|
36
|
+
outline: none;
|
|
37
|
+
overflow: visible;
|
|
38
|
+
padding: 0;
|
|
39
|
+
position: relative;
|
|
40
|
+
vertical-align: middle;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
}
|
|
43
|
+
/* Firefox includes a hidden border which messes up button dimensions */
|
|
44
|
+
button::-moz-focus-inner {
|
|
45
|
+
border: 0;
|
|
46
|
+
}
|
|
47
|
+
button:not([disabled]):hover,
|
|
48
|
+
button:not([disabled]):focus,
|
|
49
|
+
button[active] {
|
|
50
|
+
--d2l-icon-fill-color: var(--d2l-color-celestine);
|
|
51
|
+
color: var(--d2l-color-celestine);
|
|
52
|
+
outline: none;
|
|
53
|
+
}
|
|
54
|
+
button[disabled] {
|
|
55
|
+
cursor: default;
|
|
56
|
+
opacity: 0.5;
|
|
57
|
+
}
|
|
58
|
+
`;
|
package/custom-elements.json
CHANGED
|
@@ -12347,6 +12347,105 @@
|
|
|
12347
12347
|
}
|
|
12348
12348
|
]
|
|
12349
12349
|
},
|
|
12350
|
+
{
|
|
12351
|
+
"name": "d2l-page-header-button",
|
|
12352
|
+
"path": "./components/page/page-header-button.js",
|
|
12353
|
+
"description": "Page header button with an icon and text.",
|
|
12354
|
+
"attributes": [
|
|
12355
|
+
{
|
|
12356
|
+
"name": "icon",
|
|
12357
|
+
"description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
|
|
12358
|
+
"type": "string"
|
|
12359
|
+
},
|
|
12360
|
+
{
|
|
12361
|
+
"name": "text",
|
|
12362
|
+
"description": "REQUIRED: Text for the button",
|
|
12363
|
+
"type": "string"
|
|
12364
|
+
},
|
|
12365
|
+
{
|
|
12366
|
+
"name": "tooltip-offset",
|
|
12367
|
+
"description": "Offset of the tooltip",
|
|
12368
|
+
"type": "Number"
|
|
12369
|
+
},
|
|
12370
|
+
{
|
|
12371
|
+
"name": "disabled",
|
|
12372
|
+
"description": "Disables the button",
|
|
12373
|
+
"type": "boolean",
|
|
12374
|
+
"default": "false"
|
|
12375
|
+
},
|
|
12376
|
+
{
|
|
12377
|
+
"name": "icon-position",
|
|
12378
|
+
"description": "Position of the icon.",
|
|
12379
|
+
"type": "'start'|'end'",
|
|
12380
|
+
"default": "\"start\""
|
|
12381
|
+
},
|
|
12382
|
+
{
|
|
12383
|
+
"name": "no-highlight-border",
|
|
12384
|
+
"description": "Visually hides the highlight border when hovered/focused",
|
|
12385
|
+
"type": "boolean",
|
|
12386
|
+
"default": "false"
|
|
12387
|
+
},
|
|
12388
|
+
{
|
|
12389
|
+
"name": "text-hidden",
|
|
12390
|
+
"description": "Visually hides the text but still accessible",
|
|
12391
|
+
"type": "boolean",
|
|
12392
|
+
"default": "false"
|
|
12393
|
+
}
|
|
12394
|
+
],
|
|
12395
|
+
"properties": [
|
|
12396
|
+
{
|
|
12397
|
+
"name": "icon",
|
|
12398
|
+
"attribute": "icon",
|
|
12399
|
+
"description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
|
|
12400
|
+
"type": "string"
|
|
12401
|
+
},
|
|
12402
|
+
{
|
|
12403
|
+
"name": "text",
|
|
12404
|
+
"attribute": "text",
|
|
12405
|
+
"description": "REQUIRED: Text for the button",
|
|
12406
|
+
"type": "string"
|
|
12407
|
+
},
|
|
12408
|
+
{
|
|
12409
|
+
"name": "tooltipOffset",
|
|
12410
|
+
"attribute": "tooltip-offset",
|
|
12411
|
+
"description": "Offset of the tooltip",
|
|
12412
|
+
"type": "Number"
|
|
12413
|
+
},
|
|
12414
|
+
{
|
|
12415
|
+
"name": "disabled",
|
|
12416
|
+
"attribute": "disabled",
|
|
12417
|
+
"description": "Disables the button",
|
|
12418
|
+
"type": "boolean",
|
|
12419
|
+
"default": "false"
|
|
12420
|
+
},
|
|
12421
|
+
{
|
|
12422
|
+
"name": "iconPosition",
|
|
12423
|
+
"attribute": "icon-position",
|
|
12424
|
+
"description": "Position of the icon.",
|
|
12425
|
+
"type": "'start'|'end'",
|
|
12426
|
+
"default": "\"start\""
|
|
12427
|
+
},
|
|
12428
|
+
{
|
|
12429
|
+
"name": "noHighlightBorder",
|
|
12430
|
+
"attribute": "no-highlight-border",
|
|
12431
|
+
"description": "Visually hides the highlight border when hovered/focused",
|
|
12432
|
+
"type": "boolean",
|
|
12433
|
+
"default": "false"
|
|
12434
|
+
},
|
|
12435
|
+
{
|
|
12436
|
+
"name": "textHidden",
|
|
12437
|
+
"attribute": "text-hidden",
|
|
12438
|
+
"description": "Visually hides the text but still accessible",
|
|
12439
|
+
"type": "boolean",
|
|
12440
|
+
"default": "false"
|
|
12441
|
+
},
|
|
12442
|
+
{
|
|
12443
|
+
"name": "tooltipPosition",
|
|
12444
|
+
"type": "string",
|
|
12445
|
+
"default": "\"bottom\""
|
|
12446
|
+
}
|
|
12447
|
+
]
|
|
12448
|
+
},
|
|
12350
12449
|
{
|
|
12351
12450
|
"name": "d2l-page-header-custom",
|
|
12352
12451
|
"path": "./components/page/page-header-custom.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.248.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",
|