@skyux/flyout 5.0.3 → 5.5.0-alpha.0
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/README.md +6 -4
- package/bundles/skyux-flyout.umd.js +144 -55
- package/documentation.json +486 -162
- package/esm2015/index.js +14 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout-adapter.service.js +64 -0
- package/esm2015/lib/modules/flyout/flyout-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout-instance.js +109 -0
- package/esm2015/lib/modules/flyout/flyout-instance.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout-iterator.component.js +59 -0
- package/esm2015/lib/modules/flyout/flyout-iterator.component.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout-media-query.service.js +72 -0
- package/esm2015/lib/modules/flyout/flyout-media-query.service.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout.component.js +505 -0
- package/esm2015/lib/modules/flyout/flyout.component.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout.module.js +56 -0
- package/esm2015/lib/modules/flyout/flyout.module.js.map +1 -0
- package/esm2015/lib/modules/flyout/flyout.service.js +167 -0
- package/esm2015/lib/modules/flyout/flyout.service.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-action.js +2 -0
- package/esm2015/lib/modules/flyout/types/flyout-action.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-before-close-handler.js +9 -0
- package/esm2015/lib/modules/flyout/types/flyout-before-close-handler.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-close-args.js +2 -0
- package/esm2015/lib/modules/flyout/types/flyout-close-args.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-config.js +2 -0
- package/esm2015/lib/modules/flyout/types/flyout-config.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-message-type.js +13 -0
- package/esm2015/lib/modules/flyout/types/flyout-message-type.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-message.js +2 -0
- package/esm2015/lib/modules/flyout/types/flyout-message.js.map +1 -0
- package/esm2015/lib/modules/flyout/types/flyout-permalink.js +2 -0
- package/esm2015/lib/modules/flyout/types/flyout-permalink.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js +54 -0
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js.map +1 -0
- package/esm2015/skyux-flyout.js +2 -2
- package/esm2015/skyux-flyout.js.map +1 -0
- package/fesm2015/skyux-flyout.js +131 -49
- package/fesm2015/skyux-flyout.js.map +1 -1
- package/index.d.ts +11 -0
- package/{modules → lib/modules}/flyout/flyout-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/flyout/flyout-instance.d.ts +12 -2
- package/{modules → lib/modules}/flyout/flyout-iterator.component.d.ts +0 -0
- package/{modules → lib/modules}/flyout/flyout-media-query.service.d.ts +0 -0
- package/{modules → lib/modules}/flyout/flyout.component.d.ts +11 -2
- package/lib/modules/flyout/flyout.module.d.ts +17 -0
- package/{modules → lib/modules}/flyout/flyout.service.d.ts +8 -7
- package/{modules → lib/modules}/flyout/types/flyout-action.d.ts +0 -0
- package/lib/modules/flyout/types/flyout-before-close-handler.d.ts +10 -0
- package/lib/modules/flyout/types/flyout-close-args.d.ts +9 -0
- package/{modules → lib/modules}/flyout/types/flyout-config.d.ts +10 -0
- package/{modules → lib/modules}/flyout/types/flyout-message-type.d.ts +0 -0
- package/{modules → lib/modules}/flyout/types/flyout-message.d.ts +3 -0
- package/{modules → lib/modules}/flyout/types/flyout-permalink.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-flyout-resources.module.d.ts +0 -0
- package/package.json +12 -11
- package/skyux-flyout.d.ts +1 -1
- package/LICENSE +0 -21
- package/esm2015/modules/flyout/flyout-adapter.service.js +0 -64
- package/esm2015/modules/flyout/flyout-instance.js +0 -98
- package/esm2015/modules/flyout/flyout-iterator.component.js +0 -59
- package/esm2015/modules/flyout/flyout-media-query.service.js +0 -72
- package/esm2015/modules/flyout/flyout.component.js +0 -456
- package/esm2015/modules/flyout/flyout.module.js +0 -52
- package/esm2015/modules/flyout/flyout.service.js +0 -155
- package/esm2015/modules/flyout/types/flyout-action.js +0 -2
- package/esm2015/modules/flyout/types/flyout-config.js +0 -2
- package/esm2015/modules/flyout/types/flyout-message-type.js +0 -13
- package/esm2015/modules/flyout/types/flyout-message.js +0 -2
- package/esm2015/modules/flyout/types/flyout-permalink.js +0 -2
- package/esm2015/modules/shared/sky-flyout-resources.module.js +0 -54
- package/esm2015/public-api.js +0 -12
- package/modules/flyout/flyout.module.d.ts +0 -16
- package/public-api.d.ts +0 -9
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
#
|
|
1
|
+
# flyout
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test flyout` to execute the unit tests.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('rxjs/operators'), require('@skyux/core')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/router', '@skyux/theme', '@angular/animations', 'rxjs/operators', '@skyux/core'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.
|
|
5
|
-
})(this, (function (exports, i0, rxjs, i7, forms, i2$2, i1$1, i2,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/cdk/a11y'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('rxjs/operators'), require('@skyux/core')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/cdk/a11y', '@angular/common', '@angular/forms', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/router', '@skyux/theme', '@angular/animations', 'rxjs/operators', '@skyux/core'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.cdk.a11y, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.i10, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
|
|
5
|
+
})(this, (function (exports, i0, rxjs, i9, i7, forms, i2$2, i1$1, i2, i10, i2$1, animations, operators, i1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -23,11 +23,12 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
|
+
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
26
27
|
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
27
28
|
var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
|
|
28
29
|
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
|
|
29
30
|
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
|
|
30
|
-
var
|
|
31
|
+
var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
|
|
31
32
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
|
|
32
33
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
33
34
|
|
|
@@ -59,6 +60,7 @@
|
|
|
59
60
|
* @default true
|
|
60
61
|
*/
|
|
61
62
|
this.isOpen = true;
|
|
63
|
+
this._beforeClose = new rxjs.Subject();
|
|
62
64
|
this._iteratorNextButtonClick = new i0.EventEmitter();
|
|
63
65
|
this._iteratorPreviousButtonClick = new i0.EventEmitter();
|
|
64
66
|
this._iteratorNextButtonDisabled = false;
|
|
@@ -68,6 +70,18 @@
|
|
|
68
70
|
_this.isOpen = false;
|
|
69
71
|
});
|
|
70
72
|
}
|
|
73
|
+
Object.defineProperty(SkyFlyoutInstance.prototype, "beforeClose", {
|
|
74
|
+
/**
|
|
75
|
+
* An event that the modal instance emits when it is about to close.
|
|
76
|
+
* If a subscription exists for this event,
|
|
77
|
+
* the modal does not close until the subscriber calls the handler's `closeModal` method.
|
|
78
|
+
*/
|
|
79
|
+
get: function () {
|
|
80
|
+
return this._beforeClose;
|
|
81
|
+
},
|
|
82
|
+
enumerable: false,
|
|
83
|
+
configurable: true
|
|
84
|
+
});
|
|
71
85
|
Object.defineProperty(SkyFlyoutInstance.prototype, "hostController", {
|
|
72
86
|
/**
|
|
73
87
|
* Used to communicate with the host component.
|
|
@@ -149,10 +163,12 @@
|
|
|
149
163
|
});
|
|
150
164
|
/**
|
|
151
165
|
* Closes the flyout instance and emits its `closed` event.
|
|
166
|
+
* @param args Arguments used when closing the flyout.
|
|
152
167
|
*/
|
|
153
|
-
SkyFlyoutInstance.prototype.close = function () {
|
|
168
|
+
SkyFlyoutInstance.prototype.close = function (args) {
|
|
154
169
|
this.hostController.next({
|
|
155
170
|
type: exports.SkyFlyoutMessageType.Close,
|
|
171
|
+
data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
|
|
156
172
|
});
|
|
157
173
|
this._iteratorPreviousButtonClick.complete();
|
|
158
174
|
this._iteratorNextButtonClick.complete();
|
|
@@ -195,16 +211,16 @@
|
|
|
195
211
|
}
|
|
196
212
|
return SkyFlyoutResourcesModule;
|
|
197
213
|
}());
|
|
198
|
-
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
199
|
-
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
200
|
-
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
214
|
+
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
215
|
+
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
|
|
216
|
+
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
|
|
201
217
|
{
|
|
202
218
|
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
203
219
|
useClass: SkyFlyoutResourcesProvider,
|
|
204
220
|
multi: true,
|
|
205
221
|
},
|
|
206
222
|
], imports: [i2.SkyI18nModule] });
|
|
207
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
223
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
|
|
208
224
|
type: i0.NgModule,
|
|
209
225
|
args: [{
|
|
210
226
|
exports: [i2.SkyI18nModule],
|
|
@@ -273,9 +289,9 @@
|
|
|
273
289
|
};
|
|
274
290
|
return SkyFlyoutAdapterService;
|
|
275
291
|
}());
|
|
276
|
-
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
277
|
-
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
278
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
292
|
+
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
293
|
+
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
|
|
294
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
|
|
279
295
|
type: i0.Injectable
|
|
280
296
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace.SkyAppWindowRef }]; } });
|
|
281
297
|
|
|
@@ -346,12 +362,22 @@
|
|
|
346
362
|
};
|
|
347
363
|
return SkyFlyoutMediaQueryService;
|
|
348
364
|
}());
|
|
349
|
-
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
350
|
-
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
351
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
365
|
+
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
366
|
+
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
|
|
367
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
|
|
352
368
|
type: i0.Injectable
|
|
353
369
|
}], ctorParameters: function () { return []; } });
|
|
354
370
|
|
|
371
|
+
/**
|
|
372
|
+
* Handler for notifying the flyout when it is appropriate to close the flyout. This will be returned from the flyout instance's `beforeClose` observable.
|
|
373
|
+
*/
|
|
374
|
+
var SkyFlyoutBeforeCloseHandler = /** @class */ (function () {
|
|
375
|
+
function SkyFlyoutBeforeCloseHandler(closeFlyoutFunction) {
|
|
376
|
+
this.closeFlyout = closeFlyoutFunction;
|
|
377
|
+
}
|
|
378
|
+
return SkyFlyoutBeforeCloseHandler;
|
|
379
|
+
}());
|
|
380
|
+
|
|
355
381
|
/**
|
|
356
382
|
* @internal
|
|
357
383
|
*/
|
|
@@ -395,9 +421,9 @@
|
|
|
395
421
|
};
|
|
396
422
|
return SkyFlyoutIteratorComponent;
|
|
397
423
|
}());
|
|
398
|
-
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
399
|
-
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
400
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
424
|
+
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
425
|
+
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0__namespace, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
|
|
426
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
401
427
|
type: i0.Component,
|
|
402
428
|
args: [{
|
|
403
429
|
selector: 'sky-flyout-iterator',
|
|
@@ -421,7 +447,7 @@
|
|
|
421
447
|
* @internal
|
|
422
448
|
*/
|
|
423
449
|
var SkyFlyoutComponent = /** @class */ (function () {
|
|
424
|
-
function SkyFlyoutComponent(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService) {
|
|
450
|
+
function SkyFlyoutComponent(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
|
|
425
451
|
var _this = this;
|
|
426
452
|
this.adapter = adapter;
|
|
427
453
|
this.changeDetector = changeDetector;
|
|
@@ -431,11 +457,13 @@
|
|
|
431
457
|
this.flyoutMediaQueryService = flyoutMediaQueryService;
|
|
432
458
|
this.elementRef = elementRef;
|
|
433
459
|
this.uiConfigService = uiConfigService;
|
|
460
|
+
this._ngZone = _ngZone;
|
|
434
461
|
this.flyoutId = "sky-flyout-" + ++nextId;
|
|
435
462
|
this.flyoutState = FLYOUT_CLOSED_STATE;
|
|
436
463
|
this.isOpen = false;
|
|
437
464
|
this.isOpening = false;
|
|
438
465
|
this.flyoutWidth = 0;
|
|
466
|
+
this.instanceReady = false;
|
|
439
467
|
this.isDragging = false;
|
|
440
468
|
this.isFullscreen = false;
|
|
441
469
|
this.resizeKeyControlActive = false;
|
|
@@ -542,16 +570,16 @@
|
|
|
542
570
|
this.config.iteratorPreviousButtonDisabled =
|
|
543
571
|
this.config.iteratorPreviousButtonDisabled || false;
|
|
544
572
|
var factory = this.resolver.resolveComponentFactory(component);
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
*/
|
|
550
|
-
var providers = i0.ReflectiveInjector.resolve(this.config.providers);
|
|
551
|
-
var injector = i0.ReflectiveInjector.fromResolvedProviders(providers, this.injector);
|
|
552
|
-
/* tslint:enable:deprecation */
|
|
573
|
+
var injector = i0.Injector.create({
|
|
574
|
+
parent: this.injector,
|
|
575
|
+
providers: this.config.providers,
|
|
576
|
+
});
|
|
553
577
|
var componentRef = this.target.createComponent(factory, undefined, injector);
|
|
554
578
|
this.flyoutInstance = this.createFlyoutInstance(componentRef.instance);
|
|
579
|
+
// This is used to ensure we do not render the flyout until we have attached the component.
|
|
580
|
+
// This allows the aria-labelledby to function correctly.
|
|
581
|
+
this.instanceReady = true;
|
|
582
|
+
this.changeDetector.markForCheck();
|
|
555
583
|
// Open the flyout immediately.
|
|
556
584
|
this.messageStream.next({
|
|
557
585
|
type: exports.SkyFlyoutMessageType.Open,
|
|
@@ -590,7 +618,9 @@
|
|
|
590
618
|
return false;
|
|
591
619
|
};
|
|
592
620
|
SkyFlyoutComponent.prototype.getAnimationState = function () {
|
|
593
|
-
return this.
|
|
621
|
+
return this.instanceReady && this.isOpening
|
|
622
|
+
? FLYOUT_OPEN_STATE
|
|
623
|
+
: FLYOUT_CLOSED_STATE;
|
|
594
624
|
};
|
|
595
625
|
SkyFlyoutComponent.prototype.animationDone = function (event) {
|
|
596
626
|
if (event.toState === FLYOUT_OPEN_STATE) {
|
|
@@ -687,6 +717,8 @@
|
|
|
687
717
|
return instance;
|
|
688
718
|
};
|
|
689
719
|
SkyFlyoutComponent.prototype.handleIncomingMessages = function (message) {
|
|
720
|
+
var _this = this;
|
|
721
|
+
var _a;
|
|
690
722
|
/* tslint:disable-next-line:switch-default */
|
|
691
723
|
switch (message.type) {
|
|
692
724
|
case exports.SkyFlyoutMessageType.Open:
|
|
@@ -694,10 +726,21 @@
|
|
|
694
726
|
this.isOpen = false;
|
|
695
727
|
this.isOpening = true;
|
|
696
728
|
}
|
|
729
|
+
this.initFocusTrap();
|
|
697
730
|
break;
|
|
698
731
|
case exports.SkyFlyoutMessageType.Close:
|
|
699
|
-
this.
|
|
700
|
-
|
|
732
|
+
if (this.flyoutInstance.beforeClose.observers.length ===
|
|
733
|
+
0 ||
|
|
734
|
+
((_a = message.data) === null || _a === void 0 ? void 0 : _a.ignoreBeforeClose)) {
|
|
735
|
+
this.isOpen = true;
|
|
736
|
+
this.isOpening = false;
|
|
737
|
+
}
|
|
738
|
+
else {
|
|
739
|
+
this.flyoutInstance.beforeClose.next(new SkyFlyoutBeforeCloseHandler(function () {
|
|
740
|
+
_this.isOpen = true;
|
|
741
|
+
_this.isOpening = false;
|
|
742
|
+
}));
|
|
743
|
+
}
|
|
701
744
|
break;
|
|
702
745
|
case exports.SkyFlyoutMessageType.EnableIteratorNextButton:
|
|
703
746
|
this.config.iteratorNextButtonDisabled = false;
|
|
@@ -810,14 +853,33 @@
|
|
|
810
853
|
}
|
|
811
854
|
}
|
|
812
855
|
};
|
|
856
|
+
/** Executes a function when the zone is stable. */
|
|
857
|
+
SkyFlyoutComponent.prototype._executeOnStable = function (fn) {
|
|
858
|
+
if (this._ngZone.isStable) {
|
|
859
|
+
fn();
|
|
860
|
+
}
|
|
861
|
+
else {
|
|
862
|
+
this._ngZone.onStable.pipe(operators.take(1)).subscribe(fn);
|
|
863
|
+
}
|
|
864
|
+
};
|
|
865
|
+
SkyFlyoutComponent.prototype.initFocusTrap = function () {
|
|
866
|
+
var _this = this;
|
|
867
|
+
this.enableTrapFocusAutoCapture = false;
|
|
868
|
+
this.enableTrapFocus = false;
|
|
869
|
+
// Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
|
|
870
|
+
this._executeOnStable(function () {
|
|
871
|
+
_this.enableTrapFocusAutoCapture = true;
|
|
872
|
+
_this.enableTrapFocus = true;
|
|
873
|
+
});
|
|
874
|
+
};
|
|
813
875
|
return SkyFlyoutComponent;
|
|
814
876
|
}());
|
|
815
|
-
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
816
|
-
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
877
|
+
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i2__namespace$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyUIConfigService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
878
|
+
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
817
879
|
SkyFlyoutAdapterService,
|
|
818
880
|
SkyFlyoutMediaQueryService,
|
|
819
881
|
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
820
|
-
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config?.ariaRole\"\n [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\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
|
|
882
|
+
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, 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=\"\n sky-btn\n sky-btn-icon-borderless\n sky-margin-inline-sm\n sky-flyout-header-grab-handle\n \"\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 #flyoutCloseButton\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\" #flyoutContent>\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=\"\n sky-btn\n sky-btn-default\n sky-flyout-btn-primary-action\n sky-margin-inline-default\n \"\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:100%;background:#eeeeef;height:50px;display:flex;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;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{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9__namespace.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2__namespace$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe }, animations: [
|
|
821
883
|
animations.trigger('flyoutState', [
|
|
822
884
|
animations.state(FLYOUT_OPEN_STATE, animations.style({ transform: 'initial' })),
|
|
823
885
|
animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
|
|
@@ -828,11 +890,11 @@
|
|
|
828
890
|
animations.transition("* <=> *", animations.animate('250ms ease-in')),
|
|
829
891
|
]),
|
|
830
892
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
|
|
831
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
893
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
|
|
832
894
|
type: i0.Component,
|
|
833
895
|
args: [{
|
|
834
896
|
selector: 'sky-flyout',
|
|
835
|
-
template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config?.ariaRole\"\n [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\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
|
|
897
|
+
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=\"\n sky-btn\n sky-btn-icon-borderless\n sky-margin-inline-sm\n sky-flyout-header-grab-handle\n \"\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 #flyoutCloseButton\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\" #flyoutContent>\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=\"\n sky-btn\n sky-btn-default\n sky-flyout-btn-primary-action\n sky-margin-inline-default\n \"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n </ng-template>\n</ng-template>\n",
|
|
836
898
|
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:100%;background:#eeeeef;height:50px;display:flex;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;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{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"],
|
|
837
899
|
providers: [
|
|
838
900
|
SkyFlyoutAdapterService,
|
|
@@ -853,7 +915,7 @@
|
|
|
853
915
|
// Allow automatic change detection for child components.
|
|
854
916
|
changeDetection: i0.ChangeDetectionStrategy.Default,
|
|
855
917
|
}]
|
|
856
|
-
}], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i2__namespace$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyUIConfigService }]; }, propDecorators: { flyoutRef: [{
|
|
918
|
+
}], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i2__namespace$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyUIConfigService }, { type: i0__namespace.NgZone }]; }, propDecorators: { flyoutRef: [{
|
|
857
919
|
type: i0.ViewChild,
|
|
858
920
|
args: ['flyoutRef', {
|
|
859
921
|
read: i0.ElementRef,
|
|
@@ -865,6 +927,18 @@
|
|
|
865
927
|
read: i0.ViewContainerRef,
|
|
866
928
|
static: true,
|
|
867
929
|
}]
|
|
930
|
+
}], flyoutCloseButton: [{
|
|
931
|
+
type: i0.ViewChild,
|
|
932
|
+
args: ['flyoutCloseButton', {
|
|
933
|
+
read: i0.ElementRef,
|
|
934
|
+
static: true,
|
|
935
|
+
}]
|
|
936
|
+
}], flyoutContent: [{
|
|
937
|
+
type: i0.ViewChild,
|
|
938
|
+
args: ['flyoutContent', {
|
|
939
|
+
read: i0.ElementRef,
|
|
940
|
+
static: true,
|
|
941
|
+
}]
|
|
868
942
|
}], flyoutHeader: [{
|
|
869
943
|
type: i0.ViewChild,
|
|
870
944
|
args: ['flyoutHeader', {
|
|
@@ -881,16 +955,18 @@
|
|
|
881
955
|
}
|
|
882
956
|
return SkyFlyoutModule;
|
|
883
957
|
}());
|
|
884
|
-
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
885
|
-
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
958
|
+
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
959
|
+
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [i9.A11yModule,
|
|
960
|
+
i7.CommonModule,
|
|
886
961
|
forms.FormsModule,
|
|
887
962
|
i2$2.RouterModule,
|
|
888
963
|
i2.SkyI18nModule,
|
|
889
964
|
i1$1.SkyIconModule,
|
|
890
965
|
SkyFlyoutResourcesModule,
|
|
891
966
|
i2$1.SkyThemeModule,
|
|
892
|
-
|
|
893
|
-
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
967
|
+
i10.SkyHrefModule], exports: [SkyFlyoutComponent] });
|
|
968
|
+
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
|
|
969
|
+
i9.A11yModule,
|
|
894
970
|
i7.CommonModule,
|
|
895
971
|
forms.FormsModule,
|
|
896
972
|
i2$2.RouterModule,
|
|
@@ -898,13 +974,14 @@
|
|
|
898
974
|
i1$1.SkyIconModule,
|
|
899
975
|
SkyFlyoutResourcesModule,
|
|
900
976
|
i2$1.SkyThemeModule,
|
|
901
|
-
|
|
977
|
+
i10.SkyHrefModule,
|
|
902
978
|
]] });
|
|
903
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
979
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, decorators: [{
|
|
904
980
|
type: i0.NgModule,
|
|
905
981
|
args: [{
|
|
906
982
|
declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
|
|
907
983
|
imports: [
|
|
984
|
+
i9.A11yModule,
|
|
908
985
|
i7.CommonModule,
|
|
909
986
|
forms.FormsModule,
|
|
910
987
|
i2$2.RouterModule,
|
|
@@ -912,7 +989,7 @@
|
|
|
912
989
|
i1$1.SkyIconModule,
|
|
913
990
|
SkyFlyoutResourcesModule,
|
|
914
991
|
i2$1.SkyThemeModule,
|
|
915
|
-
|
|
992
|
+
i10.SkyHrefModule,
|
|
916
993
|
],
|
|
917
994
|
exports: [SkyFlyoutComponent],
|
|
918
995
|
entryComponents: [SkyFlyoutComponent],
|
|
@@ -925,11 +1002,13 @@
|
|
|
925
1002
|
* document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
|
|
926
1003
|
*/
|
|
927
1004
|
var SkyFlyoutService = /** @class */ (function () {
|
|
928
|
-
function SkyFlyoutService(coreAdapter, windowRef, dynamicComponentService, router) {
|
|
1005
|
+
function SkyFlyoutService(coreAdapter, windowRef, dynamicComponentService, router, _ngZone, applicationRef) {
|
|
929
1006
|
this.coreAdapter = coreAdapter;
|
|
930
1007
|
this.windowRef = windowRef;
|
|
931
1008
|
this.dynamicComponentService = dynamicComponentService;
|
|
932
1009
|
this.router = router;
|
|
1010
|
+
this._ngZone = _ngZone;
|
|
1011
|
+
this.applicationRef = applicationRef;
|
|
933
1012
|
this.removeAfterClosed = false;
|
|
934
1013
|
this.isOpening = false;
|
|
935
1014
|
this.ngUnsubscribe = new rxjs.Subject();
|
|
@@ -942,21 +1021,22 @@
|
|
|
942
1021
|
};
|
|
943
1022
|
/**
|
|
944
1023
|
* Closes the flyout. This method also removes the flyout's HTML elements from the DOM.
|
|
1024
|
+
* @param args Arguments used when closing the flyout.
|
|
945
1025
|
*/
|
|
946
|
-
SkyFlyoutService.prototype.close = function () {
|
|
1026
|
+
SkyFlyoutService.prototype.close = function (args) {
|
|
947
1027
|
if (this.host && !this.isOpening) {
|
|
948
1028
|
this.removeAfterClosed = true;
|
|
949
1029
|
this.host.instance.messageStream.next({
|
|
950
1030
|
type: exports.SkyFlyoutMessageType.Close,
|
|
1031
|
+
data: {
|
|
1032
|
+
ignoreBeforeClose: args ? args.ignoreBeforeClose : false,
|
|
1033
|
+
},
|
|
951
1034
|
});
|
|
952
1035
|
}
|
|
953
1036
|
};
|
|
954
1037
|
/**
|
|
955
1038
|
* Opens a flyout and displays the specified component.
|
|
956
|
-
* @param component Specifies the component to render.
|
|
957
|
-
* with HTML selectors, you must register it with the `entryComponents` property in the
|
|
958
|
-
* `app-extras.module.ts` file. For more information, see the
|
|
959
|
-
* [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
|
|
1039
|
+
* @param component Specifies the component to render.
|
|
960
1040
|
* @param config Specifies the flyout configuration passed to the specified component's constructor.
|
|
961
1041
|
*/
|
|
962
1042
|
SkyFlyoutService.prototype.open = function (component, config) {
|
|
@@ -973,6 +1053,14 @@
|
|
|
973
1053
|
.subscribe(function (event) {
|
|
974
1054
|
if (event instanceof i2$2.NavigationStart) {
|
|
975
1055
|
_this.close();
|
|
1056
|
+
// Sanity check - if the host still exists after animations should have completed - remove host
|
|
1057
|
+
_this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
|
|
1058
|
+
if (_this.host) {
|
|
1059
|
+
_this.removeHostComponent();
|
|
1060
|
+
// Without this tick - the host does not actually get removed on initial navigation in this case.
|
|
1061
|
+
_this.applicationRef.tick();
|
|
1062
|
+
}
|
|
1063
|
+
});
|
|
976
1064
|
}
|
|
977
1065
|
});
|
|
978
1066
|
}
|
|
@@ -1037,7 +1125,7 @@
|
|
|
1037
1125
|
});
|
|
1038
1126
|
this.removeAfterClosed = false;
|
|
1039
1127
|
flyoutInstance_1.messageStream
|
|
1040
|
-
.pipe(operators.
|
|
1128
|
+
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1041
1129
|
.subscribe(function (message) {
|
|
1042
1130
|
if (message.type === exports.SkyFlyoutMessageType.Close) {
|
|
1043
1131
|
_this.removeAfterClosed = true;
|
|
@@ -1059,19 +1147,20 @@
|
|
|
1059
1147
|
};
|
|
1060
1148
|
return SkyFlyoutService;
|
|
1061
1149
|
}());
|
|
1062
|
-
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1063
|
-
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1064
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1150
|
+
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyDynamicComponentService }, { token: i2__namespace$2.Router }, { token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1151
|
+
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, providedIn: 'any' });
|
|
1152
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, decorators: [{
|
|
1065
1153
|
type: i0.Injectable,
|
|
1066
1154
|
args: [{
|
|
1067
1155
|
providedIn: 'any',
|
|
1068
1156
|
}]
|
|
1069
|
-
}], ctorParameters: function () { return [{ type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyDynamicComponentService }, { type: i2__namespace$2.Router }]; } });
|
|
1157
|
+
}], ctorParameters: function () { return [{ type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyDynamicComponentService }, { type: i2__namespace$2.Router }, { type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef }]; } });
|
|
1070
1158
|
|
|
1071
1159
|
/**
|
|
1072
1160
|
* Generated bundle index. Do not edit.
|
|
1073
1161
|
*/
|
|
1074
1162
|
|
|
1163
|
+
exports.SkyFlyoutBeforeCloseHandler = SkyFlyoutBeforeCloseHandler;
|
|
1075
1164
|
exports.SkyFlyoutInstance = SkyFlyoutInstance;
|
|
1076
1165
|
exports.SkyFlyoutModule = SkyFlyoutModule;
|
|
1077
1166
|
exports.SkyFlyoutService = SkyFlyoutService;
|