@skyux/flyout 5.0.2 → 5.0.3
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/bundles/skyux-flyout.umd.js +77 -58
- package/documentation.json +116 -116
- package/esm2015/modules/flyout/flyout-adapter.service.js +3 -3
- package/esm2015/modules/flyout/flyout-iterator.component.js +3 -3
- package/esm2015/modules/flyout/flyout-media-query.service.js +3 -3
- package/esm2015/modules/flyout/flyout.component.js +48 -29
- package/esm2015/modules/flyout/flyout.module.js +6 -6
- package/esm2015/modules/flyout/flyout.service.js +3 -3
- package/esm2015/modules/shared/sky-flyout-resources.module.js +54 -0
- package/fesm2015/skyux-flyout.js +68 -49
- package/fesm2015/skyux-flyout.js.map +1 -1
- package/modules/flyout/flyout.component.d.ts +3 -0
- package/modules/flyout/flyout.module.d.ts +1 -1
- package/modules/shared/{flyout-resources.module.d.ts → sky-flyout-resources.module.d.ts} +0 -0
- package/package.json +11 -11
- package/bundles/skyux-flyout.umd.js.map +0 -1
- package/esm2015/modules/shared/flyout-resources.module.js +0 -54
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
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
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,
|
|
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.i9, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
|
|
5
|
+
})(this, (function (exports, i0, rxjs, i7, forms, i2$2, i1$1, i2, i9, i2$1, animations, operators, i1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -24,11 +24,10 @@
|
|
|
24
24
|
|
|
25
25
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
26
|
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
27
|
-
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
28
27
|
var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
|
|
29
28
|
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
|
|
30
29
|
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
|
|
31
|
-
var
|
|
30
|
+
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
32
31
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
|
|
33
32
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
34
33
|
|
|
@@ -165,7 +164,7 @@
|
|
|
165
164
|
/**
|
|
166
165
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
167
166
|
* The contents of this file were automatically generated by
|
|
168
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/
|
|
167
|
+
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-flyout' schematic.
|
|
169
168
|
* To update this file, simply rerun the command.
|
|
170
169
|
*/
|
|
171
170
|
var RESOURCES = {
|
|
@@ -176,7 +175,7 @@
|
|
|
176
175
|
skyux_flyout_permalink_button: { message: 'View record' },
|
|
177
176
|
skyux_flyout_primary_action_button: { message: 'Create list' },
|
|
178
177
|
skyux_flyout_resize_handle: {
|
|
179
|
-
message: 'Resize the flyout window.
|
|
178
|
+
message: 'Resize the flyout window. Press the enter or space key to activate, then use left arrow key to expand the flyout window and right arrow key to shrink the flyout window. Press the enter, space, or tab key to deactivate.',
|
|
180
179
|
},
|
|
181
180
|
},
|
|
182
181
|
};
|
|
@@ -196,16 +195,16 @@
|
|
|
196
195
|
}
|
|
197
196
|
return SkyFlyoutResourcesModule;
|
|
198
197
|
}());
|
|
199
|
-
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
200
|
-
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
201
|
-
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
198
|
+
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
199
|
+
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
|
|
200
|
+
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
|
|
202
201
|
{
|
|
203
202
|
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
204
203
|
useClass: SkyFlyoutResourcesProvider,
|
|
205
204
|
multi: true,
|
|
206
205
|
},
|
|
207
206
|
], imports: [i2.SkyI18nModule] });
|
|
208
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
207
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
|
|
209
208
|
type: i0.NgModule,
|
|
210
209
|
args: [{
|
|
211
210
|
exports: [i2.SkyI18nModule],
|
|
@@ -274,9 +273,9 @@
|
|
|
274
273
|
};
|
|
275
274
|
return SkyFlyoutAdapterService;
|
|
276
275
|
}());
|
|
277
|
-
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
278
|
-
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
279
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
276
|
+
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
277
|
+
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
|
|
278
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
|
|
280
279
|
type: i0.Injectable
|
|
281
280
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace.SkyAppWindowRef }]; } });
|
|
282
281
|
|
|
@@ -347,9 +346,9 @@
|
|
|
347
346
|
};
|
|
348
347
|
return SkyFlyoutMediaQueryService;
|
|
349
348
|
}());
|
|
350
|
-
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
351
|
-
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
352
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
349
|
+
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
350
|
+
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
|
|
351
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
|
|
353
352
|
type: i0.Injectable
|
|
354
353
|
}], ctorParameters: function () { return []; } });
|
|
355
354
|
|
|
@@ -396,9 +395,9 @@
|
|
|
396
395
|
};
|
|
397
396
|
return SkyFlyoutIteratorComponent;
|
|
398
397
|
}());
|
|
399
|
-
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
400
|
-
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
401
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
398
|
+
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
399
|
+
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 } });
|
|
400
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
402
401
|
type: i0.Component,
|
|
403
402
|
args: [{
|
|
404
403
|
selector: 'sky-flyout-iterator',
|
|
@@ -439,6 +438,7 @@
|
|
|
439
438
|
this.flyoutWidth = 0;
|
|
440
439
|
this.isDragging = false;
|
|
441
440
|
this.isFullscreen = false;
|
|
441
|
+
this.resizeKeyControlActive = false;
|
|
442
442
|
this.xCoord = 0;
|
|
443
443
|
this.windowBufferSize = 20;
|
|
444
444
|
/**
|
|
@@ -606,27 +606,10 @@
|
|
|
606
606
|
this.onResizeHandleMouseDown(event);
|
|
607
607
|
};
|
|
608
608
|
SkyFlyoutComponent.prototype.onHeaderGrabHandleKeyDown = function (event) {
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
case 'left':
|
|
614
|
-
/* istanbul ignore else */
|
|
615
|
-
if (this.flyoutWidth < this.config.maxWidth) {
|
|
616
|
-
this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
|
|
617
|
-
}
|
|
618
|
-
break;
|
|
619
|
-
case 'right':
|
|
620
|
-
/* istanbul ignore else */
|
|
621
|
-
if (this.flyoutWidth > this.config.minWidth) {
|
|
622
|
-
this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
|
|
623
|
-
}
|
|
624
|
-
break;
|
|
625
|
-
/* istanbul ignore next */
|
|
626
|
-
default:
|
|
627
|
-
break;
|
|
628
|
-
}
|
|
629
|
-
}
|
|
609
|
+
this.handleResizeKeyDown(event);
|
|
610
|
+
};
|
|
611
|
+
SkyFlyoutComponent.prototype.onResizeHandleKeyDown = function (event) {
|
|
612
|
+
this.handleResizeKeyDown(event);
|
|
630
613
|
};
|
|
631
614
|
SkyFlyoutComponent.prototype.onResizeHandleMouseDown = function (event) {
|
|
632
615
|
var _this = this;
|
|
@@ -791,14 +774,50 @@
|
|
|
791
774
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
792
775
|
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
793
776
|
};
|
|
777
|
+
SkyFlyoutComponent.prototype.handleResizeKeyDown = function (event) {
|
|
778
|
+
/* istanbul ignore else */
|
|
779
|
+
if (event.key) {
|
|
780
|
+
var keyPressed = event.key.toLowerCase().replace('arrow', '');
|
|
781
|
+
switch (keyPressed) {
|
|
782
|
+
case 'enter':
|
|
783
|
+
case ' ':
|
|
784
|
+
this.resizeKeyControlActive = !this.resizeKeyControlActive;
|
|
785
|
+
break;
|
|
786
|
+
case 'tab':
|
|
787
|
+
/* istanbul ignore else */
|
|
788
|
+
if (this.resizeKeyControlActive) {
|
|
789
|
+
this.resizeKeyControlActive = false;
|
|
790
|
+
}
|
|
791
|
+
case 'left':
|
|
792
|
+
if (this.resizeKeyControlActive) {
|
|
793
|
+
/* istanbul ignore else */
|
|
794
|
+
if (this.flyoutWidth < this.config.maxWidth) {
|
|
795
|
+
this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
break;
|
|
799
|
+
case 'right':
|
|
800
|
+
if (this.resizeKeyControlActive) {
|
|
801
|
+
/* istanbul ignore else */
|
|
802
|
+
if (this.flyoutWidth > this.config.minWidth) {
|
|
803
|
+
this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
break;
|
|
807
|
+
/* istanbul ignore next */
|
|
808
|
+
default:
|
|
809
|
+
break;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
};
|
|
794
813
|
return SkyFlyoutComponent;
|
|
795
814
|
}());
|
|
796
|
-
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
797
|
-
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
815
|
+
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
816
|
+
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
798
817
|
SkyFlyoutAdapterService,
|
|
799
818
|
SkyFlyoutMediaQueryService,
|
|
800
819
|
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
801
|
-
], 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>\n <
|
|
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>\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\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 >\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\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: 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: i9__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: [
|
|
802
821
|
animations.trigger('flyoutState', [
|
|
803
822
|
animations.state(FLYOUT_OPEN_STATE, animations.style({ transform: 'initial' })),
|
|
804
823
|
animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
|
|
@@ -809,11 +828,11 @@
|
|
|
809
828
|
animations.transition("* <=> *", animations.animate('250ms ease-in')),
|
|
810
829
|
]),
|
|
811
830
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
|
|
812
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
831
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
|
|
813
832
|
type: i0.Component,
|
|
814
833
|
args: [{
|
|
815
834
|
selector: 'sky-flyout',
|
|
816
|
-
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>\n <
|
|
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>\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\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 >\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\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",
|
|
817
836
|
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"],
|
|
818
837
|
providers: [
|
|
819
838
|
SkyFlyoutAdapterService,
|
|
@@ -862,38 +881,38 @@
|
|
|
862
881
|
}
|
|
863
882
|
return SkyFlyoutModule;
|
|
864
883
|
}());
|
|
865
|
-
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
866
|
-
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
867
|
-
|
|
884
|
+
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
885
|
+
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [i7.CommonModule,
|
|
886
|
+
forms.FormsModule,
|
|
868
887
|
i2$2.RouterModule,
|
|
869
888
|
i2.SkyI18nModule,
|
|
870
889
|
i1$1.SkyIconModule,
|
|
871
890
|
SkyFlyoutResourcesModule,
|
|
872
891
|
i2$1.SkyThemeModule,
|
|
873
|
-
|
|
874
|
-
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
892
|
+
i9.SkyHrefModule], exports: [SkyFlyoutComponent] });
|
|
893
|
+
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
|
|
875
894
|
i7.CommonModule,
|
|
876
|
-
|
|
895
|
+
forms.FormsModule,
|
|
877
896
|
i2$2.RouterModule,
|
|
878
897
|
i2.SkyI18nModule,
|
|
879
898
|
i1$1.SkyIconModule,
|
|
880
899
|
SkyFlyoutResourcesModule,
|
|
881
900
|
i2$1.SkyThemeModule,
|
|
882
|
-
|
|
901
|
+
i9.SkyHrefModule,
|
|
883
902
|
]] });
|
|
884
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
903
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutModule, decorators: [{
|
|
885
904
|
type: i0.NgModule,
|
|
886
905
|
args: [{
|
|
887
906
|
declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
|
|
888
907
|
imports: [
|
|
889
908
|
i7.CommonModule,
|
|
890
|
-
|
|
909
|
+
forms.FormsModule,
|
|
891
910
|
i2$2.RouterModule,
|
|
892
911
|
i2.SkyI18nModule,
|
|
893
912
|
i1$1.SkyIconModule,
|
|
894
913
|
SkyFlyoutResourcesModule,
|
|
895
914
|
i2$1.SkyThemeModule,
|
|
896
|
-
|
|
915
|
+
i9.SkyHrefModule,
|
|
897
916
|
],
|
|
898
917
|
exports: [SkyFlyoutComponent],
|
|
899
918
|
entryComponents: [SkyFlyoutComponent],
|
|
@@ -1040,9 +1059,9 @@
|
|
|
1040
1059
|
};
|
|
1041
1060
|
return SkyFlyoutService;
|
|
1042
1061
|
}());
|
|
1043
|
-
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1044
|
-
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1045
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1062
|
+
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyDynamicComponentService }, { token: i2__namespace$2.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1063
|
+
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutService, providedIn: 'any' });
|
|
1064
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyFlyoutService, decorators: [{
|
|
1046
1065
|
type: i0.Injectable,
|
|
1047
1066
|
args: [{
|
|
1048
1067
|
providedIn: 'any',
|