@brightspace-ui/core 3.250.1 → 3.251.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 (6) hide show
  1. package/components/inputs/input-checkbox-styles.js +119 -0
  2. package/components/inputs/input-checkbox.js +2 -108
  3. package/components/table/table-wrapper.js +1 -1
  4. package/custom-elements.json +19 -23
  5. package/helpers/internal/css.js +1 -1
  6. package/package.json +1 -1
package/components/inputs/input-checkbox-styles.js ADDED
@@ -0,0 +1,119 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import { _isValidCssSelector } from '../../helpers/internal/css.js';
3
+ import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
4
+
5
+ registerSemanticVariableForSvgImageUrl(
6
+ '--d2l-input-checkbox-check-image',
7
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
8
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
9
+ </svg>`
10
+ );
11
+
12
+ registerSemanticVariableForSvgImageUrl(
13
+ '--d2l-input-checkbox-indeterminate-image',
14
+ `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
16
+ </svg>`
17
+ );
18
+
19
+ export const cssSizes = {
20
+ inputBoxSize: 1.2,
21
+ checkboxMargin: 0.5,
22
+ };
23
+
24
+ /**
25
+ * A private helper method that should not be used by general consumers
26
+ */
27
+ export const _generateInputCheckboxStyles = (selector) => {
28
+ if (!_isValidCssSelector(selector)) return;
29
+
30
+ const selectorCSS = unsafeCSS(selector);
31
+ return css`
32
+ ${selectorCSS} {
33
+ --d2l-input-checkbox-background-image: none;
34
+ --d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
35
+ --d2l-input-checkbox-background-image-disabled:
36
+ linear-gradient(
37
+ var(--d2l-theme-background-color-interactive-faint-disabled),
38
+ var(--d2l-theme-background-color-interactive-faint-disabled)
39
+ ),
40
+ var(--d2l-input-checkbox-background-image);
41
+ -webkit-appearance: none;
42
+ -moz-appearance: none;
43
+ appearance: none;
44
+ background-image: var(--d2l-input-checkbox-background-image);
45
+ background-position: center center;
46
+ background-repeat: no-repeat;
47
+ background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
48
+ border-radius: 0.3rem;
49
+ border-style: solid;
50
+ box-sizing: border-box;
51
+ display: inline-block;
52
+ height: ${cssSizes.inputBoxSize}rem;
53
+ margin: 0;
54
+ padding: 0;
55
+ vertical-align: middle;
56
+ width: ${cssSizes.inputBoxSize}rem;
57
+ }
58
+ ${selectorCSS}:checked {
59
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
60
+ }
61
+ ${selectorCSS}:indeterminate {
62
+ --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
63
+ }
64
+ ${selectorCSS},
65
+ ${selectorCSS}:hover:disabled {
66
+ background-color: var(--d2l-input-checkbox-background-color);
67
+ border-color: var(--d2l-theme-border-color-emphasized);
68
+ border-width: 1px;
69
+ }
70
+ ${selectorCSS}:hover:disabled {
71
+ border-color: var(--d2l-theme-border-color-disabled);
72
+ }
73
+ ${selectorCSS}:hover,
74
+ ${selectorCSS}:focus,
75
+ ${selectorCSS}.d2l-input-checkbox-focus,
76
+ :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
77
+ border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
78
+ border-width: 2px;
79
+ outline: none;
80
+ }
81
+ ${selectorCSS}:disabled,
82
+ ${selectorCSS}:where([aria-disabled="true"]) {
83
+ background-image: var(--d2l-input-checkbox-background-image-disabled);
84
+ border-color: var(--d2l-theme-border-color-disabled);
85
+ }
86
+ @media (forced-colors: active) {
87
+ ${selectorCSS}:checked,
88
+ ${selectorCSS}:indeterminate {
89
+ background-image: none;
90
+ position: relative;
91
+ }
92
+ ${selectorCSS}:checked::after,
93
+ ${selectorCSS}:indeterminate::after {
94
+ background-color: FieldText;
95
+ content: "";
96
+ display: block;
97
+ height: ${cssSizes.inputBoxSize}rem;
98
+ left: 50%;
99
+ position: absolute;
100
+ top: 50%;
101
+ transform: translate(-50%, -50%);
102
+ width: ${cssSizes.inputBoxSize}rem;
103
+ }
104
+
105
+ ${selectorCSS}:disabled,
106
+ ${selectorCSS}:where([aria-disabled="true"]) {
107
+ opacity: var(--d2l-theme-opacity-disabled-control);
108
+ }
109
+
110
+ ${selectorCSS}:checked::after {
111
+ mask-image: var(--d2l-input-checkbox-check-image);
112
+ }
113
+
114
+ ${selectorCSS}:indeterminate::after {
115
+ mask-image: var(--d2l-input-checkbox-indeterminate-image);
116
+ }
117
+ }
118
+ `;
119
+ };
package/components/inputs/input-checkbox.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import '../expand-collapse/expand-collapse-content.js';
2
2
  import '../tooltip/tooltip.js';
3
+ import { _generateInputCheckboxStyles, cssSizes } from './input-checkbox-styles.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
5
  import { classMap } from 'lit/directives/class-map.js';
5
6
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -8,116 +9,9 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
8
9
  import { ifDefined } from 'lit/directives/if-defined.js';
9
10
  import { InputInlineHelpMixin } from './input-inline-help.js';
10
11
  import { offscreenStyles } from '../offscreen/offscreen.js';
11
- import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
12
12
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
13
13
 
14
- registerSemanticVariableForSvgImageUrl(
15
- '--d2l-input-checkbox-check-image',
16
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
17
- <path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
18
- </svg>`
19
- );
20
-
21
- registerSemanticVariableForSvgImageUrl(
22
- '--d2l-input-checkbox-indeterminate-image',
23
- `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
24
- <path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
25
- </svg>`
26
- );
27
-
28
- export const cssSizes = {
29
- inputBoxSize: 1.2,
30
- checkboxMargin: 0.5,
31
- };
32
-
33
- export const checkboxStyles = css`
34
- input[type="checkbox"].d2l-input-checkbox {
35
- --d2l-input-checkbox-background-image: none;
36
- --d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
37
- --d2l-input-checkbox-background-image-disabled:
38
- linear-gradient(
39
- var(--d2l-theme-background-color-interactive-faint-disabled),
40
- var(--d2l-theme-background-color-interactive-faint-disabled)
41
- ),
42
- var(--d2l-input-checkbox-background-image);
43
- -webkit-appearance: none;
44
- -moz-appearance: none;
45
- appearance: none;
46
- background-image: var(--d2l-input-checkbox-background-image);
47
- background-position: center center;
48
- background-repeat: no-repeat;
49
- background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
50
- border-radius: 0.3rem;
51
- border-style: solid;
52
- box-sizing: border-box;
53
- display: inline-block;
54
- height: ${cssSizes.inputBoxSize}rem;
55
- margin: 0;
56
- padding: 0;
57
- vertical-align: middle;
58
- width: ${cssSizes.inputBoxSize}rem;
59
- }
60
- input[type="checkbox"].d2l-input-checkbox:checked {
61
- --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
62
- }
63
- input[type="checkbox"].d2l-input-checkbox:indeterminate {
64
- --d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
65
- }
66
- input[type="checkbox"].d2l-input-checkbox,
67
- input[type="checkbox"].d2l-input-checkbox:hover:disabled {
68
- background-color: var(--d2l-input-checkbox-background-color);
69
- border-color: var(--d2l-theme-border-color-emphasized);
70
- border-width: 1px;
71
- }
72
- input[type="checkbox"].d2l-input-checkbox:hover:disabled {
73
- border-color: var(--d2l-theme-border-color-disabled);
74
- }
75
- input[type="checkbox"].d2l-input-checkbox:hover,
76
- input[type="checkbox"].d2l-input-checkbox:focus,
77
- input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
78
- :host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
79
- border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
80
- border-width: 2px;
81
- outline: none;
82
- }
83
- input[type="checkbox"].d2l-input-checkbox:disabled,
84
- input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
85
- background-image: var(--d2l-input-checkbox-background-image-disabled);
86
- border-color: var(--d2l-theme-border-color-disabled);
87
- }
88
- @media (forced-colors: active) {
89
- input[type="checkbox"].d2l-input-checkbox:checked,
90
- input[type="checkbox"].d2l-input-checkbox:indeterminate {
91
- background-image: none;
92
- position: relative;
93
- }
94
- input[type="checkbox"].d2l-input-checkbox:checked::after,
95
- input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
96
- background-color: FieldText;
97
- content: "";
98
- display: block;
99
- height: ${cssSizes.inputBoxSize}rem;
100
- left: 50%;
101
- position: absolute;
102
- top: 50%;
103
- transform: translate(-50%, -50%);
104
- width: ${cssSizes.inputBoxSize}rem;
105
- }
106
-
107
- input[type="checkbox"].d2l-input-checkbox:disabled,
108
- input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
109
- opacity: var(--d2l-theme-opacity-disabled-control);
110
- }
111
-
112
- input[type="checkbox"].d2l-input-checkbox:checked::after {
113
- mask-image: var(--d2l-input-checkbox-check-image);
114
- }
115
-
116
- input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
117
- mask-image: var(--d2l-input-checkbox-indeterminate-image);
118
- }
119
- }
120
- `;
14
+ export const checkboxStyles = _generateInputCheckboxStyles('input[type="checkbox"].d2l-input-checkbox');
121
15
 
