@danske/sapphire-angular 1.20.2 → 1.21.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/esm2020/lib/common/public_api.mjs +3 -1
- package/esm2020/lib/contextual-help/src/contextual-help.component.mjs +1 -1
- package/esm2020/lib/field/src/field-error.directive.mjs +20 -4
- package/esm2020/lib/field/src/field-note.directive.mjs +20 -4
- package/esm2020/lib/listbox/src/listbox.component.mjs +2 -2
- package/esm2020/lib/menu/src/menu.component.mjs +2 -2
- package/esm2020/lib/popover/src/popover.component.mjs +19 -4
- package/esm2020/lib/select/src/basic-select/basic-select.component.mjs +1 -1
- package/esm2020/lib/select/src/select/select.component.mjs +3 -3
- package/esm2020/lib/text-field/src/text-field-input.directive.mjs +13 -7
- package/esm2020/lib/theme/src/themes.mjs +4 -4
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/danske-sapphire-angular.mjs +74 -24
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +72 -24
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/common/public_api.d.ts +2 -0
- package/lib/field/src/field-error.directive.d.ts +6 -1
- package/lib/field/src/field-note.directive.d.ts +6 -1
- package/lib/popover/src/popover.component.d.ts +5 -1
- package/lib/text-field/src/text-field-input.directive.d.ts +4 -2
- package/package.json +3 -3
- package/public-api.d.ts +1 -0
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
// Exported just for the issue with vscode
|
|
2
2
|
export { ScrollMonitorDirective } from './scroll-monitor.directive';
|
|
3
3
|
export { UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider, } from './sapphire-view-encapsulation';
|
|
4
|
-
|
|
4
|
+
export { PressedDirective } from './pressed.directive';
|
|
5
|
+
export { FocusedDirective } from './focused.directive';
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tbW9uL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMENBQTBDO0FBQzFDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFDTCxrQkFBa0IsRUFDbEIsd0JBQXdCLEVBQ3hCLHlCQUF5QixHQUMxQixNQUFNLCtCQUErQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gRXhwb3J0ZWQganVzdCBmb3IgdGhlIGlzc3VlIHdpdGggdnNjb2RlXG5leHBvcnQgeyBTY3JvbGxNb25pdG9yRGlyZWN0aXZlIH0gZnJvbSAnLi9zY3JvbGwtbW9uaXRvci5kaXJlY3RpdmUnO1xuZXhwb3J0IHtcbiAgVXNlQ29tcG9uZW50U3R5bGVzLFxuICBVc2VDb21wb25lbnRTdHlsZXNPbkhvc3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uUHJvdmlkZXIsXG59IGZyb20gJy4vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcbmV4cG9ydCB7IFByZXNzZWREaXJlY3RpdmUgfSBmcm9tICcuL3ByZXNzZWQuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZvY3VzZWREaXJlY3RpdmUgfSBmcm9tICcuL2ZvY3VzZWQuZGlyZWN0aXZlJztcbiJdfQ==
|
|
@@ -80,7 +80,7 @@ export class ContextualHelpComponent {
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
ContextualHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: i1.HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: i2.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: i3.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: i4.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus"] }, { kind: "directive", type: i5.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i6.PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
83
|
+
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: i1.HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: i2.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: i3.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: i4.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: i5.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i6.PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
86
|
args: [{ selector: 'sp-contextual-help', standalone: true, imports: [
|
|
@@ -1,12 +1,24 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { Directive, HostBinding, Input } from '@angular/core';
|
|
3
|
+
import { AutoId } from '../../common/auto-id.decorator';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
/**
|
|
4
6
|
* Used inside sp-field to provide an error message for the field.
|
|
5
7
|
*/
|
|
6
8
|
export class FieldErrorDirective {
|
|
9
|
+
constructor() {
|
|
10
|
+
/**
|
|
11
|
+
* A unique id for the host DOM element.
|
|
12
|
+
* If none is supplied, it will be auto-generated.
|
|
13
|
+
*/
|
|
14
|
+
this.id = '';
|
|
15
|
+
}
|
|
7
16
|
}
|
|
8
17
|
FieldErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
-
FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", host: { classAttribute: "sapphire-field__note" }, ngImport: i0 });
|
|
18
|
+
FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", inputs: { id: "id" }, host: { properties: { "id": "this.id" }, classAttribute: "sapphire-field__note" }, ngImport: i0 });
|
|
19
|
+
__decorate([
|
|
20
|
+
AutoId()
|
|
21
|
+
], FieldErrorDirective.prototype, "id", void 0);
|
|
10
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldErrorDirective, decorators: [{
|
|
11
23
|
type: Directive,
|
|
12
24
|
args: [{
|
|
@@ -16,5 +28,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
16
28
|
class: 'sapphire-field__note',
|
|
17
29
|
},
|
|
18
30
|
}]
|
|
19
|
-
}]
|
|
20
|
-
|
|
31
|
+
}], propDecorators: { id: [{
|
|
32
|
+
type: HostBinding
|
|
33
|
+
}, {
|
|
34
|
+
type: Input
|
|
35
|
+
}] } });
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQtZXJyb3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9maWVsZC9zcmMvZmllbGQtZXJyb3IuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdDQUFnQyxDQUFDOztBQUV4RDs7R0FFRztBQVFILE1BQU0sT0FBTyxtQkFBbUI7SUFQaEM7UUFRRTs7O1dBR0c7UUFJSCxPQUFFLEdBQUcsRUFBRSxDQUFDO0tBQ1Q7O2dIQVRZLG1CQUFtQjtvR0FBbkIsbUJBQW1CO0FBUTlCO0lBREMsTUFBTSxFQUFFOytDQUNEOzJGQVJHLG1CQUFtQjtrQkFQL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxzQkFBc0I7cUJBQzlCO2lCQUNGOzhCQVNDLEVBQUU7c0JBSEQsV0FBVzs7c0JBQ1gsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBdXRvSWQgfSBmcm9tICcuLi8uLi9jb21tb24vYXV0by1pZC5kZWNvcmF0b3InO1xuXG4vKipcbiAqIFVzZWQgaW5zaWRlIHNwLWZpZWxkIHRvIHByb3ZpZGUgYW4gZXJyb3IgbWVzc2FnZSBmb3IgdGhlIGZpZWxkLlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdzcC1maWVsZC1lcnJvcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3NhcHBoaXJlLWZpZWxkX19ub3RlJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgRmllbGRFcnJvckRpcmVjdGl2ZSB7XG4gIC8qKlxuICAgKiBBIHVuaXF1ZSBpZCBmb3IgdGhlIGhvc3QgRE9NIGVsZW1lbnQuXG4gICAqIElmIG5vbmUgaXMgc3VwcGxpZWQsIGl0IHdpbGwgYmUgYXV0by1nZW5lcmF0ZWQuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoKVxuICBASW5wdXQoKVxuICBAQXV0b0lkKClcbiAgaWQgPSAnJztcbn1cbiJdfQ==
|
|
@@ -1,17 +1,33 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { Directive, HostBinding, Input } from '@angular/core';
|
|
3
|
+
import { AutoId } from '../../common/auto-id.decorator';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
/**
|
|
4
6
|
* Used inside field to provide a note for the field.
|
|
5
7
|
*/
|
|
6
8
|
export class FieldNoteDirective {
|
|
9
|
+
constructor() {
|
|
10
|
+
/**
|
|
11
|
+
* A unique id for the host DOM element.
|
|
12
|
+
* If none is supplied, it will be auto-generated.
|
|
13
|
+
*/
|
|
14
|
+
this.id = '';
|
|
15
|
+
}
|
|
7
16
|
}
|
|
8
17
|
FieldNoteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldNoteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
-
FieldNoteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldNoteDirective, isStandalone: true, selector: "sp-field-note", ngImport: i0 });
|
|
18
|
+
FieldNoteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldNoteDirective, isStandalone: true, selector: "sp-field-note", inputs: { id: "id" }, host: { properties: { "id": "this.id" } }, ngImport: i0 });
|
|
19
|
+
__decorate([
|
|
20
|
+
AutoId()
|
|
21
|
+
], FieldNoteDirective.prototype, "id", void 0);
|
|
10
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldNoteDirective, decorators: [{
|
|
11
23
|
type: Directive,
|
|
12
24
|
args: [{
|
|
13
25
|
selector: 'sp-field-note',
|
|
14
26
|
standalone: true,
|
|
15
27
|
}]
|
|
16
|
-
}]
|
|
17
|
-
|
|
28
|
+
}], propDecorators: { id: [{
|
|
29
|
+
type: HostBinding
|
|
30
|
+
}, {
|
|
31
|
+
type: Input
|
|
32
|
+
}] } });
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQtbm90ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2ZpZWxkL3NyYy9maWVsZC1ub3RlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUFFeEQ7O0dBRUc7QUFLSCxNQUFNLE9BQU8sa0JBQWtCO0lBSi9CO1FBS0U7OztXQUdHO1FBSUgsT0FBRSxHQUFHLEVBQUUsQ0FBQztLQUNUOzsrR0FUWSxrQkFBa0I7bUdBQWxCLGtCQUFrQjtBQVE3QjtJQURDLE1BQU0sRUFBRTs4Q0FDRDsyRkFSRyxrQkFBa0I7a0JBSjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkFTQyxFQUFFO3NCQUhELFdBQVc7O3NCQUNYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXV0b0lkIH0gZnJvbSAnLi4vLi4vY29tbW9uL2F1dG8taWQuZGVjb3JhdG9yJztcblxuLyoqXG4gKiBVc2VkIGluc2lkZSBmaWVsZCB0byBwcm92aWRlIGEgbm90ZSBmb3IgdGhlIGZpZWxkLlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdzcC1maWVsZC1ub3RlJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgRmllbGROb3RlRGlyZWN0aXZlIHtcbiAgLyoqXG4gICAqIEEgdW5pcXVlIGlkIGZvciB0aGUgaG9zdCBET00gZWxlbWVudC5cbiAgICogSWYgbm9uZSBpcyBzdXBwbGllZCwgaXQgd2lsbCBiZSBhdXRvLWdlbmVyYXRlZC5cbiAgICovXG4gIEBIb3N0QmluZGluZygpXG4gIEBJbnB1dCgpXG4gIEBBdXRvSWQoKVxuICBpZCA9ICcnO1xufVxuIl19
|
|
@@ -210,7 +210,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
210
210
|
useExisting: forwardRef(() => ListboxComponent),
|
|
211
211
|
},
|
|
212
212
|
ViewEncapsulationProvider,
|
|
213
|
-
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;
|
|
213
|
+
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i2.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: i3.CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: i4.ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
|
|
214
214
|
__decorate([
|
|
215
215
|
CoerceBoolean
|
|
216
216
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -236,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
236
236
|
], host: {
|
|
237
237
|
'[attr.aria-label]': 'null',
|
|
238
238
|
'[attr.aria-labelledby]': 'null',
|
|
239
|
-
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;
|
|
239
|
+
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"] }]
|
|
240
240
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedValues: [{
|
|
241
241
|
type: Input
|
|
242
242
|
}], selectedValuesChange: [{
|
|
@@ -13,7 +13,7 @@ export class MenuComponent {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
-
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1.CdkMenu, outputs: ["closed", "closed"] }, { directive: i2.ThemeCheckDirective }, { directive: i3.UseComponentStylesOnHost }], ngImport: i0, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;
|
|
16
|
+
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1.CdkMenu, outputs: ["closed", "closed"] }, { directive: i2.ThemeCheckDirective }, { directive: i3.UseComponentStylesOnHost }], ngImport: i0, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] });
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -26,7 +26,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
26
26
|
// custom class to the cdk overlay pane element.
|
|
27
27
|
'[class.sapphire-popover]': 'true',
|
|
28
28
|
'[class.sapphire-popover--max-width]': 'true',
|
|
29
|
-
}, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;
|
|
29
|
+
}, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
30
30
|
}], propDecorators: { size: [{
|
|
31
31
|
type: Input
|
|
32
32
|
}] } });
|
|
@@ -23,6 +23,10 @@ export class PopoverComponent {
|
|
|
23
23
|
* Whether the default behavior of moving focus to the popover content upon open should be disabled
|
|
24
24
|
*/
|
|
25
25
|
this.noAutoFocus = false;
|
|
26
|
+
/**
|
|
27
|
+
* Wheter the popover traps the focus inside.
|
|
28
|
+
*/
|
|
29
|
+
this.trapFocus = false;
|
|
26
30
|
this.ID = `sp-popover-${Math.floor(Math.random() * 1000000000)}`;
|
|
27
31
|
/**
|
|
28
32
|
* Keeps track of if the content is focused
|
|
@@ -55,8 +59,14 @@ export class PopoverComponent {
|
|
|
55
59
|
*
|
|
56
60
|
* In addition to those scenarios, the focused element may get disabled in the popover,
|
|
57
61
|
* which moves the focus to body.
|
|
62
|
+
*
|
|
63
|
+
* contentFocused might have changed before timeout rad but we only care
|
|
64
|
+
* in case trapFocus is true. If that's the case, we don't want
|
|
65
|
+
* to close the popover if anything moved the focus inside before the
|
|
66
|
+
* timeout ran.
|
|
58
67
|
*/
|
|
59
|
-
|
|
68
|
+
(!this.trapFocus || !this.contentFocused) &&
|
|
69
|
+
document.activeElement !== document.body &&
|
|
60
70
|
!this.trigger?.elementRef.nativeElement.contains(document.activeElement)) {
|
|
61
71
|
this.trigger?.close();
|
|
62
72
|
}
|
|
@@ -65,7 +75,7 @@ export class PopoverComponent {
|
|
|
65
75
|
}
|
|
66
76
|
}
|
|
67
77
|
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: POPOVER_TRIGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
-
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.ThemeCheckDirective }, { directive: i2.UseComponentStylesOnHost }], ngImport: i0, template: "<!--\
|
|
78
|
+
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.ThemeCheckDirective }, { directive: i2.UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
69
79
|
__decorate([
|
|
70
80
|
CoerceBoolean
|
|
71
81
|
], PopoverComponent.prototype, "noPadding", void 0);
|
|
@@ -75,6 +85,9 @@ __decorate([
|
|
|
75
85
|
__decorate([
|
|
76
86
|
CoerceBoolean
|
|
77
87
|
], PopoverComponent.prototype, "noAutoFocus", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
CoerceBoolean
|
|
90
|
+
], PopoverComponent.prototype, "trapFocus", void 0);
|
|
78
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
79
92
|
type: Component,
|
|
80
93
|
args: [{ selector: 'sp-popover', host: {
|
|
@@ -82,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
82
95
|
'[class.sapphire-popover--padded]': '!noPadding',
|
|
83
96
|
'[class.sapphire-popover--max-width]': '!noMaxWidth',
|
|
84
97
|
role: 'presentation',
|
|
85
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\
|
|
98
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"] }]
|
|
86
99
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
87
100
|
type: Optional
|
|
88
101
|
}, {
|
|
@@ -100,8 +113,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
100
113
|
args: ['contentWrapper', { read: ElementRef }]
|
|
101
114
|
}], noAutoFocus: [{
|
|
102
115
|
type: Input
|
|
116
|
+
}], trapFocus: [{
|
|
117
|
+
type: Input
|
|
103
118
|
}], handleEscape: [{
|
|
104
119
|
type: HostListener,
|
|
105
120
|
args: ['keydown.Escape', ['$event']]
|
|
106
121
|
}] } });
|
|
107
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
122
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3BvcG92ZXIvc3JjL3BvcG92ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9wb3BvdmVyL3NyYy9wb3BvdmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsUUFBUSxFQUNSLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFJdkQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxlQUFlLEVBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sMENBQTBDLENBQUM7Ozs7O0FBRXBGOzs7OztHQUtHO0FBYUgsTUFBTSxPQUFPLGdCQUFnQjtJQW1DM0IsWUFDK0MsT0FBd0I7UUFBeEIsWUFBTyxHQUFQLE9BQU8sQ0FBaUI7UUF0QnZFOztXQUVHO1FBR0gsZ0JBQVcsR0FBaUIsS0FBSyxDQUFDO1FBRWxDOztXQUVHO1FBR0gsY0FBUyxHQUFpQixLQUFLLENBQUM7UUFFaEMsT0FBRSxHQUFXLGNBQWMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsVUFBVSxDQUFDLEVBQUUsQ0FBQztRQUVwRTs7V0FFRztRQUNLLG1CQUFjLEdBQUcsS0FBSyxDQUFDO0lBSTVCLENBQUM7SUFFSixlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQzdDLElBQUksQ0FBQyxjQUFjLEVBQUUsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQzVDO0lBQ0gsQ0FBQztJQUdPLFlBQVksQ0FBQyxLQUFvQjtRQUN2QyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQzFCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQztJQUVELG9CQUFvQixDQUFDLE1BQW1CO1FBQ3RDLElBQUksQ0FBQyxjQUFjLEdBQUcsTUFBTSxJQUFJLElBQUksQ0FBQztRQUVyQyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN4QiwyRkFBMkY7WUFDM0YsMkZBQTJGO1lBQzNGLGdCQUFnQjtZQUNoQixVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkO2dCQUNFOzs7Ozs7Ozs7Ozs7bUJBWUc7Z0JBQ0gsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDO29CQUN6QyxRQUFRLENBQUMsYUFBYSxLQUFLLFFBQVEsQ0FBQyxJQUFJO29CQUN4QyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQzlDLFFBQVEsQ0FBQyxhQUFhLENBQ3ZCLEVBQ0Q7b0JBQ0EsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsQ0FBQztpQkFDdkI7WUFDSCxDQUFDLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQzs7NkdBckZVLGdCQUFnQixrQkFvQ0wsZUFBZTtpR0FwQzFCLGdCQUFnQix3Y0FTYixxQkFBcUIsNklBRUUsVUFBVSxrSUNsRGpELHlxQkF3QkE7QURrQkU7SUFEQyxhQUFhO21EQUNVO0FBSXhCO0lBREMsYUFBYTtvREFDVztBQVl6QjtJQURDLGFBQWE7cURBQ29CO0FBT2xDO0lBREMsYUFBYTttREFDa0I7MkZBMUJyQixnQkFBZ0I7a0JBWjVCLFNBQVM7K0JBQ0UsWUFBWSxRQUdoQjt3QkFDSiwwQkFBMEIsRUFBRSxNQUFNO3dCQUNsQyxrQ0FBa0MsRUFBRSxZQUFZO3dCQUNoRCxxQ0FBcUMsRUFBRSxhQUFhO3dCQUNwRCxJQUFJLEVBQUUsY0FBYztxQkFDckIsa0JBQ2UsQ0FBQyxtQkFBbUIsRUFBRSx3QkFBd0IsQ0FBQzs7MEJBc0M1RCxRQUFROzswQkFBSSxNQUFNOzJCQUFDLGVBQWU7NENBakNyQyxTQUFTO3NCQUZSLEtBQUs7Z0JBTU4sVUFBVTtzQkFGVCxLQUFLO2dCQUkrQixLQUFLO3NCQUF6QyxZQUFZO3VCQUFDLHFCQUFxQjtnQkFHM0IsY0FBYztzQkFEckIsU0FBUzt1QkFBQyxnQkFBZ0IsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBUWpELFdBQVc7c0JBRlYsS0FBSztnQkFTTixTQUFTO3NCQUZSLEtBQUs7Z0JBc0JFLFlBQVk7c0JBRG5CLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPcHRpb25hbCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGhhc01vZGlmaWVyS2V5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2tleWNvZGVzJztcbmltcG9ydCB7IEZvY3VzT3JpZ2luIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuaW1wb3J0IHsgVGhlbWVDaGVja0RpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL3RoZW1lL3NyYy90aGVtZS1jaGVjay5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQ29lcmNlQm9vbGVhbiB9IGZyb20gJy4uLy4uL2NvbW1vbi9jb2VyY2UtYm9vbGVhbi5kZWNvcmF0b3InO1xuaW1wb3J0IHsgUE9QT1ZFUl9UUklHR0VSLCBQb3BvdmVyVHJpZ2dlciB9IGZyb20gJy4vcG9wb3Zlci10cmlnZ2VyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBQb3BvdmVyVGl0bGVEaXJlY3RpdmUgfSBmcm9tICcuL3BvcG92ZXItdGl0bGUuZGlyZWN0aXZlJztcbmltcG9ydCB7IFVzZUNvbXBvbmVudFN0eWxlc09uSG9zdCB9IGZyb20gJy4uLy4uL2NvbW1vbi9zYXBwaGlyZS12aWV3LWVuY2Fwc3VsYXRpb24nO1xuXG4vKipcbiAqIEEgZ2VuZXJpYyBwb3BvdmVyIGNvbXBvbmVudCB3aGljaCBsZXRzIHlvdSByZW5kZXIgYXJiaXRyYXJ5XG4gKiBjb250ZW50IGluIGEgcG9wb3ZlciBvdmVybGF5IHdoaWNoIGlzIGxpbmtlZCB0byBhIHRyaWdnZXIsIGFuZCBpcyBhY2Nlc3NpYmxlXG4gKiBhc1xuICogW2RpYWxvZ10oaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQWNjZXNzaWJpbGl0eS9BUklBL1JvbGVzL2RpYWxvZ19yb2xlKS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtcG9wb3ZlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wb3BvdmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcG9wb3Zlci5jb21wb25lbnQuc2NzcyddLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1wb3BvdmVyXSc6ICd0cnVlJyxcbiAgICAnW2NsYXNzLnNhcHBoaXJlLXBvcG92ZXItLXBhZGRlZF0nOiAnIW5vUGFkZGluZycsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1wb3BvdmVyLS1tYXgtd2lkdGhdJzogJyFub01heFdpZHRoJyxcbiAgICByb2xlOiAncHJlc2VudGF0aW9uJyxcbiAgfSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtUaGVtZUNoZWNrRGlyZWN0aXZlLCBVc2VDb21wb25lbnRTdHlsZXNPbkhvc3RdLFxufSlcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIG5vUGFkZGluZzogQm9vbGVhbklucHV0O1xuXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIG5vTWF4V2lkdGg6IEJvb2xlYW5JbnB1dDtcblxuICBAQ29udGVudENoaWxkKFBvcG92ZXJUaXRsZURpcmVjdGl2ZSkgdGl0bGU/OiBQb3BvdmVyVGl0bGVEaXJlY3RpdmU7XG5cbiAgQFZpZXdDaGlsZCgnY29udGVudFdyYXBwZXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSlcbiAgcHJpdmF0ZSBjb250ZW50V3JhcHBlcj86IEVsZW1lbnRSZWY7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIGRlZmF1bHQgYmVoYXZpb3Igb2YgbW92aW5nIGZvY3VzIHRvIHRoZSBwb3BvdmVyIGNvbnRlbnQgdXBvbiBvcGVuIHNob3VsZCBiZSBkaXNhYmxlZFxuICAgKi9cbiAgQElucHV0KClcbiAgQENvZXJjZUJvb2xlYW5cbiAgbm9BdXRvRm9jdXM6IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBXaGV0ZXIgdGhlIHBvcG92ZXIgdHJhcHMgdGhlIGZvY3VzIGluc2lkZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIHRyYXBGb2N1czogQm9vbGVhbklucHV0ID0gZmFsc2U7XG5cbiAgSUQ6IHN0cmluZyA9IGBzcC1wb3BvdmVyLSR7TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTAwMDAwMDAwMCl9YDtcblxuICAvKipcbiAgICogS2VlcHMgdHJhY2sgb2YgaWYgdGhlIGNvbnRlbnQgaXMgZm9jdXNlZFxuICAgKi9cbiAgcHJpdmF0ZSBjb250ZW50Rm9jdXNlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoUE9QT1ZFUl9UUklHR0VSKSBwcml2YXRlIHRyaWdnZXI/OiBQb3BvdmVyVHJpZ2dlclxuICApIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5jb250ZW50Rm9jdXNlZCAmJiAhdGhpcy5ub0F1dG9Gb2N1cykge1xuICAgICAgdGhpcy5jb250ZW50V3JhcHBlcj8ubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uRXNjYXBlJywgWyckZXZlbnQnXSlcbiAgcHJpdmF0ZSBoYW5kbGVFc2NhcGUoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAoIWhhc01vZGlmaWVyS2V5KGV2ZW50KSkge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIHRoaXMudHJpZ2dlcj8uY2xvc2UoKTtcbiAgICB9XG4gIH1cblxuICBfY29udGVudEZvY3VzQ2hhbmdlZChvcmlnaW46IEZvY3VzT3JpZ2luKSB7XG4gICAgdGhpcy5jb250ZW50Rm9jdXNlZCA9IG9yaWdpbiAhPSBudWxsO1xuXG4gICAgaWYgKCF0aGlzLmNvbnRlbnRGb2N1c2VkKSB7XG4gICAgICAvLyBjZGtGb2N1c0NoYW5nZSBkb2Vzbid0IGdpdmUgYWNjZXNzIHRvIHRoZSBuYXRpdmUgZXZlbnQsIHNvIHdlIGNhbid0IGZpZ3VyZSBvdXQgd2hlcmUgdGhlXG4gICAgICAvLyBmb2N1cyBpcyBnb2luZy4gU28gd2UgYXN5bmNocm9ub3VzbHkgY2hlY2sgaWYgdGhlIGZvY3VzIGlzIG91dHNpZGUgdGhlIHRyaWdnZXIgYW5kIGNsb3NlXG4gICAgICAvLyBpbiB0aGF0IGNhc2UuXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgaWYgKFxuICAgICAgICAgIC8qKlxuICAgICAgICAgICAqIElmIHRoZSBmb2N1cyBpcyBnb2luZyB0byBib2R5LCBkb24ndCBjbG9zZSB0aGUgcG9wb3Zlci5cbiAgICAgICAgICAgKiBzaW1pbGFyIGNvbnNpZGVyYXRpb24gaW4gcmVhY3QtYXJpYSdzIHVzZU92ZXJsYXk6XG4gICAgICAgICAgICogaHR0cHM6Ly9naXRodWIuY29tL2Fkb2JlL3JlYWN0LXNwZWN0cnVtL2Jsb2IvMmJkYTRjOTcxZGQ1NTdiZTdlY2M0NDYxNDU2OWE4MjgxZTZjYjZkZC9wYWNrYWdlcy8lNDByZWFjdC1hcmlhL292ZXJsYXlzL3NyYy91c2VPdmVybGF5LnRzI0wxMjgtTDEzMFxuICAgICAgICAgICAqXG4gICAgICAgICAgICogSW4gYWRkaXRpb24gdG8gdGhvc2Ugc2NlbmFyaW9zLCB0aGUgZm9jdXNlZCBlbGVtZW50IG1heSBnZXQgZGlzYWJsZWQgaW4gdGhlIHBvcG92ZXIsXG4gICAgICAgICAgICogd2hpY2ggbW92ZXMgdGhlIGZvY3VzIHRvIGJvZHkuXG4gICAgICAgICAgICpcbiAgICAgICAgICAgKiBjb250ZW50Rm9jdXNlZCBtaWdodCBoYXZlIGNoYW5nZWQgYmVmb3JlIHRpbWVvdXQgcmFkIGJ1dCB3ZSBvbmx5IGNhcmVcbiAgICAgICAgICAgKiBpbiBjYXNlIHRyYXBGb2N1cyBpcyB0cnVlLiBJZiB0aGF0J3MgdGhlIGNhc2UsIHdlIGRvbid0IHdhbnRcbiAgICAgICAgICAgKiB0byBjbG9zZSB0aGUgcG9wb3ZlciBpZiBhbnl0aGluZyBtb3ZlZCB0aGUgZm9jdXMgaW5zaWRlIGJlZm9yZSB0aGVcbiAgICAgICAgICAgKiB0aW1lb3V0IHJhbi5cbiAgICAgICAgICAgKi9cbiAgICAgICAgICAoIXRoaXMudHJhcEZvY3VzIHx8ICF0aGlzLmNvbnRlbnRGb2N1c2VkKSAmJlxuICAgICAgICAgIGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQgIT09IGRvY3VtZW50LmJvZHkgJiZcbiAgICAgICAgICAhdGhpcy50cmlnZ2VyPy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoXG4gICAgICAgICAgICBkb2N1bWVudC5hY3RpdmVFbGVtZW50XG4gICAgICAgICAgKVxuICAgICAgICApIHtcbiAgICAgICAgICB0aGlzLnRyaWdnZXI/LmNsb3NlKCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPCEtLVxuIE5PVEU6IGNka1RyYXBGb2N1cyBpcyByZXF1aXJlZCBmb3IgY2RrVHJhcEZvY3VzQXV0b0NhcHR1cmUgdG8gd29yaywgd2hpY2ggd291bGQgYmUgc2ltaWxhciB0b1xuIDxGb2N1c1Njb3BlIGF1dG9Gb2N1cyAvPiBpbiByZWFjdC1hcmlhLlxuXG4gSXQgcHJldmVudHMgZm9jdXMgZnJvbSBnb2luZyBvdXQgb2YgcG9wb3ZlciBieSBicmluZ2luZyBpdCBiYWNrIHRvIHRoZSBmaXJzdFxuIGZvY3VzYWJsZSBlbGVtZW50LlxuXG4gV2Ugc29tZXRpbWVzIGNvdW50ZXIgdGhpcyBpbiAoY2RrRm9jdXNDaGFuZ2UpIGFuZCBzb21ldGltZXMgZG9uJ3QsIGJhc2VkIG9uXG4gdGhlIFwidHJhcEZvY3VzXCIgaW5wdXQuXG4gIC0tPlxuPGRpdlxuICAjY29udGVudFdyYXBwZXJcbiAgW2lkXT1cIklEXCJcbiAgcm9sZT1cImRpYWxvZ1wiXG4gIHRhYmluZGV4PVwiLTFcIlxuICBjZGtNb25pdG9yU3VidHJlZUZvY3VzXG4gIGNka1RyYXBGb2N1c1xuICBbY2RrVHJhcEZvY3VzQXV0b0NhcHR1cmVdPVwiIW5vQXV0b0ZvY3VzXCJcbiAgY2xhc3M9XCJkaWFsb2dcIlxuICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwidGl0bGU/LklEXCJcbiAgKGNka0ZvY3VzQ2hhbmdlKT1cIl9jb250ZW50Rm9jdXNDaGFuZ2VkKCRldmVudClcIlxuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -92,7 +92,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
92
92
|
useExisting: forwardRef(() => BasicSelectComponent),
|
|
93
93
|
},
|
|
94
94
|
ViewEncapsulationProvider,
|
|
95
|
-
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant === 'primary' ? 'primary' : 'secondary'\"\n [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: i5.ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: i6.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus"] }, { kind: "directive", type: i7.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: i9.ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: i10.HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
95
|
+
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant === 'primary' ? 'primary' : 'secondary'\"\n [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: i5.ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: i6.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: i7.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: i9.ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: i10.HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
96
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
|
|
97
97
|
type: Component,
|
|
98
98
|
args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
|