@brightspace-ui/core 3.267.1 → 3.268.0

package/components/inputs/input-checkbox-group.js

@@ -8,45 +8,41 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class InputCheckboxGroup extends PropertyRequiredMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Label for the group of checkboxes
-			 * @type {string}
-			 */
-			label: { required: true, type: String },
-			/**
-			 * Hides the label visually
-			 * @type {boolean}
-			 */
-			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Label for the group of checkboxes
+		 * @type {string}
+		 */
+		label: { required: true, type: String },
+		/**
+		 * Hides the label visually
+		 * @type {boolean}
+		 */
+		labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean }
+	};
 
-	static get styles() {
-		return [inputLabelStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.wrapper {
-				display: flex;
-				flex-direction: column;
-				gap: 0.6rem;
-			}
-			::slotted(d2l-input-checkbox) {
-				margin-bottom: 0;
-			}
-			.d2l-input-label {
-				margin-block-end: 0.6rem;
-			}
-			.d2l-input-label[hidden] {
-				display: none;
-			}
-		`];
-	}
+	static styles = [inputLabelStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.wrapper {
+			display: flex;
+			flex-direction: column;
+			gap: 0.6rem;
+		}
+		::slotted(d2l-input-checkbox) {
+			margin-bottom: 0;
+		}
+		.d2l-input-label {
+			margin-block-end: 0.6rem;
+		}
+		.d2l-input-label[hidden] {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-checkbox.js

@@ -21,116 +21,112 @@ export const checkboxStyles = _generateInputCheckboxStyles('input[type="checkbox
  */
 class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitElement)))) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			ariaLabel: { type: String, attribute: 'aria-label' },
-			/**
-			 * Checked state
-			 * @type {boolean}
-			 */
-			checked: { type: Boolean },
-			/**
-			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
-			 * @type {string}
-			 */
-			description: { type: String },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * Tooltip text when disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			/**
-			 * Sets checkbox to an indeterminate state
-			 * @type {boolean}
-			 */
-			indeterminate: { type: Boolean },
-			/**
-			 * REQUIRED: Label for the input
-			 * @type {string}
-			 */
-			label: { type: String },
-			/**
-			 * Hides the label visually
-			 * @type {boolean}
-			 */
-			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
-			/**
-			 * Hides the supporting slot when unchecked
-			 * @type {boolean}
-			 */
-			supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String },
-			_hasSupporting: { state: true },
-			_isHovered: { state: true },
-		};
-	}
-
-	static get styles() {
-		return [ super.styles, checkboxStyles, offscreenStyles,
-			css`
-				:host {
-					display: block;
-					margin-block-end: 0.6rem;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				:host([label-hidden]) {
-					display: inline-block;
-					margin-block-end: 0;
-				}
-				label {
-					display: flex;
-					line-height: ${cssSizes.inputBoxSize}rem;
-					overflow-wrap: anywhere;
-				}
-				.d2l-input-checkbox-wrapper {
-					display: inline-block;
-				}
-				.d2l-input-checkbox-text {
-					color: var(--d2l-theme-text-color-static-standard);
-					display: inline-block;
-					font-size: 0.8rem;
-					font-weight: 400;
-					margin-inline-start: ${cssSizes.checkboxMargin}rem;
-					vertical-align: top;
-					white-space: normal;
-				}
-				:host([label-hidden]) .d2l-input-checkbox-text {
-					margin-inline-start: 0;
-				}
-				:host([skeleton]) .d2l-input-checkbox-text.d2l-skeletize::before {
-					bottom: 0.3rem;
-					top: 0.3rem;
-				}
-				.d2l-input-inline-help,
-				.d2l-input-checkbox-supporting {
-					margin-inline-start: ${cssSizes.inputBoxSize + cssSizes.checkboxMargin}rem;
-				}
-				:host(:not([skeleton])) .d2l-input-checkbox-text-disabled {
-					opacity: 0.5;
-				}
-				input[type="checkbox"].d2l-input-checkbox {
-					vertical-align: top;
-				}
-				.d2l-input-checkbox-supporting {
-					margin-block-start: 0.6rem;
-				}
-			`
-		];
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		ariaLabel: { type: String, attribute: 'aria-label' },
+		/**
+		 * Checked state
+		 * @type {boolean}
+		 */
+		checked: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Tooltip text when disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		/**
+		 * Sets checkbox to an indeterminate state
+		 * @type {boolean}
+		 */
+		indeterminate: { type: Boolean },
+		/**
+		 * REQUIRED: Label for the input
+		 * @type {string}
+		 */
+		label: { type: String },
+		/**
+		 * Hides the label visually
+		 * @type {boolean}
+		 */
+		labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
+		/**
+		 * Hides the supporting slot when unchecked
+		 * @type {boolean}
+		 */
+		supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String },
+		_hasSupporting: { state: true },
+		_isHovered: { state: true },
+	};
+
+	static styles = [super.styles, checkboxStyles, offscreenStyles,
+		css`
+			:host {
+				display: block;
+				margin-block-end: 0.6rem;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([label-hidden]) {
+				display: inline-block;
+				margin-block-end: 0;
+			}
+			label {
+				display: flex;
+				line-height: ${cssSizes.inputBoxSize}rem;
+				overflow-wrap: anywhere;
+			}
+			.d2l-input-checkbox-wrapper {
+				display: inline-block;
+			}
+			.d2l-input-checkbox-text {
+				color: var(--d2l-theme-text-color-static-standard);
+				display: inline-block;
+				font-size: 0.8rem;
+				font-weight: 400;
+				margin-inline-start: ${cssSizes.checkboxMargin}rem;
+				vertical-align: top;
+				white-space: normal;
+			}
+			:host([label-hidden]) .d2l-input-checkbox-text {
+				margin-inline-start: 0;
+			}
+			:host([skeleton]) .d2l-input-checkbox-text.d2l-skeletize::before {
+				bottom: 0.3rem;
+				top: 0.3rem;
+			}
+			.d2l-input-inline-help,
+			.d2l-input-checkbox-supporting {
+				margin-inline-start: ${cssSizes.inputBoxSize + cssSizes.checkboxMargin}rem;
+			}
+			:host(:not([skeleton])) .d2l-input-checkbox-text-disabled {
+				opacity: 0.5;
+			}
+			input[type="checkbox"].d2l-input-checkbox {
+				vertical-align: top;
+			}
+			.d2l-input-checkbox-supporting {
+				margin-block-start: 0.6rem;
+			}
+		`
+	];
 
 	constructor() {
 		super();

package/components/inputs/input-color.js

@@ -88,155 +88,149 @@ const SWATCH_TRANSPARENT = `<svg xmlns="http://www.w3.org/2000/svg" width="24" h
  */
 class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis
-			 * @type {string}
-			 */
-			associatedValue: { attribute: 'associated-value', type: String },
-			/**
-			 * Puts the input into a disabled state
-			 * @type {boolean}
-			 */
-			disabled: { reflect: true, type: Boolean },
-			/**
-			 * Disallows the user from selecting "None" as a color value
-			 * @type {boolean}
-			 */
-			disallowNone: { attribute: 'disallow-none', type: Boolean },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.
-			 * @type {string}
-			 */
-			label: {
-				type: String,
-				required: {
-					dependentProps: ['type'],
-					validator: (_value, elem, hasValue) => elem.type !== 'custom' || hasValue
-				}
-			},
-			/**
-			 * Hides the label visually
-			 * @type {boolean}
-			 */
-			labelHidden: { attribute: 'label-hidden', type: Boolean },
-			/**
-			 * Puts the input into a read-only state
-			 * @type {boolean}
-			 */
-			readonly: { type: Boolean },
-			/**
-			 * Type of color being chosen
-			 * @type {'background'|'foreground'|'custom'}
-			 * @default end
-			 */
-			type: { reflect: true, type: String },
-			/**
-			 * Value of the input as a HEX color
-			 * @type {string}
-			 */
-			value: { type: String },
-			/**
-			 * @ignore
-			 */
-			launchType: { attribute: 'launch-type', type: String },
-			_opened: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis
+		 * @type {string}
+		 */
+		associatedValue: { attribute: 'associated-value', type: String },
+		/**
+		 * Puts the input into a disabled state
+		 * @type {boolean}
+		 */
+		disabled: { reflect: true, type: Boolean },
+		/**
+		 * Disallows the user from selecting "None" as a color value
+		 * @type {boolean}
+		 */
+		disallowNone: { attribute: 'disallow-none', type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.
+		 * @type {string}
+		 */
+		label: {
+			type: String,
+			required: {
+				dependentProps: ['type'],
+				validator: (_value, elem, hasValue) => elem.type !== 'custom' || hasValue
+			}
+		},
+		/**
+		 * Hides the label visually
+		 * @type {boolean}
+		 */
+		labelHidden: { attribute: 'label-hidden', type: Boolean },
+		/**
+		 * Puts the input into a read-only state
+		 * @type {boolean}
+		 */
+		readonly: { type: Boolean },
+		/**
+		 * Type of color being chosen
+		 * @type {'background'|'foreground'|'custom'}
+		 * @default end
+		 */
+		type: { reflect: true, type: String },
+		/**
+		 * Value of the input as a HEX color
+		 * @type {string}
+		 */
+		value: { type: String },
+		/**
+		 * @ignore
+		 */
+		launchType: { attribute: 'launch-type', type: String },
+		_opened: { state: true }
+	};
+
+	static styles = [super.styles, buttonStyles, inputLabelStyles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-	static get styles() {
-		return [ super.styles, buttonStyles, inputLabelStyles,
-			css`
-				:host {
-					display: inline-block;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-
-				button {
-					align-items: center;
-					background-color: var(--d2l-color-gypsum);
-					display: flex;
-					gap: 0.15rem;
-					min-height: auto;
-					padding: 0.55rem;
-					position: relative;
-				}
-				button:not([aria-disabled]):hover,
-				button:not([aria-disabled]):focus,
-				button.opened {
-					background-color: var(--d2l-color-mica);
-				}
-				:host([disabled]) button {
-					cursor: default;
-					opacity: 0.5;
-				}
-				/* Firefox includes a hidden border which messes up button dimensions */
-				button::-moz-focus-inner {
-					border: 0;
-				}
-
-				.d2l-input-label {
-					margin-bottom: 0;
-					padding-bottom: 7px; /* prevent margin-collapse with readonly swatch margins */
-				}
-
-				.swatch {
-					border: 1px inset rgba(0, 0, 0, 0.42);
-					border-radius: 0.1rem;
-					box-sizing: border-box;
-					display: inline-block;
-					height: 0.3rem;
-					width: 1.2rem;
-				}
-				:host([type="custom"]) .swatch {
-					border-radius: 0.15rem;
-					height: 1rem;
-				}
-				.swatch-transparent {
-					background-image: ${svgToCSS(SWATCH_TRANSPARENT)};
-					background-position-y: -1.5px;
-					background-size: cover;
-				}
-				:host([type="custom"]) .swatch-transparent {
-					background-position-y: 0;
-				}
-
-				.icon-wrapper {
-					align-items: center;
-					display: flex;
-					flex-direction: column;
-					gap: 0.1rem;
-				}
-				.icon-wrapper > svg {
-					height: 0.6rem;
-				}
-
-				button,
-				.readonly-wrapper {
-					color: var(--d2l-color-ferrite);
-				}
-
-				.readonly-wrapper {
-					border-radius: 0.1rem;
-					display: block;
-					line-height: 0;
-					margin: 0.55rem 0;
-					outline: none;
-					width: 1.2rem;
-				}
-				${getFocusRingStyles('.readonly-wrapper')}
-				@media (prefers-contrast: more) {
-					.swatch {
-						border: 1px solid FieldText;
-						forced-color-adjust: none;
-					}
-				}
-			`
-		];
-	}
+		button {
+			align-items: center;
+			background-color: var(--d2l-color-gypsum);
+			display: flex;
+			gap: 0.15rem;
+			min-height: auto;
+			padding: 0.55rem;
+			position: relative;
+		}
+		button:not([aria-disabled]):hover,
+		button:not([aria-disabled]):focus,
+		button.opened {
+			background-color: var(--d2l-color-mica);
+		}
+		:host([disabled]) button {
+			cursor: default;
+			opacity: 0.5;
+		}
+		/* Firefox includes a hidden border which messes up button dimensions */
+		button::-moz-focus-inner {
+			border: 0;
+		}
+
+		.d2l-input-label {
+			margin-bottom: 0;
+			padding-bottom: 7px; /* prevent margin-collapse with readonly swatch margins */
+		}
+
+		.swatch {
+			border: 1px inset rgba(0, 0, 0, 0.42);
+			border-radius: 0.1rem;
+			box-sizing: border-box;
+			display: inline-block;
+			height: 0.3rem;
+			width: 1.2rem;
+		}
+		:host([type="custom"]) .swatch {
+			border-radius: 0.15rem;
+			height: 1rem;
+		}
+		.swatch-transparent {
+			background-image: ${svgToCSS(SWATCH_TRANSPARENT)};
+			background-position-y: -1.5px;
+			background-size: cover;
+		}
+		:host([type="custom"]) .swatch-transparent {
+			background-position-y: 0;
+		}
+
+		.icon-wrapper {
+			align-items: center;
+			display: flex;
+			flex-direction: column;
+			gap: 0.1rem;
+		}
+		.icon-wrapper > svg {
+			height: 0.6rem;
+		}
+
+		button,
+		.readonly-wrapper {
+			color: var(--d2l-color-ferrite);
+		}
+
+		.readonly-wrapper {
+			border-radius: 0.1rem;
+			display: block;
+			line-height: 0;
+			margin: 0.55rem 0;
+			outline: none;
+			width: 1.2rem;
+		}
+		${getFocusRingStyles('.readonly-wrapper')}
+		@media (prefers-contrast: more) {
+			.swatch {
+				border: 1px solid FieldText;
+				forced-color-adjust: none;
+			}
+		}
+	`];
 
 	constructor() {
 		super();