122
16
  /**
123
17
  * A component that can be used to show a checkbox and optional visible label.
package/components/table/table-wrapper.js CHANGED
@@ -2,7 +2,7 @@ import '../colors/colors.js';
2
2
  import '../scroll-wrapper/scroll-wrapper.js';
3
3
  import '../backdrop/backdrop-loading.js';
4
4
  import { css, html, LitElement, nothing } from 'lit';
5
- import { cssSizes } from '../inputs/input-checkbox.js';
5
+ import { cssSizes } from '../inputs/input-checkbox-styles.js';
6
6
  import { getComposedParent } from '../../helpers/dom.js';
7
7
  import { getFlag } from '../../helpers/flags.js';
8
8
  import { ifDefined } from 'lit/directives/if-defined.js';
package/custom-elements.json CHANGED
@@ -12269,13 +12269,13 @@
12269
12269
  "properties": [
12270
12270
  {
12271
12271
  "name": "properties",
12272
- "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
12273
- "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
12272
+ "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasImmersiveHeaderActions: { ...; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
12273
+ "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasImmersiveHeaderActions\":{\"type\":\"Boolean\",\"attribute\":\"has-immersive-header-actions\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"header\":{\"type\":\"String\",\"attribute\":\"header\"},\"immersiveHeaderTitleType\":{\"type\":\"String\",\"attribute\":\"immersive-header-title-type\"},\"layout\":{\"type\":\"String\",\"attribute\":\"layout\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_demoDialogOpened\":{\"state\":true}}"
12274
12274
  },
12275
12275
  {
12276
12276
  "name": "styles",
12277
12277
  "type": "CSSResult[]",
12278
- "default": "[\"selectStyles\",\"tableStyles\",null]"
12278
+ "default": "[\"inputLabelStyles\",\"selectStyles\",\"tableStyles\",null]"
12279
12279
  },
12280
12280
  {
12281
12281
  "name": "demoMode",
@@ -12284,43 +12284,39 @@
12284
12284
  },
12285
12285
  {
12286
12286
  "name": "hasFooter",
12287
- "type": "boolean",
12288
- "default": "false"
12287
+ "type": "boolean"
12288
+ },
12289
+ {
12290
+ "name": "hasImmersiveHeaderActions",
12291
+ "type": "boolean"
12289
12292
  },
12290
12293
  {
12291
12294
  "name": "hasMainHeader",
12292
- "type": "boolean",
12293
- "default": "false"
12295
+ "type": "boolean"
12294
12296
  },
12295
12297
  {
12296
12298
  "name": "hasSideNavHeader",
12297
- "type": "boolean",
12298
- "default": "false"
12299
+ "type": "boolean"
12299
12300
  },
12300
12301
  {
12301
- "name": "hasSideNavPanel",
12302
- "type": "boolean",
12303
- "default": "false"
12302
+ "name": "hasSupportingHeader",
12303
+ "type": "boolean"
12304
12304
  },
12305
12305
  {
12306
- "name": "hasSupportingHeader",
12307
- "type": "boolean",
12308
- "default": "false"
12306
+ "name": "header",
12307
+ "type": "string"
12309
12308
  },
12310
12309
  {
12311
- "name": "hasSupportingPanel",
12312
- "type": "boolean",
12313
- "default": "false"
12310
+ "name": "immersiveHeaderTitleType",
12311
+ "type": "string"
12314
12312
  },
12315
12313
  {
12316
- "name": "navType",
12317
- "type": "string",
12318
- "default": "\"full\""
12314
+ "name": "layout",
12315
+ "type": "string"
12319
12316
  },
12320
12317
  {
12321
12318
  "name": "widthType",
12322
- "type": "'normal'|'wide'|'fullscreen'",
12323
- "default": "\"normal\""
12319
+ "type": "string"
12324
12320
  }
12325
12321
  ]
12326
12322
  },
package/helpers/internal/css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export function _isValidCssSelector(selector) {
2
2
  const partIsValid = (part) => {
3
- const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
3
+ const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
4
4
  if (part === ':host') return true;
5
5
  const match = part.match(re);
6
6
  const isValid = !!match && match.length === 1 && match[0].length === part.length;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.250.1",
3
+ "version": "3.251.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",