@brightspace-ui/core 3.142.1 → 3.143.0

package/components/popover/popover-mixin.js

@@ -6,12 +6,25 @@ import { css, html, nothing } from 'lit';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
 import { getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
+export const positionLocations = Object.freeze({
+	blockEnd: 'block-end',
+	blockStart: 'block-start',
+	inlineEnd: 'inline-end',
+	inlineStart: 'inline-start'
+});
+export const positionSpans = Object.freeze({
+	all: 'all',
+	end: 'end',
+	start: 'start'
+});
+
 const defaultPreferredPosition = {
-	location: 'block-end', // block-start, block-end
-	span: 'all', // start, end, all
+	location: positionLocations.blockEnd,
+	span: positionSpans.all,
 	allowFlip: true
 };
 const minBackdropHeightMobile = 42;
@@ -20,6 +33,12 @@ const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 const isSupported = ('popover' in HTMLElement.prototype);
 
+const getScrollbarWidth = () => {
+	const width = window.innerWidth - document.documentElement.clientWidth;
+	if (width > 0) return width + 1; // 16 when present, but can be 0 even if visible (ex. MacOS depending on settings)
+	else return 0;
+};
+
 export const PopoverMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -127,6 +146,17 @@ export const PopoverMixin = superclass => class extends superclass {
 				position: absolute;
 				z-index: 1;
 			}
+			:host([_location="block-start"]) .pointer {
+				clip: rect(9px, 21px, 22px, -3px);
+			}
+			:host([_location="inline-start"]) .pointer,
+			:host([_location="inline-end"]) .pointer.pointer-mirror {
+				clip: rect(-3px, 21px, 21px, 10px);
+			}
+			:host([_location="inline-end"]) .pointer,
+			:host([_location="inline-start"]) .pointer.pointer-mirror {
+				clip: rect(-3px, 8px, 21px, -3px);
+			}
 
 			.pointer > div {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
@@ -138,10 +168,6 @@ export const PopoverMixin = superclass => class extends superclass {
 				width: ${pointerLength}px;
 			}
 
-			:host([_location="block-start"]) .pointer {
-				clip: rect(9px, 21px, 22px, -3px);
-			}
-
 			:host([_location="block-start"]) .pointer > div {
 				box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 			}
@@ -278,7 +304,10 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	configure(properties) {
-		this._margin = properties?.margin ?? 18;
+		if (properties?.margin) this._margin = properties.margin;
+		else if (properties?.position?.location === positionLocations.inlineStart
+			|| properties?.position?.location === positionLocations.inlineEnd) this._margin = 0;
+		else this._margin = 18;
 		this._maxHeight = properties?.maxHeight;
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
@@ -296,8 +325,8 @@ export const PopoverMixin = superclass => class extends superclass {
 			|| this._preferredPosition?.span !== properties.position?.span
 			|| this._preferredPosition?.allowFlip !== properties.position?.allowFlip) {
 			this._preferredPosition = {
-				location: properties?.position?.location ?? 'block-end',
-				span: properties?.position?.span ?? 'all',
+				location: properties?.position?.location ?? positionLocations.blockEnd,
+				span: properties?.position?.span ?? positionSpans.all,
 				allowFlip: properties?.position?.allowFlip ?? true
 			};
 		}
@@ -371,11 +400,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			};
 
 			// space in viewport
+			const prefersInline = this._preferredPosition.location === positionLocations.inlineStart || this._preferredPosition.location === positionLocations.inlineEnd;
 			const spaceAround = this.#constrainSpaceAround({
 				// allow for opener offset + outer margin
-				above: openerRect.top - this._offset - this._margin,
+				above: openerRect.top - (prefersInline ? 0 : this._offset) - this._margin,
 				// allow for opener offset + outer margin
-				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
+				below: window.innerHeight - openerRect.bottom - (prefersInline ? 0 : this._offset) - this._margin,
 				// allow for outer margin
 				left: openerRect.left - 20,
 				// allow for outer margin
@@ -398,7 +428,9 @@ export const PopoverMixin = superclass => class extends superclass {
 			if (options.updateHeight) {
 
 				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
-				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
+				const availableHeight = (this._location === positionLocations.inlineStart || this._location === positionLocations.inlineEnd)
+					? (spaceAround.above + spaceAround.below + openerRect.height)
+					: (this._location === positionLocations.blockStart ? spaceAround.above : spaceAround.below);
 
 				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
 					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
@@ -409,8 +441,6 @@ export const PopoverMixin = superclass => class extends superclass {
 					await this.updateComplete;
 				}
 
-				// todo: handle inline-start and inline-end locations
-
 			}
 
 			/** @ignore */
@@ -434,9 +464,9 @@ export const PopoverMixin = superclass => class extends superclass {
 		const mobileTrayLocation = this._mobile ? this._mobileTrayLocation : null;
 
 		let stylesMap;
-		if (mobileTrayLocation === 'block-end') {
+		if (mobileTrayLocation === positionLocations.blockEnd) {
 			stylesMap = this.#getMobileTrayBlockStyleMaps();
-		} else if (mobileTrayLocation === 'inline-start' || mobileTrayLocation === 'inline-end') {
+		} else if (mobileTrayLocation === positionLocations.inlineStart || mobileTrayLocation === positionLocations.inlineEnd) {
 			stylesMap = this.#getMobileTrayInlineStyleMaps();
 		} else {
 			stylesMap = this.#getStyleMaps();
@@ -478,8 +508,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 		}
 
+		const pointerClasses = {
+			'pointer': true,
+			'pointer-mirror': this._rtl
+		};
 		const pointer = !this._noPointer ? html`
-			<div class="pointer" style="${styleMap(pointerPositionStyles)}">
+			<div class="${classMap(pointerClasses)}" style="${styleMap(pointerPositionStyles)}">
 				<div></div>
 			</div>
 		` : nothing;
@@ -580,9 +614,9 @@ export const PopoverMixin = superclass => class extends superclass {
 	#constrainSpaceAround(spaceAround, spaceRequired, openerRect) {
 		const constrained = { ...spaceAround };
 
-		if ((this._preferredPosition.span === 'end' && !this._rtl) || (this._preferredPosition.span === 'start' && this._rtl)) {
+		if ((this._preferredPosition.span === positionSpans.end && !this._rtl) || (this._preferredPosition.span === positionSpans.start && this._rtl)) {
 			constrained.left = Math.max(0, spaceRequired.width - (openerRect.width + spaceAround.right));
-		} else if ((this._preferredPosition.span === 'end' && this._rtl) || (this._preferredPosition.span === 'start' && !this._rtl)) {
+		} else if ((this._preferredPosition.span === positionSpans.end && this._rtl) || (this._preferredPosition.span === positionSpans.start && !this._rtl)) {
 			constrained.right = Math.max(0, spaceRequired.width - (openerRect.width + spaceAround.left));
 		}
 
@@ -621,28 +655,46 @@ export const PopoverMixin = superclass => class extends superclass {
 			return preferred.location;
 		}
 
-		if (preferred.location === 'block-end') {
-			if (spaceAround.below >= spaceRequired.height) return 'block-end';
-			if (spaceAround.above >= spaceRequired.height) return 'block-start';
+		if (preferred.location === positionLocations.blockEnd) {
+			if (spaceAround.below >= spaceRequired.height) return positionLocations.blockEnd;
+			if (spaceAround.above >= spaceRequired.height) return positionLocations.blockStart;
 			// if auto-fit is enabled, scroll will be enabled for the inner content so it will always fit in the available space so pick the largest space it can be displayed in
-			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? 'block-start' : 'block-end';
-			if (spaceAroundScroll.below >= spaceRequired.height) return 'block-end';
-			if (spaceAroundScroll.above >= spaceRequired.height) return 'block-start';
+			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? positionLocations.blockStart : positionLocations.blockEnd;
+			if (spaceAroundScroll.below >= spaceRequired.height) return positionLocations.blockEnd;
+			if (spaceAroundScroll.above >= spaceRequired.height) return positionLocations.blockStart;
 		}
 
-		if (preferred.location === 'block-start') {
-			if (spaceAround.above >= spaceRequired.height) return 'block-start';
-			if (spaceAround.below >= spaceRequired.height) return 'block-end';
+		if (preferred.location === positionLocations.blockStart) {
+			if (spaceAround.above >= spaceRequired.height) return positionLocations.blockStart;
+			if (spaceAround.below >= spaceRequired.height) return positionLocations.blockEnd;
 			// if auto-fit is enabled, scroll will be enabled for the inner content so it will always fit in the available space so pick the largest space it can be displayed in
-			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? 'block-start' : 'block-end';
-			if (spaceAroundScroll.above >= spaceRequired.height) return 'block-start';
-			if (spaceAroundScroll.below >= spaceRequired.height) return 'block-end';
+			if (!this.noAutoFit) return spaceAround.above > spaceAround.below ? positionLocations.blockStart : positionLocations.blockEnd;
+			if (spaceAroundScroll.above >= spaceRequired.height) return positionLocations.blockStart;
+			if (spaceAroundScroll.below >= spaceRequired.height) return positionLocations.blockEnd;
 		}
 
-		// todo: add location order for inline-start and inline-end
+		if (preferred.location === positionLocations.inlineEnd) {
+			if (this._rtl) {
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineEnd;
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineStart;
+			} else {
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineEnd;
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineStart;
+			}
+		}
+
+		if (preferred.location === positionLocations.inlineStart) {
+			if (this._rtl) {
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineStart;
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineEnd;
+			} else {
+				if (spaceAround.left >= spaceRequired.width) return positionLocations.inlineStart;
+				if (spaceAround.right >= spaceRequired.width) return positionLocations.inlineEnd;
+			}
+		}
 
 		// if auto-fit is disabled and it doesn't fit in the scrollable space above or below, always open down because it can add scrollable space
-		return 'block-end';
+		return positionLocations.blockEnd;
 	}
 
 	#getMobileTrayBlockStyleMaps() {
@@ -743,11 +795,11 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		let inlineEndOverride;
 		let inlineStartOverride;
-		if (this._mobileTrayLocation === 'inline-end') {
+		if (this._mobileTrayLocation === positionLocations.inlineEnd) {
 			// On non-responsive pages, the innerWidth may be wider than the screen,
 			// override right to stick to right of viewport
 			inlineEndOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
-		} else if (this._mobileTrayLocation === 'inline-start') {
+		} else if (this._mobileTrayLocation === positionLocations.inlineStart) {
 			// On non-responsive pages, the innerWidth may be wider than the screen,
 			// override left to stick to left of viewport
 			inlineStartOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
@@ -794,33 +846,55 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		const pointerRect = pointer.getBoundingClientRect();
 
-		if (this._preferredPosition.span !== 'all') {
-			const xAdjustment = Math.min(20 + ((pointerRotatedLength - pointerLength) / 2), (openerRect.width - pointerLength) / 2);
-			if (!this._rtl) {
-				if (this._preferredPosition.span === 'end') {
-					position.left = openerRect.left + xAdjustment;
+		if (this._location === positionLocations.blockEnd || this._location === positionLocations.blockStart) {
+
+			if (this._preferredPosition.span !== positionSpans.all) {
+				const xAdjustment = Math.min(20 + ((pointerRotatedLength - pointerLength) / 2), (openerRect.width - pointerLength) / 2);
+				if (!this._rtl) {
+					if (this._preferredPosition.span === positionSpans.end) {
+						position.left = openerRect.left + xAdjustment;
+					} else {
+						position.right = (openerRect.right * -1) + xAdjustment;
+					}
 				} else {
-					position.right = (openerRect.right * -1) + xAdjustment;
+					if (this._preferredPosition.span === positionSpans.end) {
+						position.right = window.innerWidth - openerRect.right + xAdjustment - getScrollbarWidth();
+					} else {
+						position.left = (window.innerWidth - openerRect.left - xAdjustment - getScrollbarWidth()) * -1;
+					}
 				}
 			} else {
-				if (this._preferredPosition.span === 'end') {
-					position.right = window.innerWidth - openerRect.right + xAdjustment;
+				if (!this._rtl) {
+					position.left = openerRect.left + ((openerRect.width - pointerRect.width) / 2);
 				} else {
-					position.left = (window.innerWidth - openerRect.left - xAdjustment) * -1;
+					position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2) - getScrollbarWidth();
 				}
 			}
-		} else {
-			if (!this._rtl) {
-				position.left = openerRect.left + ((openerRect.width - pointerRect.width) / 2);
+
+			if (this._location === positionLocations.blockStart) {
+				position.bottom = window.innerHeight - openerRect.top + this._offset - 8; // 8 minor adjustment to position pointer at edge of content
 			} else {
-				position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2);
+				position.top = openerRect.top + openerRect.height + this._offset - 7; // 7 minor adjustment to position pointer at edge of content
+			}
+
+		} else if (this._location === positionLocations.inlineEnd || this._location === positionLocations.inlineStart) {
+
+			position.top = openerRect.top + (openerRect.height / 2) - (pointerLength / 2);
+
+			if (this._location === positionLocations.inlineStart) {
+				if (!this._rtl) {
+					position.right = (openerRect.left - this._offset + 7) * -1; // 7 minor adjustment to position pointer at edge of content
+				} else {
+					position.left = (window.innerWidth - openerRect.right + 7 - this._offset - getScrollbarWidth()) * -1; // 7 minor adjustment to position pointer at edge of content
+				}
+			} else {
+				if (!this._rtl) {
+					position.left = openerRect.left + openerRect.width + this._offset - 7; // 7 minor adjustment to position pointer at edge of content
+				} else {
+					position.right = window.innerWidth - openerRect.left - 7 + this._offset - getScrollbarWidth(); // 7 minor adjustment to position pointer at edge of content
+				}
 			}
-		}
 
-		if (this._location === 'block-start') {
-			position.bottom = window.innerHeight - openerRect.top + this._offset - 8;
-		} else {
-			position.top = openerRect.top + openerRect.height + this._offset - 7;
 		}
 
 		return position;
@@ -829,79 +903,124 @@ export const PopoverMixin = superclass => class extends superclass {
 	#getPosition(spaceAround, openerRect, contentRect) {
 		const position = {};
 
-		if (this._location === 'block-end' || this._location === 'block-start') {
+		if (this._location === positionLocations.blockEnd || this._location === positionLocations.blockStart) {
 
 			const xAdjustment = this.#getPositionXAdjustment(spaceAround, openerRect, contentRect);
 			if (xAdjustment !== null) {
 				if (!this._rtl) {
 					position.left = openerRect.left + xAdjustment;
 				} else {
-					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment;
+					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment - getScrollbarWidth();
 				}
 			}
 
-			if (this._location === 'block-start') {
+			if (this._location === positionLocations.blockStart) {
 				position.bottom = window.innerHeight - openerRect.top + this._offset;
 			} else {
 				position.top = openerRect.top + openerRect.height + this._offset;
 			}
 
-		}
+		} else if (this._location === positionLocations.inlineEnd || this._location === positionLocations.inlineStart) {
 
-		// todo: add position styles for inline-start and inline-end
+			const yAdjustment = this.#getPositionYAdjustment(spaceAround, openerRect, contentRect);
+			if (yAdjustment !== null) {
+				position.top = openerRect.top + yAdjustment;
+			}
+
+			if (this._location === positionLocations.inlineStart) {
+				if (!this._rtl) {
+					position.right = (openerRect.left - this._offset) * -1;
+				} else {
+					position.left = (window.innerWidth - openerRect.right - this._offset - getScrollbarWidth()) * -1;
+				}
+			} else {
+				if (!this._rtl) {
+					position.left = openerRect.left + openerRect.width + this._offset;
+				} else {
+					position.right = window.innerWidth - openerRect.left + this._offset - getScrollbarWidth();
+				}
+			}
+
+		}
 
 		return position;
 	}
 
 	#getPositionXAdjustment(spaceAround, openerRect, contentRect) {
 
-		if (this._location === 'block-end' || this._location === 'block-start') {
+		if (this._location !== positionLocations.blockEnd && this._location !== positionLocations.blockStart) return null;
+
+		const centerDelta = contentRect.width - openerRect.width;
+		const contentXAdjustment = centerDelta / 2;
 
-			const centerDelta = contentRect.width - openerRect.width;
-			const contentXAdjustment = centerDelta / 2;
+		if (this._preferredPosition.span === positionSpans.all && centerDelta <= 0) {
+			// center with target (opener wider than content)
+			return contentXAdjustment * -1;
+		}
+		if (this._preferredPosition.span === positionSpans.all && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
+			// center with target (content wider than opener and enough space around)
+			return contentXAdjustment * -1;
+		}
 
-			if (this._preferredPosition.span === 'all' && centerDelta <= 0) {
-				// center with target (opener wider than content)
-				return contentXAdjustment * -1;
+		if (!this._rtl) {
+			if (spaceAround.left < contentXAdjustment) {
+				// slide content right (not enough space to center)
+				return spaceAround.left * -1;
+			} else if (spaceAround.right < contentXAdjustment) {
+				// slide content left (not enough space to center)
+				return (centerDelta * -1) + spaceAround.right;
 			}
-			if (this._preferredPosition.span === 'all' && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
-				// center with target (content wider than opener and enough space around)
-				return contentXAdjustment * -1;
+		} else {
+			if (spaceAround.left < contentXAdjustment) {
+				// slide content right (not enough space to center)
+				return (centerDelta * -1) + spaceAround.left;
+			} else if (spaceAround.right < contentXAdjustment) {
+				// slide content left (not enough space to center)
+				return spaceAround.right * -1;
 			}
+		}
 
-			if (!this._rtl) {
-				if (spaceAround.left < contentXAdjustment) {
-					// slide content right (not enough space to center)
-					return spaceAround.left * -1;
-				} else if (spaceAround.right < contentXAdjustment) {
-					// slide content left (not enough space to center)
-					return (centerDelta * -1) + spaceAround.right;
-				}
+		if (this._preferredPosition.span !== positionSpans.all) {
+			// shift it (not enough space to align as requested)
+			const shift = Math.min((openerRect.width / 2) - (20 + pointerLength / 2), 0); // 20 ~= 1rem
+			if (this._preferredPosition.span === positionSpans.end) {
+				return shift;
 			} else {
-				if (spaceAround.left < contentXAdjustment) {
-					// slide content right (not enough space to center)
-					return (centerDelta * -1) + spaceAround.left;
-				} else if (spaceAround.right < contentXAdjustment) {
-					// slide content left (not enough space to center)
-					return spaceAround.right * -1;
-				}
+				return openerRect.width - contentRect.width - shift;
 			}
+		}
 
-			if (this._preferredPosition.span !== 'all') {
-				// shift it (not enough space to align as requested)
-				const shift = Math.min((openerRect.width / 2) - (20 + pointerLength / 2), 0); // 20 ~= 1rem
-				if (this._preferredPosition.span === 'end') {
-					return shift;
-				} else {
-					return openerRect.width - contentRect.width - shift;
-				}
-			}
+		return null;
 
+	}
+
+	#getPositionYAdjustment(spaceAround, openerRect, contentRect) {
+
+		if (this._location !== positionLocations.inlineEnd && this._location !== positionLocations.inlineStart) return null;
+
+		const centerDelta = contentRect.height - openerRect.height;
+		const contentYAdjustment = centerDelta / 2;
+
+		if (this._preferredPosition.span === positionSpans.all && centerDelta <= 0) {
+			// center with target (opener taller than content)
+			return contentYAdjustment * -1;
 		}
 
-		// todo: add position styles for inline-start and inline-end
+		if (this._preferredPosition.span === positionSpans.all && spaceAround.above > contentYAdjustment && spaceAround.below > contentYAdjustment) {
+			// center with target (content wider than opener and enough space around)
+			return contentYAdjustment * -1;
+		}
+
+		if (spaceAround.above < contentYAdjustment) {
+			// slide content down (not enough space to center)
+			return spaceAround.above * -1;
+		} else if (spaceAround.below < contentYAdjustment) {
+			// slide content up (not enough space to center)
+			return (centerDelta * -1) + spaceAround.below;
+		}
 
 		return null;
+
 	}
 
 	#getStyleMaps() {

package/custom-elements.json

@@ -11519,6 +11519,11 @@
       "name": "d2l-test-popover",
       "path": "./components/popover/test/popover.js",
       "attributes": [
+        {
+          "name": "margin",
+          "description": "Margin to include when computing space available.",
+          "type": "number"
+        },
         {
           "name": "max-height",
           "description": "Max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.",
@@ -11580,6 +11585,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "margin",
+          "attribute": "margin",
+          "description": "Margin to include when computing space available.",
+          "type": "number"
+        },
         {
           "name": "maxHeight",
           "attribute": "max-height",

package/lang/ar.js

@@ -1,4 +1,5 @@
 export default {
+	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
@@ -22,14 +23,33 @@ export default {
 	"components.filter.clearAnnounce": "جارٍ مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.clearDescription": "مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.loading": "يتم تحميل عوامل التصفية",
-	"components.filter.filterCountDescription": "{number, plural, =0 {لم يتم تطبيق عوامل تصفية.} one {تم تطبيق {number} عامل تصفية} other {تم تطبيق {number} من عوامل التصفية.}}",
+	"components.filter.filterCountDescription":
+		`{number, plural,
+			=0 {لم يتم تطبيق عوامل تصفية.}
+			one {تم تطبيق {number} عامل تصفية}
+			other {تم تطبيق {number} من عوامل التصفية.}
+		}`,
 	"components.filter.filters": "عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
-	"components.filter.searchResults": "{number, plural, =0 {ما من نتائج بحث} one {{number} نتيجة بحث} other {{number} من نتائج البحث}}",
+	"components.filter.searchResults":
+		`{number, plural,
+			=0 {ما من نتائج بحث}
+			one {{number} نتيجة بحث}
+			other {{number} من نتائج البحث}
+		}`,
 	"components.filter.selectedFirstListLabel": "{headerText}. تظهر عوامل التصفية المحددة أولاً.",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
-	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, =1 {آخر ساعة} other {آخر {num} من الساعات}}",
-	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {يوم} one {آخر {num} يوم} other {آخر {num} من الأيام}}",
+	"components.filter-dimension-set-date-text-value.textHours":
+		`{num, plural,
+			=1 {آخر ساعة}
+			other {آخر {num} من الساعات}
+		}`,
+	"components.filter-dimension-set-date-text-value.textDays":
+		`{num, plural,
+			=0 {يوم}
+			one {آخر {num} يوم}
+			other {آخر {num} من الأيام}
+		}`,
 	"components.filter-dimension-set-date-text-value.textMonths": "آخر {num} من الأشهر",
 	"components.filter-dimension-set-date-time-range-value.label": "{text}، التوسيع لاختيار التواريخ",
 	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} إلى {endValue}",
@@ -39,13 +59,35 @@ export default {
 	"components.form-element.defaultError": "{label} غير صالحة",
 	"components.form-element.defaultFieldLabel": "الحقل",
 	"components.form-element.input.email.typeMismatch": "البريد الإلكتروني غير صالح",
-	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {يجب أن يكون الرقم أكبر من {min} وأقل من {max}.} other {يجب أن يكون الرقم أكبر من {min} وأقل من أو مساويًا لـ {max}.}}} other {{maxExclusive, select, true {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من {max}.} other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من أو مساويًا لـ {max}.}}}}",
-	"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {يجب أن يكون الرقم أقل من {max}.} other {يجب أن يكون الرقم أقل من أو مساويًا لـ {max}.}}",
-	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {يجب أن يكون الرقم أكبر من {min}.} other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min}.}}",
+	"components.form-element.input.number.rangeError":
+		`{minExclusive, select,
+			true {{maxExclusive, select,
+				true {يجب أن يكون الرقم أكبر من {min} وأقل من {max}.}
+				other {يجب أن يكون الرقم أكبر من {min} وأقل من أو مساويًا لـ {max}.}
+			}}
+			other {{maxExclusive, select,
+				true {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من {max}.}
+				other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min} وأقل من أو مساويًا لـ {max}.}
+			}}
+		}`,
+	"components.form-element.input.number.rangeOverflow":
+		`{maxExclusive, select,
+			true {يجب أن يكون الرقم أقل من {max}.}
+			other {يجب أن يكون الرقم أقل من أو مساويًا لـ {max}.}
+		}`,
+	"components.form-element.input.number.rangeUnderflow":
+		`{minExclusive, select,
+			true {يجب أن يكون الرقم أكبر من {min}.}
+			other {يجب أن يكون الرقم أكبر من أو مساويًا لـ {min}.}
+		}`,
 	"components.form-element.input.text.tooShort": "يجب أن تتألف التسمية {label} من {minlength} من الأحرف على الأقل",
 	"components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
 	"components.form-element.valueMissing": "{label} مطلوبة",
-	"components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
+	"components.form-error-summary.errorSummary":
+		`{count, plural,
+			one {تم العثور على {count} خطأ في المعلومات التي أرسلتها}
+			other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}
+		}`,
 	"components.form-error-summary.text": "تبديل تفاصيل الخطأ",
 	"components.input-color.backgroundColor": "لون الخلفية",
 	"components.input-color.foregroundColor": "لون المقدمة",
@@ -109,10 +151,22 @@ export default {
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل المزيد",
 	"components.pager-load-more.action-with-page-size": "تحميل {count} إضافي",
-	"components.pageable.info": "{count, plural, one {{countFormatted} مادة واحد} other {{countFormatted} من المواد}}",
-	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} من أصل {totalCountFormatted} مادة واحدة} other {{countFormatted} من أصل {totalCountFormatted} من المواد}}",
+	"components.pageable.info":
+		`{count, plural,
+			one {{countFormatted} مادة واحد}
+			other {{countFormatted} من المواد}
+		}`,
+	"components.pageable.info-with-total":
+		`{totalCount, plural,
+			one {{countFormatted} من أصل {totalCountFormatted} مادة واحدة}
+			other {{countFormatted} من أصل {totalCountFormatted} من المواد}
+		}`,
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
-	"components.selection.action-max-hint": "{count, plural, one {يتم التعطيل عند تحديد أكثر من {countFormatted} عنصر} other {يتم التعطيل عند تحديد أكثر من {countFormatted} من العناصر}}",
+	"components.selection.action-max-hint":
+		`{count, plural,
+			one {يتم التعطيل عند تحديد أكثر من {countFormatted} عنصر}
+			other {يتم التعطيل عند تحديد أكثر من {countFormatted} من العناصر}
+		}`,
 	"components.selection.action-required-hint": "حدد عنصرًا لتنفيذ هذا الإجراء",
 	"components.selection.select-all": "تحديد الكل",
 	"components.selection.select-all-items": "تحديد كل المواد الـ {count}.",
@@ -125,7 +179,26 @@ export default {
 	"components.switch.conditions": "يجب استيفاء الشروط",
 	"components.table-col-sort-button.addSortOrder": "التحديد لإضافة ترتيب الفرز",
 	"components.table-col-sort-button.changeSortOrder": "التحديد لتغيير ترتيب الفرز",
-	"components.table-col-sort-button.title": "{sourceType, select, dates {{direction, select, desc {الفرز من الجديد إلى القديم} other {الفرز من القديم إلى الجديد}}} numbers {{direction, select, desc {الفرز من الأعلى إلى الأدنى} other {الفرز من الأدنى إلى الأعلى}}} words {{direction, select, desc {الفرز من ي إلى أ} other {الفرز من أ إلى ي}}} value {الفرز {selectedMenuItemText}} other {{direction, select, desc {الفرز تنازليًا} other {الفرز تصاعديًا}}}}",
+	"components.table-col-sort-button.title":
+		`{sourceType, select,
+			dates {{direction, select,
+				desc {الفرز من الجديد إلى القديم}
+				other {الفرز من القديم إلى الجديد}
+			}}
+			numbers {{direction, select,
+				desc {الفرز من الأعلى إلى الأدنى}
+				other {الفرز من الأدنى إلى الأعلى}
+			}}
+			words {{direction, select,
+				desc {الفرز من ي إلى أ}
+				other {الفرز من أ إلى ي}
+			}}
+			value {الفرز {selectedMenuItemText}}
+			other {{direction, select,
+				desc {الفرز تنازليًا}
+				other {الفرز تصاعديًا}
+			}}
+		}`,
 	"components.table-controls.label": "إجراءات للجدول",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",