From e09ed68345bb9e047f570dc5563d02dbe16a2e2f Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Tue, 26 Nov 2024 13:04:20 +0200 Subject: [PATCH 1/7] feat: pinnable side panel --- .../stories/modal/side-panel.stories.ts | 15 ++++++ .../angular/src/modal/_modal.clarity.scss | 31 +++++++++++- projects/angular/src/modal/modal.html | 9 ++++ projects/angular/src/modal/modal.ts | 48 +++++++++++++++++-- projects/angular/src/modal/side-panel.ts | 33 ++++++++++++- .../src/utils/i18n/common-strings.default.ts | 1 + .../utils/i18n/common-strings.interface.ts | 5 ++ 7 files changed, 136 insertions(+), 6 deletions(-) diff --git a/.storybook/stories/modal/side-panel.stories.ts b/.storybook/stories/modal/side-panel.stories.ts index 094a1e6579..0aaf15d6a3 100644 --- a/.storybook/stories/modal/side-panel.stories.ts +++ b/.storybook/stories/modal/side-panel.stories.ts @@ -38,6 +38,7 @@ export default { clrSidePanelCloseButtonAriaLabel: commonStringsDefault.close, clrSidePanelLabelledById: '', clrSidePanelSize: 'md', + clrSidePanelPinnable: false, clrSidePanelSkipAnimation: false, // outputs clrSidePanelOpenChange: action('clrSidePanelOpenChange'), @@ -56,6 +57,7 @@ const SidePanelTemplate: StoryFn = args => ({
+ diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts index ebc5628875..ee42b049e4 100644 --- a/projects/angular/src/modal/modal.ts +++ b/projects/angular/src/modal/modal.ts @@ -68,15 +68,19 @@ export class ClrModal implements OnChanges, OnDestroy { @Input('clrModalCloseButtonAriaLabel') closeButtonAriaLabel = this.commonStrings.keys.close; @Input('clrModalSize') size: string; @Input('clrModalStaticBackdrop') staticBackdrop = true; - @Input('clrModalSkipAnimation') skipAnimation = 'false'; + @Input('clrModalSkipAnimation') skipAnimation = false; @Input('clrModalPreventClose') stopClose = false; @Output('clrModalAlternateClose') altClose = new EventEmitter(false); @Input('clrModalLabelledById') labelledBy: string; + // For now we only want to expose this as input on the side panel + pinnable = false; + // presently this is only used by inline wizards @Input('clrModalOverrideScrollService') bypassScrollService = false; + private _pinned = false; constructor( private _scrollingService: ScrollingService, @@ -85,6 +89,21 @@ export class ClrModal implements OnChanges, OnDestroy { private configuration: ClrModalConfigurationService ) {} + get pinned(): boolean { + return this._pinned; + } + + set pinned(pinned: boolean) { + if (this.pinnable) { + this._pinned = pinned; + if (pinned) { + this.displaySideBySide(); + } else { + this.displayOverlapping(); + } + } + } + get fadeMove(): string { return this.skipAnimation ? '' : this.configuration.fadeMove; } @@ -100,16 +119,23 @@ export class ClrModal implements OnChanges, OnDestroy { ngOnChanges(changes: { [propName: string]: SimpleChange }): void { if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) { if (changes._open.currentValue) { - this.backdrop && this._scrollingService.stopScrolling(); + !this.pinnable && this._scrollingService.stopScrolling(); this.modalStackService.trackModalOpen(this); + if (this.pinned) { + this.displaySideBySide(); + } } else { this._scrollingService.resumeScrolling(); + if (this.pinned) { + this.displayOverlapping(); + } } } } ngOnDestroy(): void { this._scrollingService.resumeScrolling(); + this.displayOverlapping(); } open(): void { @@ -131,7 +157,7 @@ export class ClrModal implements OnChanges, OnDestroy { } close(): void { - if (this.stopClose) { + if (this.stopClose || (this.pinnable && this.pinned)) { this.altClose.emit(false); return; } @@ -141,6 +167,10 @@ export class ClrModal implements OnChanges, OnDestroy { this._open = false; } + togglePinned() { + this.pinned = !this.pinned; + } + fadeDone(e: AnimationEvent) { if (e.toState === 'void') { // TODO: Investigate if we can decouple from animation events @@ -148,4 +178,16 @@ export class ClrModal implements OnChanges, OnDestroy { this.modalStackService.trackModalClose(this); } } + + private displaySideBySide() { + document.body.classList.add('clr-side-panel-pinned-' + this.size); + } + + private displayOverlapping() { + document.body.classList.forEach(clazz => { + if (clazz.startsWith('clr-side-panel-pinned-')) { + document.body.classList.remove(clazz); + } + }); + } } diff --git a/projects/angular/src/modal/side-panel.ts b/projects/angular/src/modal/side-panel.ts index f890b7817b..c6acc4848c 100644 --- a/projects/angular/src/modal/side-panel.ts +++ b/projects/angular/src/modal/side-panel.ts @@ -5,7 +5,17 @@ * The full license information can be found in LICENSE in the root directory of this project. */ -import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { + AfterViewInit, + Component, + ElementRef, + EventEmitter, + HostListener, + Input, + OnInit, + Output, + ViewChild, +} from '@angular/core'; import { ClrModal } from './modal'; import { ClrModalConfigurationService } from './modal-configuration.service'; @@ -17,7 +27,7 @@ import { ClrModalConfigurationService } from './modal-configuration.service'; '[class.side-panel]': 'true', }, }) -export class ClrSidePanel implements OnInit { +export class ClrSidePanel implements OnInit, AfterViewInit { @Input('clrSidePanelOpen') _open = false; @Output('clrSidePanelOpenChange') openChange = new EventEmitter(false); @Input('clrSidePanelCloseButtonAriaLabel') closeButtonAriaLabel: string | undefined; @@ -30,22 +40,41 @@ export class ClrSidePanel implements OnInit { @ViewChild(ClrModal) private modal: ClrModal; + private _pinnable = false; + constructor(private element: ElementRef, private configuration: ClrModalConfigurationService) {} @Input() get clrSidePanelBackdrop(): boolean { return this.configuration.backdrop; } + set clrSidePanelBackdrop(backdrop: boolean) { if (backdrop !== undefined) { this.configuration.backdrop = backdrop; } } + @Input() + get clrSidePanelPinnable(): boolean { + return this._pinnable; + } + + set clrSidePanelPinnable(pinnable: boolean) { + this._pinnable = pinnable; + if (this.modal) { + this.modal.pinnable = pinnable; + } + } + ngOnInit(): void { this.configuration.fadeMove = 'fadeLeft'; } + ngAfterViewInit() { + this.modal.pinnable = this._pinnable; + } + open() { this.modal.open(); } diff --git a/projects/angular/src/utils/i18n/common-strings.default.ts b/projects/angular/src/utils/i18n/common-strings.default.ts index 684c6a5539..0933aef4e8 100644 --- a/projects/angular/src/utils/i18n/common-strings.default.ts +++ b/projects/angular/src/utils/i18n/common-strings.default.ts @@ -41,6 +41,7 @@ export const commonStringsDefault: ClrCommonStrings = { maxValue: 'Max value', modalContentStart: 'Beginning of Modal Content', modalContentEnd: 'End of Modal Content', + sidePanelPin: 'Pin Side Panel', showColumnsMenuDescription: 'Show or hide columns menu', allColumnsSelected: 'All columns selected', signpostToggle: 'Signpost Toggle', diff --git a/projects/angular/src/utils/i18n/common-strings.interface.ts b/projects/angular/src/utils/i18n/common-strings.interface.ts index e324dba373..df13e2e7f5 100644 --- a/projects/angular/src/utils/i18n/common-strings.interface.ts +++ b/projects/angular/src/utils/i18n/common-strings.interface.ts @@ -163,6 +163,11 @@ export interface ClrCommonStrings { */ modalContentEnd: string; + /** + * Side Panel pin dialog + */ + sidePanelPin: string; + /** * Datagrid Show columns menu description */ From c08f8264f261d2886438d1f8aa0887da885cb55c Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Tue, 26 Nov 2024 13:04:20 +0200 Subject: [PATCH 2/7] feat: inline sidebars --- .../modal/nested-side-panel.stories.ts | 204 ++++++++++++++++++ .../angular/src/modal/_modal.clarity.scss | 30 +-- projects/angular/src/modal/modal.ts | 13 +- 3 files changed, 231 insertions(+), 16 deletions(-) create mode 100644 .storybook/stories/modal/nested-side-panel.stories.ts diff --git a/.storybook/stories/modal/nested-side-panel.stories.ts b/.storybook/stories/modal/nested-side-panel.stories.ts new file mode 100644 index 0000000000..5cc98508c3 --- /dev/null +++ b/.storybook/stories/modal/nested-side-panel.stories.ts @@ -0,0 +1,204 @@ +/* + * Copyright (c) 2016-2024 Broadcom. All Rights Reserved. + * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. + * This software is released under MIT license. + * The full license information can be found in LICENSE in the root directory of this project. + */ + +import { ClrSidePanel, ClrSidePanelModule, commonStringsDefault } from '@clr/angular'; +import { action } from '@storybook/addon-actions'; +import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular'; + +import { CommonModules, removeFocusOutline } from '../../helpers/common'; + +export default { + title: 'Modal/Nested Side Panel', + decorators: [ + moduleMetadata({ + imports: [...CommonModules, ClrSidePanelModule], + }), + ], + component: ClrSidePanel, + argTypes: { + // inputs + clrSidePanelSize: { + options: ['sm', 'md', 'lg', 'xl', 'full-screen'], + control: 'radio', + }, + // outputs + clrSidePanelOpenChange: { control: { disable: true } }, + clrSidePanelAltClose: { control: { disable: true } }, + // methods + fadeDone: { control: { disable: true }, table: { disable: true } }, + open: { control: { disable: true }, table: { disable: true } }, + close: { control: { disable: true }, table: { disable: true } }, + }, + args: { + // inputs + clrSidePanelCloseButtonAriaLabel: commonStringsDefault.close, + clrSidePanelLabelledById: '', + clrSidePanelSize: 'md', + clrSidePanelPinnable: false, + clrSidePanelSkipAnimation: false, + // outputs + clrSidePanelOpenChange: action('clrSidePanelOpenChange'), + clrSidePanelAltClose: action('clrSidePanelAltClose'), + // story helpers + title: 'Side Panel Title', + body: 'Hello World!', + }, +}; + +const NestedSidePanelTemplate: StoryFn = args => ({ + template: ` +
+
+
+
+ + +

{{ title }}

+
+ {{ body }} +
+
+ + +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. + Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque + sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean sagittis nibh + lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum + vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere ipsum tincidunt + velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus + finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam. +
+
+
+
+
+ `, + props: args, +}); + +export const SidePanel: StoryObj = { + render: NestedSidePanelTemplate, +}; + +export const SidePanelSmall: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'sm', + clrSidePanelStaticBackdrop: true, + title: 'Small Side Panel', + body: 'This is a small side panel.', + }, +}; + +export const SidePanelMedium: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'md', + clrSidePanelStaticBackdrop: true, + title: 'Medium Side Panel', + body: 'This is a medium side panel.', + }, +}; + +export const SidePanelLarge: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'lg', + clrSidePanelStaticBackdrop: true, + title: 'Large Side Panel', + body: 'This is a large side panel.', + }, +}; + +export const SidePanelExtraLarge: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'xl', + clrSidePanelStaticBackdrop: true, + title: 'Extra-Large Side Panel', + body: 'This is a extra-large side panel.', + }, +}; + +export const SidePanelWithoutBackdrop: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'md', + clrSidePanelBackdrop: false, + title: 'Side Panel without backdrop', + body: 'This is a medium side panel without backdrop.', + }, +}; + +export const SidePanelAlternateClose: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'md', + clrSidePanelPreventClose: true, + clrSidePanelAltClose: function () { + if (confirm('Do you really want to close the side panel?')) { + this.clrSidePanelOpen = false; + } + }, + title: 'Side Panel with alternate close', + body: 'This is a medium side panel without backdrop.', + }, +}; + +export const SidePanelPinnable: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrsidePanelSize: 'md', + clrSidePanelBackdrop: false, + clrSidePanelPinnable: true, + title: 'Pinnable Side Panel', + body: 'This is a medium pinnable side panel without backdrop.', + }, +}; + +export const SidePanelFullScreen: StoryObj = { + render: NestedSidePanelTemplate, + play: removeFocusOutline, + args: { + clrSidePanelOpen: true, + clrSidePanelSize: 'full-screen', + clrSidePanelStaticBackdrop: true, + title: 'Full-Screen Side Panel', + body: 'This is a full-screen side panel.', + showLongPageContent: false, + }, +}; diff --git a/projects/angular/src/modal/_modal.clarity.scss b/projects/angular/src/modal/_modal.clarity.scss index 6d85bfc8b3..ba72ad58c0 100644 --- a/projects/angular/src/modal/_modal.clarity.scss +++ b/projects/angular/src/modal/_modal.clarity.scss @@ -14,21 +14,27 @@ @include meta.load-css('properties.modal'); @include mixins.exports('modal.clarity') { - body { - &.clr-side-panel-pinned-sm { - margin-right: modal-variables.$clr-modal-sm-width !important; - } + .clr-side-panel-pinned-sm { + padding-right: modal-variables.$clr-modal-sm-width !important; + } - &.clr-side-panel-pinned-md { - margin-right: modal-variables.$clr-modal-md-width !important; - } + .clr-side-panel-pinned-md { + padding-right: modal-variables.$clr-modal-md-width !important; + } - &.clr-side-panel-pinned-lg { - margin-right: modal-variables.$clr-modal-lg-width !important; - } + .clr-side-panel-pinned-lg { + padding-right: modal-variables.$clr-modal-lg-width !important; + } + + .clr-side-panel-pinned-xl { + padding-right: modal-variables.$clr-modal-xl-width !important; + } - &.clr-side-panel-pinned-xl { - margin-right: modal-variables.$clr-modal-xl-width !important; + .modal-host { + border: 1px dashed hotpink; + overflow: hidden; + .modal { + position: absolute; } } diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts index ee42b049e4..35d8f244b5 100644 --- a/projects/angular/src/modal/modal.ts +++ b/projects/angular/src/modal/modal.ts @@ -86,7 +86,8 @@ export class ClrModal implements OnChanges, OnDestroy { private _scrollingService: ScrollingService, public commonStrings: ClrCommonStringsService, private modalStackService: ModalStackService, - private configuration: ClrModalConfigurationService + private configuration: ClrModalConfigurationService, + private elementRef: ElementRef ) {} get pinned(): boolean { @@ -115,6 +116,10 @@ export class ClrModal implements OnChanges, OnDestroy { return this.configuration.backdrop; } + private get hostElement(): HTMLElement { + return (this.elementRef.nativeElement as HTMLElement).closest('.modal-host') || document.body; + } + // Detect when _open is set to true and set no-scrolling to true ngOnChanges(changes: { [propName: string]: SimpleChange }): void { if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) { @@ -180,13 +185,13 @@ export class ClrModal implements OnChanges, OnDestroy { } private displaySideBySide() { - document.body.classList.add('clr-side-panel-pinned-' + this.size); + this.hostElement.classList.add('clr-side-panel-pinned-' + this.size); } private displayOverlapping() { - document.body.classList.forEach(clazz => { + this.hostElement.classList.forEach(clazz => { if (clazz.startsWith('clr-side-panel-pinned-')) { - document.body.classList.remove(clazz); + this.hostElement.classList.remove(clazz); } }); } From f63a2ea866b8c4e6db86f8cedddeeebbfb708b7b Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Tue, 26 Nov 2024 13:04:20 +0200 Subject: [PATCH 3/7] feat: inline directive --- ...tories.ts => side-panel-inline.stories.ts} | 24 +++++++++---------- .../angular/src/modal/_modal.clarity.scss | 9 +++---- .../angular/src/modal/modal-host.directive.ts | 14 +++++++++++ projects/angular/src/modal/modal.html | 4 ++-- projects/angular/src/modal/modal.module.ts | 3 ++- projects/angular/src/modal/modal.ts | 2 +- .../angular/src/modal/side-panel.module.ts | 2 +- 7 files changed, 37 insertions(+), 21 deletions(-) rename .storybook/stories/modal/{nested-side-panel.stories.ts => side-panel-inline.stories.ts} (92%) create mode 100644 projects/angular/src/modal/modal-host.directive.ts diff --git a/.storybook/stories/modal/nested-side-panel.stories.ts b/.storybook/stories/modal/side-panel-inline.stories.ts similarity index 92% rename from .storybook/stories/modal/nested-side-panel.stories.ts rename to .storybook/stories/modal/side-panel-inline.stories.ts index 5cc98508c3..9fc6f30c53 100644 --- a/.storybook/stories/modal/nested-side-panel.stories.ts +++ b/.storybook/stories/modal/side-panel-inline.stories.ts @@ -12,7 +12,7 @@ import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular'; import { CommonModules, removeFocusOutline } from '../../helpers/common'; export default { - title: 'Modal/Nested Side Panel', + title: 'Modal/Side Panel (inline)', decorators: [ moduleMetadata({ imports: [...CommonModules, ClrSidePanelModule], @@ -49,12 +49,12 @@ export default { }, }; -const NestedSidePanelTemplate: StoryFn = args => ({ +const InlineSidePanelTemplate: StoryFn = args => ({ template: `
-
+
({ }); export const SidePanel: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, }; export const SidePanelSmall: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -113,7 +113,7 @@ export const SidePanelSmall: StoryObj = { }; export const SidePanelMedium: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -125,7 +125,7 @@ export const SidePanelMedium: StoryObj = { }; export const SidePanelLarge: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -137,7 +137,7 @@ export const SidePanelLarge: StoryObj = { }; export const SidePanelExtraLarge: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -149,7 +149,7 @@ export const SidePanelExtraLarge: StoryObj = { }; export const SidePanelWithoutBackdrop: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -161,7 +161,7 @@ export const SidePanelWithoutBackdrop: StoryObj = { }; export const SidePanelAlternateClose: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -178,7 +178,7 @@ export const SidePanelAlternateClose: StoryObj = { }; export const SidePanelPinnable: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, @@ -191,7 +191,7 @@ export const SidePanelPinnable: StoryObj = { }; export const SidePanelFullScreen: StoryObj = { - render: NestedSidePanelTemplate, + render: InlineSidePanelTemplate, play: removeFocusOutline, args: { clrSidePanelOpen: true, diff --git a/projects/angular/src/modal/_modal.clarity.scss b/projects/angular/src/modal/_modal.clarity.scss index ba72ad58c0..8eb9ce78dc 100644 --- a/projects/angular/src/modal/_modal.clarity.scss +++ b/projects/angular/src/modal/_modal.clarity.scss @@ -1,6 +1,6 @@ /* * Copyright (c) 2016-2024 Broadcom. All Rights Reserved. - * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. + * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -30,10 +30,11 @@ padding-right: modal-variables.$clr-modal-xl-width !important; } - .modal-host { - border: 1px dashed hotpink; + .clr-modal-host { overflow: hidden; - .modal { + position: relative; + .modal, + .modal-backdrop { position: absolute; } } diff --git a/projects/angular/src/modal/modal-host.directive.ts b/projects/angular/src/modal/modal-host.directive.ts new file mode 100644 index 0000000000..5828aa52b4 --- /dev/null +++ b/projects/angular/src/modal/modal-host.directive.ts @@ -0,0 +1,14 @@ +/* + * Copyright (c) 2016-2024 Broadcom. All Rights Reserved. + * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. + * This software is released under MIT license. + * The full license information can be found in LICENSE in the root directory of this project. + */ + +import { Directive } from '@angular/core'; + +@Directive({ + selector: '[clrModalHost]', + host: { '[class.clr-modal-host]': 'true' }, +}) +export class ClrModalHostDirective {} diff --git a/projects/angular/src/modal/modal.html b/projects/angular/src/modal/modal.html index 9726f4aec3..cdb637287e 100644 --- a/projects/angular/src/modal/modal.html +++ b/projects/angular/src/modal/modal.html @@ -58,6 +58,6 @@
{{commonStrings.keys.modalContentEnd}}
- -
+ + diff --git a/projects/angular/src/modal/modal.module.ts b/projects/angular/src/modal/modal.module.ts index 0746ecb2f8..6bb336aa0f 100644 --- a/projects/angular/src/modal/modal.module.ts +++ b/projects/angular/src/modal/modal.module.ts @@ -13,8 +13,9 @@ import { ClrIconModule } from '../icon/icon.module'; import { CdkTrapFocusModule } from '../utils/cdk/cdk-trap-focus.module'; import { ClrModal } from './modal'; import { ClrModalBody } from './modal-body'; +import { ClrModalHostDirective } from './modal-host.directive'; -export const CLR_MODAL_DIRECTIVES: Type[] = [ClrModal, ClrModalBody]; +export const CLR_MODAL_DIRECTIVES: Type[] = [ClrModal, ClrModalBody, ClrModalHostDirective]; @NgModule({ imports: [CommonModule, CdkTrapFocusModule, ClrIconModule], diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts index 35d8f244b5..9c44d646b1 100644 --- a/projects/angular/src/modal/modal.ts +++ b/projects/angular/src/modal/modal.ts @@ -117,7 +117,7 @@ export class ClrModal implements OnChanges, OnDestroy { } private get hostElement(): HTMLElement { - return (this.elementRef.nativeElement as HTMLElement).closest('.modal-host') || document.body; + return (this.elementRef.nativeElement as HTMLElement).closest('.clr-modal-host') || document.body; } // Detect when _open is set to true and set no-scrolling to true diff --git a/projects/angular/src/modal/side-panel.module.ts b/projects/angular/src/modal/side-panel.module.ts index 7faab702de..689b8aca3d 100644 --- a/projects/angular/src/modal/side-panel.module.ts +++ b/projects/angular/src/modal/side-panel.module.ts @@ -18,6 +18,6 @@ export const CLR_SIDEPANEL_DIRECTIVES: Type[] = [ClrSidePanel]; @NgModule({ imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrModalModule], declarations: [CLR_SIDEPANEL_DIRECTIVES], - exports: [CLR_SIDEPANEL_DIRECTIVES, ClrIconModule], + exports: [CLR_SIDEPANEL_DIRECTIVES, ClrModalModule, ClrIconModule], }) export class ClrSidePanelModule {} From 90483e883b1071bb40296dbdfb4845adef538954 Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Tue, 26 Nov 2024 13:06:45 +0200 Subject: [PATCH 4/7] fix: build and lint fixes --- projects/angular/clarity.api.md | 82 +++++++++++++++--------- projects/angular/src/modal/index.ts | 1 + projects/angular/src/modal/side-panel.ts | 2 +- projects/angular/src/wizard/wizard.ts | 4 +- 4 files changed, 56 insertions(+), 33 deletions(-) diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md index b31353cfa7..756d9d101f 100644 --- a/projects/angular/clarity.api.md +++ b/projects/angular/clarity.api.md @@ -281,14 +281,14 @@ export class ClrAccordionModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_49" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_36" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_28" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_29" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_19" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_15" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i6_10" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i7_9" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -1017,6 +1017,7 @@ export interface ClrCommonStrings { show: string; showColumns: string; showColumnsMenuDescription: string; + sidePanelPin: string; signpostClose: string; signpostToggle: string; singleActionableAriaLabel: string; @@ -2696,11 +2697,11 @@ export class ClrLayoutModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_37" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_27" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_20" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_21" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_15" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -2811,7 +2812,7 @@ export class ClrMainContainerModule { export class ClrModal implements OnChanges, OnDestroy { // Warning: (ae-forgotten-export) The symbol "ScrollingService" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "ModalStackService" needs to be exported by the entry point index.d.ts - constructor(_scrollingService: ScrollingService, commonStrings: ClrCommonStringsService, modalStackService: ModalStackService, configuration: ClrModalConfigurationService); + constructor(_scrollingService: ScrollingService, commonStrings: ClrCommonStringsService, modalStackService: ModalStackService, configuration: ClrModalConfigurationService, elementRef: ElementRef); // (undocumented) altClose: EventEmitter; // (undocumented) @@ -2850,9 +2851,14 @@ export class ClrModal implements OnChanges, OnDestroy { // (undocumented) _openChanged: EventEmitter; // (undocumented) + pinnable: boolean; + // (undocumented) + get pinned(): boolean; + set pinned(pinned: boolean); + // (undocumented) size: string; // (undocumented) - skipAnimation: string; + skipAnimation: boolean; // (undocumented) staticBackdrop: boolean; // (undocumented) @@ -2860,6 +2866,8 @@ export class ClrModal implements OnChanges, OnDestroy { // (undocumented) title: ElementRef; // (undocumented) + togglePinned(): void; + // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; @@ -2888,6 +2896,14 @@ export class ClrModalConfigurationService { static ɵprov: i0.ɵɵInjectableDeclaration; } +// @public (undocumented) +export class ClrModalHostDirective { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + // @public (undocumented) export class ClrModalModule { constructor(); @@ -2897,9 +2913,10 @@ export class ClrModalModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_32" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_24" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_19" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -2925,12 +2942,12 @@ export class ClrNavigationModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_39" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_28" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_19" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_20" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_13" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_10" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -3221,10 +3238,10 @@ export class ClrPopoverModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i2_31" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_24" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_25" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public @@ -3560,7 +3577,7 @@ export enum ClrSide { } // @public (undocumented) -export class ClrSidePanel implements OnInit { +export class ClrSidePanel implements OnInit, AfterViewInit { constructor(element: ElementRef, configuration: ClrModalConfigurationService); // (undocumented) altClose: EventEmitter; @@ -3572,8 +3589,13 @@ export class ClrSidePanel implements OnInit { get clrSidePanelBackdrop(): boolean; set clrSidePanelBackdrop(backdrop: boolean); // (undocumented) + get clrSidePanelPinnable(): boolean; + set clrSidePanelPinnable(pinnable: boolean); + // (undocumented) labelledById: string; // (undocumented) + ngAfterViewInit(): void; + // (undocumented) ngOnInit(): void; // (undocumented) open(): void; @@ -3586,11 +3608,11 @@ export class ClrSidePanel implements OnInit { // (undocumented) size: string; // (undocumented) - skipAnimation: string; + skipAnimation: boolean; // (undocumented) staticBackdrop: boolean; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -3604,7 +3626,7 @@ export class ClrSidePanelModule { // Warning: (ae-forgotten-export) The symbol "i1_47" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -3649,10 +3671,10 @@ export class ClrSignpostModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_44" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_32" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_23" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_24" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -3902,13 +3924,13 @@ export class ClrStepperModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_48" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_35" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_27" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_28" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_18" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_14" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i8_9" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4133,7 +4155,7 @@ export class ClrTabsModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_41" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_29" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_21" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_22" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_14" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_11" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i6_8" needs to be exported by the entry point index.d.ts @@ -4143,7 +4165,7 @@ export class ClrTabsModule { // Warning: (ae-forgotten-export) The symbol "i13_3" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4208,12 +4230,12 @@ export class ClrTimelineModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_51" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_37" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_29" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_30" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_20" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_16" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4318,10 +4340,10 @@ export class ClrTooltipModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_45" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_33" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_25" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_26" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4560,12 +4582,12 @@ export class ClrVerticalNavModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_43" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_30" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_22" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_23" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_16" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_12" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4639,7 +4661,7 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck { get stopCancel(): boolean; set stopCancel(value: boolean); // (undocumented) - get stopModalAnimations(): string; + get stopModalAnimations(): boolean; _stopModalAnimations: boolean; get stopNavigation(): boolean; set stopNavigation(value: boolean); @@ -4727,7 +4749,7 @@ export class ClrWizardModule { static ɵinj: i0.ɵɵInjectorDeclaration; // Warning: (ae-forgotten-export) The symbol "i1_46" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i2_34" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_26" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_27" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i4_17" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i5_13" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i6_9" needs to be exported by the entry point index.d.ts @@ -4738,7 +4760,7 @@ export class ClrWizardModule { // Warning: (ae-forgotten-export) The symbol "i11_4" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public diff --git a/projects/angular/src/modal/index.ts b/projects/angular/src/modal/index.ts index 8f8c816d4a..de16cfd4fc 100644 --- a/projects/angular/src/modal/index.ts +++ b/projects/angular/src/modal/index.ts @@ -8,6 +8,7 @@ export * from './modal'; export * from './modal.module'; export * from './modal-configuration.service'; +export * from './modal-host.directive'; export * from './side-panel.module'; export * from './modal-body'; export * from './side-panel'; diff --git a/projects/angular/src/modal/side-panel.ts b/projects/angular/src/modal/side-panel.ts index c6acc4848c..8a32b9fea6 100644 --- a/projects/angular/src/modal/side-panel.ts +++ b/projects/angular/src/modal/side-panel.ts @@ -32,7 +32,7 @@ export class ClrSidePanel implements OnInit, AfterViewInit { @Output('clrSidePanelOpenChange') openChange = new EventEmitter(false); @Input('clrSidePanelCloseButtonAriaLabel') closeButtonAriaLabel: string | undefined; @Input('clrSidePanelSize') size: string; - @Input('clrSidePanelSkipAnimation') skipAnimation = 'false'; + @Input('clrSidePanelSkipAnimation') skipAnimation = false; @Input('clrSidePanelLabelledById') labelledById: string; @Input('clrSidePanelStaticBackdrop') staticBackdrop = false; @Input('clrSidePanelPreventClose') preventClose = false; diff --git a/projects/angular/src/wizard/wizard.ts b/projects/angular/src/wizard/wizard.ts index 69eb4a8981..6fe65fff46 100644 --- a/projects/angular/src/wizard/wizard.ts +++ b/projects/angular/src/wizard/wizard.ts @@ -263,8 +263,8 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck { return this.elementRef.nativeElement.classList.contains('clr-wizard--inline'); } - get stopModalAnimations(): string { - return this._stopModalAnimations ? 'true' : 'false'; + get stopModalAnimations(): boolean { + return this._stopModalAnimations; } ngAfterContentInit(): void { From 8618e4f4e3aae73d0ba7fde78628aadd2f1fef86 Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Mon, 2 Dec 2024 15:27:44 +0200 Subject: [PATCH 5/7] fix: review updates --- projects/angular/src/modal/_modal.clarity.scss | 2 +- projects/angular/src/modal/modal.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/angular/src/modal/_modal.clarity.scss b/projects/angular/src/modal/_modal.clarity.scss index 8eb9ce78dc..b4b992e905 100644 --- a/projects/angular/src/modal/_modal.clarity.scss +++ b/projects/angular/src/modal/_modal.clarity.scss @@ -1,6 +1,6 @@ /* * Copyright (c) 2016-2024 Broadcom. All Rights Reserved. - * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. + * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts index 9c44d646b1..0475e3bd0a 100644 --- a/projects/angular/src/modal/modal.ts +++ b/projects/angular/src/modal/modal.ts @@ -126,12 +126,12 @@ export class ClrModal implements OnChanges, OnDestroy { if (changes._open.currentValue) { !this.pinnable && this._scrollingService.stopScrolling(); this.modalStackService.trackModalOpen(this); - if (this.pinned) { + if (this.pinnable && this.pinned) { this.displaySideBySide(); } } else { this._scrollingService.resumeScrolling(); - if (this.pinned) { + if (this.pinnable && this.pinned) { this.displayOverlapping(); } } @@ -189,9 +189,9 @@ export class ClrModal implements OnChanges, OnDestroy { } private displayOverlapping() { - this.hostElement.classList.forEach(clazz => { - if (clazz.startsWith('clr-side-panel-pinned-')) { - this.hostElement.classList.remove(clazz); + this.hostElement.classList.forEach(className => { + if (className.startsWith('clr-side-panel-pinned-')) { + this.hostElement.classList.remove(className); } }); } From 5f0d5ef78115faaea9c67c918930d9f17a6bb37d Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Mon, 2 Dec 2024 18:08:09 +0200 Subject: [PATCH 6/7] fix: update side-by-side on pane size change --- .../modal/side-panel-inline.stories.ts | 2 +- .../stories/modal/side-panel.stories.ts | 2 +- projects/angular/src/modal/modal.ts | 19 ++++++++++++++++++- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/.storybook/stories/modal/side-panel-inline.stories.ts b/.storybook/stories/modal/side-panel-inline.stories.ts index 9fc6f30c53..1ddf2e0ea2 100644 --- a/.storybook/stories/modal/side-panel-inline.stories.ts +++ b/.storybook/stories/modal/side-panel-inline.stories.ts @@ -182,7 +182,7 @@ export const SidePanelPinnable: StoryObj = { play: removeFocusOutline, args: { clrSidePanelOpen: true, - clrsidePanelSize: 'md', + clrSidePanelSize: 'md', clrSidePanelBackdrop: false, clrSidePanelPinnable: true, title: 'Pinnable Side Panel', diff --git a/.storybook/stories/modal/side-panel.stories.ts b/.storybook/stories/modal/side-panel.stories.ts index 0aaf15d6a3..c3f88f621e 100644 --- a/.storybook/stories/modal/side-panel.stories.ts +++ b/.storybook/stories/modal/side-panel.stories.ts @@ -180,7 +180,7 @@ export const SidePanelPinnable: StoryObj = { play: removeFocusOutline, args: { clrSidePanelOpen: true, - clrsidePanelSize: 'md', + clrSidePanelSize: 'md', clrSidePanelBackdrop: false, clrSidePanelPinnable: true, title: 'Pinnable Side Panel', diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts index 0475e3bd0a..c06019496d 100644 --- a/projects/angular/src/modal/modal.ts +++ b/projects/angular/src/modal/modal.ts @@ -66,7 +66,7 @@ export class ClrModal implements OnChanges, OnDestroy { @Input('clrModalClosable') closable = true; @Input('clrModalCloseButtonAriaLabel') closeButtonAriaLabel = this.commonStrings.keys.close; - @Input('clrModalSize') size: string; + @Input('clrModalStaticBackdrop') staticBackdrop = true; @Input('clrModalSkipAnimation') skipAnimation = false; @@ -82,6 +82,8 @@ export class ClrModal implements OnChanges, OnDestroy { @Input('clrModalOverrideScrollService') bypassScrollService = false; private _pinned = false; + private _size: string; + constructor( private _scrollingService: ScrollingService, public commonStrings: ClrCommonStringsService, @@ -90,6 +92,21 @@ export class ClrModal implements OnChanges, OnDestroy { private elementRef: ElementRef ) {} + @Input('clrModalSize') + get size(): string { + return this._size; + } + + set size(value: string) { + if (this._size !== value) { + this._size = value; + if (this.pinnable && this.pinned) { + this.displayOverlapping(); + this.displaySideBySide(); + } + } + } + get pinned(): boolean { return this._pinned; } From ab8cdefdd9d0d7ab5f961be8c28af8e52625da73 Mon Sep 17 00:00:00 2001 From: Ivan Donchev Date: Tue, 3 Dec 2024 09:37:12 +0200 Subject: [PATCH 7/7] fix: api-check --- projects/angular/clarity.api.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md index 756d9d101f..937a1300e8 100644 --- a/projects/angular/clarity.api.md +++ b/projects/angular/clarity.api.md @@ -2856,7 +2856,8 @@ export class ClrModal implements OnChanges, OnDestroy { get pinned(): boolean; set pinned(pinned: boolean); // (undocumented) - size: string; + get size(): string; + set size(value: string); // (undocumented) skipAnimation: boolean; // (undocumented) @@ -2868,7 +2869,7 @@ export class ClrModal implements OnChanges, OnDestroy { // (undocumented) togglePinned(): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }