inviton-powerduck 0.0.191 → 0.0.193

package/common/utils/date-localization-utils.ts

@@ -121,7 +121,7 @@ export default class DateLocalizationUtils {
 		}
 	})();
 
-	static formatRange = (from: Temporal.PlainDateTime, to: Temporal.PlainDateTime): string => {
+	static formatRange = (from: Temporal.PlainDateTime | Temporal.PlainDate, to: Temporal.PlainDateTime | Temporal.PlainDate): string => {
 		if (from.month == to.month) {
 			// eslint-disable-next-line no-restricted-syntax
 			const convertDate = new Date(Date.UTC(
@@ -201,7 +201,7 @@ export default class DateLocalizationUtils {
 	};
 
 	private static getFormatted = (
-		dte: Temporal.PlainDateTime,
+		dte: Temporal.PlainDateTime | Temporal.PlainDate,
 		pattern: string,
 		day: 'numeric' | '2-digit' | undefined,
 		month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | undefined,

package/components/mobile-optimized-hero-filter/index.tsx

@@ -18,6 +18,7 @@ interface MobileOptimizedHeroFilterArgs {
 	submitText?: string;
 	clickedClear?: () => void;
 	clickedSubmit?: () => void;
+	modalBackdropCssClass?: string;
 	mobileModalCssClass?: string;
 	mobileShowClearFilters?: boolean;
 	mobileModalSize?: ModalSize;
@@ -34,6 +35,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 	@Prop() clearFilterText?: string;
 	@Prop() clickedClear?: () => void;
 	@Prop() clickedSubmit?: () => void;
+	@Prop() modalBackdropCssClass: string;
 	@Prop() mobileModalCssClass?: string;
 	@Prop() mobileShowClearFilters?: boolean;
 	@Prop() mobileFirstLineText: string;
@@ -70,7 +72,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 											<div class="mohf-input-first-line-text">{this.mobileFirstLineText || (`${PowerduckState.getResourceValue('search')}...`)}</div>
 
 											{this.mobileSecondLineText?.length > 0
-											&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
+												&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
 
 										</div>
 									</FlexFormItem>
@@ -87,7 +89,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 					{this.$slots.default?.()}
 				</div>
 
-				<Modal title={this.caption} ref="mobileModal" size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
+				<Modal title={this.caption} ref="mobileModal" backdropCssClass={this.modalBackdropCssClass} size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
 					<ModalBody>
 						<div class="mohf-modal-body-wrap">
 							{this.$slots.default?.()}
@@ -95,16 +97,16 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 					</ModalBody>
 					<ModalFooter>
 						{this.mobileShowClearFilters
-						&& (
-							<Button
-								layout={ButtonLayout.Secondary}
-								text={this.clearFilterText}
-								fullWidth={true}
-								clicked={() => {
-									this.clickedClear();
-								}}
-							/>
-						)}
+							&& (
+								<Button
+									layout={ButtonLayout.Secondary}
+									text={this.clearFilterText}
+									fullWidth={true}
+									clicked={() => {
+										this.clickedClear();
+									}}
+								/>
+							)}
 						<Button
 							layout={ButtonLayout.Primary}
 							text={PowerduckState.getResourceValue('search')}

package/components/modal/modal.tsx

@@ -1,5 +1,6 @@
 import type { VNode } from 'vue';
 import type { ModalOnBeforeShownArgs, ModalOnShownArgs } from './modal-utils';
+import { isNullOrEmpty } from '@powerduck/common/utils/is-null-or-empty';
 import { Modal as BootstrapModal } from 'bootstrap';
 import { Prop, toNative } from 'vue-facing-decorator';
 import { globalState } from '../../app/global-state';
@@ -16,6 +17,7 @@ import './css/modal.css';
 
 interface ModalArgs {
 	title: string;
+	backdropCssClass?: string;
 	size?: ModalSize;
 	icon?: ModalHeaderIcon;
 	blocked?: boolean;
@@ -67,6 +69,7 @@ export class ModalConfig {
 @Component
 class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 	@Prop() title!: string;
+	@Prop() backdropCssClass!: string;
 	@Prop() size!: ModalSize;
 	@Prop() icon!: ModalHeaderIcon;
 	@Prop() blocked!: boolean;
@@ -122,10 +125,7 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 			return;
 		}
 
-		ModalUtils.bindModalBottomSheetHandle(
-			() => this.$refs.modalRoot as HTMLElement,
-			() => this.hide()
-		)
+		ModalUtils.bindModalBottomSheetHandle(() => this.$refs.modalRoot as HTMLElement, () => this.hide());
 	}
 
 	treatMobileAsBottomSheet(): boolean {
@@ -150,6 +150,13 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 		args = args || {};
 		this.modalShown = true;
 		this.$nextTick(() => {
+			if (!isNullOrEmpty(this.backdropCssClass)) {
+				const instance: any = this.getModalInstance();
+				if (instance._backdrop?._config) {
+					instance._backdrop._config.className = `modal-backdrop ${this.backdropCssClass}`;
+				}
+			}
+
 			ModalUtils.showModal(this, {
 				modal: this.getModalInstance(),
 				onShown: args.onShown,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.191",
+	"version": "0.0.193",
 	"files": [
 		"app/",
 		"common/",