@skyux/flyout 7.5.0 → 7.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +22 -22
- package/esm2020/lib/modules/flyout/flyout-instance.mjs +1 -1
- package/esm2020/lib/modules/flyout/flyout-media-query.service.mjs +5 -5
- package/esm2020/lib/modules/flyout/flyout.component.mjs +7 -7
- package/esm2020/lib/modules/flyout/flyout.service.mjs +5 -5
- package/esm2020/lib/modules/flyout/types/flyout-action.mjs +1 -1
- package/esm2020/lib/modules/flyout/types/flyout-close-args.mjs +1 -1
- package/esm2020/lib/modules/flyout/types/flyout-config-internal.mjs +1 -1
- package/esm2020/lib/modules/flyout/types/flyout-config.mjs +1 -1
- package/esm2020/lib/modules/flyout/types/flyout-permalink.mjs +1 -1
- package/fesm2015/skyux-flyout.mjs +14 -14
- package/fesm2015/skyux-flyout.mjs.map +1 -1
- package/fesm2020/skyux-flyout.mjs +14 -14
- package/fesm2020/skyux-flyout.mjs.map +1 -1
- package/lib/modules/flyout/flyout-instance.d.ts +1 -1
- package/lib/modules/flyout/flyout-media-query.service.d.ts +1 -1
- package/lib/modules/flyout/types/flyout-action.d.ts +3 -3
- package/lib/modules/flyout/types/flyout-close-args.d.ts +2 -2
- package/lib/modules/flyout/types/flyout-config-internal.d.ts +4 -4
- package/lib/modules/flyout/types/flyout-config.d.ts +10 -10
- package/lib/modules/flyout/types/flyout-permalink.d.ts +3 -3
- package/package.json +6 -6
|
@@ -335,13 +335,13 @@ class SkyFlyoutMediaQueryService {
|
|
|
335
335
|
}
|
|
336
336
|
setBreakpointForWidth(width) {
|
|
337
337
|
let breakpoint;
|
|
338
|
-
if (this.
|
|
338
|
+
if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.xs)) {
|
|
339
339
|
breakpoint = SkyMediaBreakpoints.xs;
|
|
340
340
|
}
|
|
341
|
-
else if (this.
|
|
341
|
+
else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.sm)) {
|
|
342
342
|
breakpoint = SkyMediaBreakpoints.sm;
|
|
343
343
|
}
|
|
344
|
-
else if (this.
|
|
344
|
+
else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.md)) {
|
|
345
345
|
breakpoint = SkyMediaBreakpoints.md;
|
|
346
346
|
}
|
|
347
347
|
else {
|
|
@@ -350,7 +350,7 @@ class SkyFlyoutMediaQueryService {
|
|
|
350
350
|
this.current = breakpoint;
|
|
351
351
|
__classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").next(this.current);
|
|
352
352
|
}
|
|
353
|
-
|
|
353
|
+
isWidthWithinBreakpoint(width, breakpoint) {
|
|
354
354
|
const xsBreakpointMaxPixels = 767;
|
|
355
355
|
const smBreakpointMinPixels = 768;
|
|
356
356
|
const smBreakpointMaxPixels = 991;
|
|
@@ -471,7 +471,7 @@ class SkyFlyoutComponent {
|
|
|
471
471
|
__classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f").complete();
|
|
472
472
|
}
|
|
473
473
|
onWindowResize(event) {
|
|
474
|
-
if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").
|
|
474
|
+
if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").isWidthWithinBreakpoint(event.target.innerWidth, SkyMediaBreakpoints.xs)) {
|
|
475
475
|
__classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, event.target.innerWidth);
|
|
476
476
|
}
|
|
477
477
|
else {
|
|
@@ -719,8 +719,8 @@ _SkyFlyoutComponent_xCoord = new WeakMap(), _SkyFlyoutComponent_windowBufferSize
|
|
|
719
719
|
(_a = this.target) === null || _a === void 0 ? void 0 : _a.clear();
|
|
720
720
|
}, _SkyFlyoutComponent_updateBreakpointAndResponsiveClass = function _SkyFlyoutComponent_updateBreakpointAndResponsiveClass(width) {
|
|
721
721
|
__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").setBreakpointForWidth(width);
|
|
722
|
-
const
|
|
723
|
-
__classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").setResponsiveClass(__classPrivateFieldGet(this, _SkyFlyoutComponent_elementRef, "f"),
|
|
722
|
+
const newBreakpoint = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").current;
|
|
723
|
+
__classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").setResponsiveClass(__classPrivateFieldGet(this, _SkyFlyoutComponent_elementRef, "f"), newBreakpoint);
|
|
724
724
|
}, _SkyFlyoutComponent_setFullscreen = function _SkyFlyoutComponent_setFullscreen() {
|
|
725
725
|
if (window.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f") < this.config.minWidth) {
|
|
726
726
|
this.isFullscreen = true;
|
|
@@ -757,7 +757,7 @@ _SkyFlyoutComponent_xCoord = new WeakMap(), _SkyFlyoutComponent_windowBufferSize
|
|
|
757
757
|
__classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f"), "f");
|
|
758
758
|
__classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
|
|
759
759
|
}
|
|
760
|
-
if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").
|
|
760
|
+
if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").isWidthWithinBreakpoint(window.innerWidth, SkyMediaBreakpoints.xs)) {
|
|
761
761
|
__classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, window.innerWidth);
|
|
762
762
|
}
|
|
763
763
|
else {
|
|
@@ -824,7 +824,7 @@ SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
824
824
|
SkyFlyoutAdapterService,
|
|
825
825
|
SkyFlyoutMediaQueryService,
|
|
826
826
|
{ provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
827
|
-
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config
|
|
827
|
+
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config.ariaRole ? config.ariaRole : 'dialog'\"\n [attr.aria-describedby]=\"config.ariaDescribedBy\"\n [attr.aria-label]=\"config.ariaLabel\"\n [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n [attr.aria-modal]=\"\n config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n \"\n [attr.hidden]=\"!instanceReady ? true : undefined\"\n [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n (@flyoutState.done)=\"animationDone($event)\"\n [@flyoutState]=\"getAnimationState()\"\n [style.width.px]=\"flyoutWidth\"\n #flyoutRef\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n <div\n class=\"sky-flyout-header\"\n [skyThemeClass]=\"{\n 'sky-padding-squish-large': 'default'\n }\"\n #flyoutHeader\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n </button>\n\n <sky-flyout-iterator\n *ngIf=\"config.showIterator\"\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n >\n </sky-flyout-iterator>\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n <button\n class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n </div>\n </div>\n <div class=\"sky-flyout-content\">\n <div #target></div>\n </div>\n <div\n class=\"sky-flyout-resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n type=\"range\"\n [attr.aria-controls]=\"flyoutId\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"config.maxWidth\"\n [attr.aria-valuemin]=\"config.minWidth\"\n [attr.aria-valuenow]=\"flyoutWidth\"\n (keydown)=\"onResizeHandleKeyDown($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n <ng-template [ngIf]=\"permalink\">\n <ng-template [ngIf]=\"permalink.url\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n <ng-template [ngIf]=\"permalink.route\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [state]=\"permalink.route.extras?.state\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-flyout-btn-primary-action sky-margin-inline-default\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:inherit;background:#eeeeef;height:50px;display:flex;position:fixed;z-index:1001;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;margin-top:50px;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout,.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
828
828
|
trigger('flyoutState', [
|
|
829
829
|
state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
|
|
830
830
|
state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
|
|
@@ -851,7 +851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
851
851
|
]),
|
|
852
852
|
transition(`* <=> *`, animate('250ms ease-in')),
|
|
853
853
|
]),
|
|
854
|
-
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config
|
|
854
|
+
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config.ariaRole ? config.ariaRole : 'dialog'\"\n [attr.aria-describedby]=\"config.ariaDescribedBy\"\n [attr.aria-label]=\"config.ariaLabel\"\n [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n [attr.aria-modal]=\"\n config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n \"\n [attr.hidden]=\"!instanceReady ? true : undefined\"\n [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n (@flyoutState.done)=\"animationDone($event)\"\n [@flyoutState]=\"getAnimationState()\"\n [style.width.px]=\"flyoutWidth\"\n #flyoutRef\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n <div\n class=\"sky-flyout-header\"\n [skyThemeClass]=\"{\n 'sky-padding-squish-large': 'default'\n }\"\n #flyoutHeader\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n </button>\n\n <sky-flyout-iterator\n *ngIf=\"config.showIterator\"\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n >\n </sky-flyout-iterator>\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n <button\n class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n </div>\n </div>\n <div class=\"sky-flyout-content\">\n <div #target></div>\n </div>\n <div\n class=\"sky-flyout-resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n type=\"range\"\n [attr.aria-controls]=\"flyoutId\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"config.maxWidth\"\n [attr.aria-valuemin]=\"config.minWidth\"\n [attr.aria-valuenow]=\"flyoutWidth\"\n (keydown)=\"onResizeHandleKeyDown($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n <ng-template [ngIf]=\"permalink\">\n <ng-template [ngIf]=\"permalink.url\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n <ng-template [ngIf]=\"permalink.route\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [state]=\"permalink.route.extras?.state\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-flyout-btn-primary-action sky-margin-inline-default\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:inherit;background:#eeeeef;height:50px;display:flex;position:fixed;z-index:1001;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;margin-top:50px;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout,.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"] }]
|
|
855
855
|
}], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1$1.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
|
|
856
856
|
type: ViewChild,
|
|
857
857
|
args: ['flyoutRef', {
|
|
@@ -915,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
915
915
|
}]
|
|
916
916
|
}] });
|
|
917
917
|
|
|
918
|
-
var _SkyFlyoutService_instances, _SkyFlyoutService_host, _SkyFlyoutService_removeAfterClosed, _SkyFlyoutService_isOpening, _SkyFlyoutService_ngUnsubscribe, _SkyFlyoutService_coreAdapter, _SkyFlyoutService_windowRef, _SkyFlyoutService_dynamicComponentService, _SkyFlyoutService_router, _SkyFlyoutService_ngZone, _SkyFlyoutService_createHostComponent, _SkyFlyoutService_removeHostComponent, _SkyFlyoutService_addListeners,
|
|
918
|
+
var _SkyFlyoutService_instances, _SkyFlyoutService_host, _SkyFlyoutService_removeAfterClosed, _SkyFlyoutService_isOpening, _SkyFlyoutService_ngUnsubscribe, _SkyFlyoutService_coreAdapter, _SkyFlyoutService_windowRef, _SkyFlyoutService_dynamicComponentService, _SkyFlyoutService_router, _SkyFlyoutService_ngZone, _SkyFlyoutService_createHostComponent, _SkyFlyoutService_removeHostComponent, _SkyFlyoutService_addListeners, _SkyFlyoutService_removeListeners;
|
|
919
919
|
/**
|
|
920
920
|
* Launches flyouts and provides a common look and feel.
|
|
921
921
|
* This service dynamically generates the flyout component and appends it directly to the
|
|
@@ -940,7 +940,7 @@ class SkyFlyoutService {
|
|
|
940
940
|
__classPrivateFieldSet(this, _SkyFlyoutService_ngZone, ngZone, "f");
|
|
941
941
|
}
|
|
942
942
|
ngOnDestroy() {
|
|
943
|
-
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m",
|
|
943
|
+
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeListeners).call(this);
|
|
944
944
|
if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
|
|
945
945
|
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
|
|
946
946
|
}
|
|
@@ -1053,13 +1053,13 @@ _SkyFlyoutService_host = new WeakMap(), _SkyFlyoutService_removeAfterClosed = ne
|
|
|
1053
1053
|
}
|
|
1054
1054
|
});
|
|
1055
1055
|
flyout.closed.pipe(take(1)).subscribe(() => {
|
|
1056
|
-
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m",
|
|
1056
|
+
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeListeners).call(this);
|
|
1057
1057
|
if (__classPrivateFieldGet(this, _SkyFlyoutService_removeAfterClosed, "f")) {
|
|
1058
1058
|
__classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
|
|
1059
1059
|
}
|
|
1060
1060
|
});
|
|
1061
1061
|
}
|
|
1062
|
-
},
|
|
1062
|
+
}, _SkyFlyoutService_removeListeners = function _SkyFlyoutService_removeListeners() {
|
|
1063
1063
|
__classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f").next(true);
|
|
1064
1064
|
__classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f").unsubscribe();
|
|
1065
1065
|
__classPrivateFieldSet(this, _SkyFlyoutService_ngUnsubscribe, new Subject(), "f");
|