@danske/sapphire-angular 3.5.0 → 3.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/field/src/field.component.mjs +8 -4
- package/esm2020/lib/label/src/label.component.mjs +3 -3
- package/esm2020/lib/list/src/list.component.mjs +2 -2
- package/esm2020/lib/listbox/i18n/da-DK.json +3 -0
- package/esm2020/lib/listbox/i18n/de-DE.json +3 -0
- package/esm2020/lib/listbox/i18n/en-US.json +3 -0
- package/esm2020/lib/listbox/i18n/fi-FI.json +3 -0
- package/esm2020/lib/listbox/i18n/index.mjs +19 -0
- package/esm2020/lib/listbox/i18n/nb-NO.json +3 -0
- package/esm2020/lib/listbox/i18n/pl-PL.json +3 -0
- package/esm2020/lib/listbox/i18n/sv-SE.json +3 -0
- package/esm2020/lib/listbox/src/listbox.component.mjs +34 -11
- package/esm2020/lib/menu/src/menu.component.mjs +2 -2
- package/esm2020/lib/modal/src/layout/modal-layout.component.mjs +2 -2
- package/esm2020/lib/modal/src/panel/panel.component.mjs +2 -2
- package/esm2020/lib/select/src/common/select-component-base.mjs +4 -2
- package/esm2020/lib/select/src/select/select.component.mjs +3 -3
- package/esm2020/lib/select/src/select-button/select-button.component.mjs +1 -1
- package/esm2020/lib/text-field/src/text-field.component.mjs +2 -2
- package/fesm2015/danske-sapphire-angular.mjs +119 -45
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +116 -44
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/field/src/field.component.d.ts +2 -1
- package/lib/listbox/i18n/index.d.ts +3 -0
- package/lib/listbox/src/listbox.component.d.ts +15 -3
- package/lib/select/src/common/select-component-base.d.ts +7 -1
- package/package.json +3 -3
|
@@ -7,7 +7,7 @@ import { __decorate } from 'tslib';
|
|
|
7
7
|
import DOMPurify from 'dompurify';
|
|
8
8
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
|
-
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, RequiredValidator } from '@angular/forms';
|
|
10
|
+
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, Validators, NgControl, RequiredValidator } from '@angular/forms';
|
|
11
11
|
import * as i2$1 from '@internationalized/message';
|
|
12
12
|
import { MessageDictionary, MessageFormatter } from '@internationalized/message';
|
|
13
13
|
import * as i1 from '@angular/cdk/portal';
|
|
@@ -19,7 +19,7 @@ import { iconCheckmarkOutline, iconWarning, iconError, iconCheckmark, iconChevro
|
|
|
19
19
|
import * as i1$1 from '@angular/cdk/menu';
|
|
20
20
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
|
|
21
21
|
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
22
|
-
import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
|
|
22
|
+
import { Subject, merge, combineLatest, empty as empty$7, fromEvent } from 'rxjs';
|
|
23
23
|
import { takeUntil, startWith, map } from 'rxjs/operators';
|
|
24
24
|
import * as i1$3 from '@angular/cdk/listbox';
|
|
25
25
|
import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
|
|
@@ -1127,48 +1127,48 @@ const AutoId = ({ prefix = 'generated' } = {}) => {
|
|
|
1127
1127
|
};
|
|
1128
1128
|
|
|
1129
1129
|
var optional$6 = "Valgfrit";
|
|
1130
|
-
var da$
|
|
1130
|
+
var da$3 = {
|
|
1131
1131
|
optional: optional$6
|
|
1132
1132
|
};
|
|
1133
1133
|
|
|
1134
1134
|
var optional$5 = "Optional";
|
|
1135
|
-
var en$
|
|
1135
|
+
var en$3 = {
|
|
1136
1136
|
optional: optional$5
|
|
1137
1137
|
};
|
|
1138
1138
|
|
|
1139
1139
|
var optional$4 = "Optional";
|
|
1140
|
-
var de$
|
|
1140
|
+
var de$3 = {
|
|
1141
1141
|
optional: optional$4
|
|
1142
1142
|
};
|
|
1143
1143
|
|
|
1144
1144
|
var optional$3 = "Valinnainen";
|
|
1145
|
-
var fi$
|
|
1145
|
+
var fi$3 = {
|
|
1146
1146
|
optional: optional$3
|
|
1147
1147
|
};
|
|
1148
1148
|
|
|
1149
1149
|
var optional$2 = "Valgfritt";
|
|
1150
|
-
var no$
|
|
1150
|
+
var no$3 = {
|
|
1151
1151
|
optional: optional$2
|
|
1152
1152
|
};
|
|
1153
1153
|
|
|
1154
1154
|
var optional$1 = "Opcjonalny";
|
|
1155
|
-
var pl$
|
|
1155
|
+
var pl$3 = {
|
|
1156
1156
|
optional: optional$1
|
|
1157
1157
|
};
|
|
1158
1158
|
|
|
1159
1159
|
var optional = "Valfritt";
|
|
1160
|
-
var se$
|
|
1160
|
+
var se$3 = {
|
|
1161
1161
|
optional: optional
|
|
1162
1162
|
};
|
|
1163
1163
|
|
|
1164
|
-
const translations$
|
|
1165
|
-
'da-DK': da$
|
|
1166
|
-
'en-US': en$
|
|
1167
|
-
'de-DE': de$
|
|
1168
|
-
'fi-FI': fi$
|
|
1169
|
-
'nb-NO': no$
|
|
1170
|
-
'pl-PL': pl$
|
|
1171
|
-
'sv-SE': se$
|
|
1164
|
+
const translations$3 = new MessageDictionary({
|
|
1165
|
+
'da-DK': da$3,
|
|
1166
|
+
'en-US': en$3,
|
|
1167
|
+
'de-DE': de$3,
|
|
1168
|
+
'fi-FI': fi$3,
|
|
1169
|
+
'nb-NO': no$3,
|
|
1170
|
+
'pl-PL': pl$3,
|
|
1171
|
+
'sv-SE': se$3,
|
|
1172
1172
|
}, 'en-US');
|
|
1173
1173
|
|
|
1174
1174
|
/**
|
|
@@ -1343,7 +1343,7 @@ class LabelComponent {
|
|
|
1343
1343
|
}
|
|
1344
1344
|
}
|
|
1345
1345
|
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1346
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LabelComponent, isStandalone: true, selector: "sp-label", inputs: { id: "id", for: "for", disabled: "disabled", necessityIndicator: "necessityIndicator", size: "size" }, outputs: { labelClick: "labelClick" }, providers: [{ provide: MessageDictionary, useValue: translations$
|
|
1346
|
+
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LabelComponent, isStandalone: true, selector: "sp-label", inputs: { id: "id", for: "for", disabled: "disabled", necessityIndicator: "necessityIndicator", size: "size" }, outputs: { labelClick: "labelClick" }, providers: [{ provide: MessageDictionary, useValue: translations$3 }], viewQueries: [{ propertyName: "labelElementRef", first: true, predicate: ["label"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <span class=\"sapphire-label__help-button\">\n <ng-content select=\"sp-help-button\"></ng-content>\n </span>\n</div>\n", styles: [".sapphire-label{min-height:var(--sapphire-semantic-size-height-control-xs);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-label-md)}.sapphire-label--md{font-size:var(--sapphire-semantic-size-font-label-sm);min-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-label__text{font-weight:var(--sapphire-semantic-font-weight-default-medium);color:var(--sapphire-semantic-color-foreground-primary);vertical-align:middle}.sapphire-label__required-indicator{background-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A\");width:8px;height:8px;margin-left:var(--sapphire-semantic-size-spacing-3xs);display:inline-block}.sapphire-label__optional-indicator{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label__help-button{margin-left:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label__help-button:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "t" }] });
|
|
1347
1347
|
__decorate([
|
|
1348
1348
|
AutoId()
|
|
1349
1349
|
], LabelComponent.prototype, "id", void 0);
|
|
@@ -1352,7 +1352,7 @@ __decorate([
|
|
|
1352
1352
|
], LabelComponent.prototype, "disabled", void 0);
|
|
1353
1353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: LabelComponent, decorators: [{
|
|
1354
1354
|
type: Component,
|
|
1355
|
-
args: [{ selector: 'sp-label', standalone: true, imports: [NgIf, TranslatePipe], providers: [{ provide: MessageDictionary, useValue: translations$
|
|
1355
|
+
args: [{ selector: 'sp-label', standalone: true, imports: [NgIf, TranslatePipe], providers: [{ provide: MessageDictionary, useValue: translations$3 }], template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <span class=\"sapphire-label__help-button\">\n <ng-content select=\"sp-help-button\"></ng-content>\n </span>\n</div>\n", styles: [".sapphire-label{min-height:var(--sapphire-semantic-size-height-control-xs);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-label-md)}.sapphire-label--md{font-size:var(--sapphire-semantic-size-font-label-sm);min-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-label__text{font-weight:var(--sapphire-semantic-font-weight-default-medium);color:var(--sapphire-semantic-color-foreground-primary);vertical-align:middle}.sapphire-label__required-indicator{background-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A\");width:8px;height:8px;margin-left:var(--sapphire-semantic-size-spacing-3xs);display:inline-block}.sapphire-label__optional-indicator{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label__help-button{margin-left:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label__help-button:empty{display:none}\n"] }]
|
|
1356
1356
|
}], propDecorators: { id: [{
|
|
1357
1357
|
type: Input
|
|
1358
1358
|
}], for: [{
|
|
@@ -2016,9 +2016,10 @@ class FieldComponent {
|
|
|
2016
2016
|
return this.radioGroup != undefined;
|
|
2017
2017
|
}
|
|
2018
2018
|
get labelNecessityIndicator() {
|
|
2019
|
-
var _a;
|
|
2019
|
+
var _a, _b, _c;
|
|
2020
2020
|
if (this.necessityIndicator) {
|
|
2021
|
-
return coerceBooleanProperty((_a = this.requiredValidator) === null || _a === void 0 ? void 0 : _a.required)
|
|
2021
|
+
return coerceBooleanProperty((_a = this.requiredValidator) === null || _a === void 0 ? void 0 : _a.required) ||
|
|
2022
|
+
((_c = (_b = this.ngControl) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.hasValidator(Validators.required))
|
|
2022
2023
|
? 'required'
|
|
2023
2024
|
: 'optional';
|
|
2024
2025
|
}
|
|
@@ -2042,7 +2043,7 @@ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
2042
2043
|
provide: ICON_SIZE_PROVIDER,
|
|
2043
2044
|
useClass: FieldIconSizeProvider,
|
|
2044
2045
|
},
|
|
2045
|
-
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "suffixPortalOutlet", predicate: CdkPortalOutlet, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-help-button\"\n ngProjectAs=\"sp-help-button\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-semantic-size-spacing-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.sapphire-field--no-width{width:auto}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;width:100%;min-width:0;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-field--md .sapphire-field__note-row{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto;width:auto}.sapphire-field--label-placement-side:not(.sapphire-field--no-width) .sapphire-field__control{width:var(--sapphire-semantic-size-width-field)}.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-md)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-semantic-size-spacing-lg)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }] });
|
|
2046
|
+
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "suffixPortalOutlet", predicate: CdkPortalOutlet, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-help-button\"\n ngProjectAs=\"sp-help-button\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-semantic-size-spacing-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.sapphire-field--no-width{width:auto}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;width:100%;min-width:0;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-field--md .sapphire-field__note-row{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto;width:auto}.sapphire-field--label-placement-side:not(.sapphire-field--no-width) .sapphire-field__control{width:var(--sapphire-semantic-size-width-field)}.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-md)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-semantic-size-spacing-lg)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }] });
|
|
2046
2047
|
__decorate([
|
|
2047
2048
|
CoerceBoolean
|
|
2048
2049
|
], FieldComponent.prototype, "necessityIndicator", void 0);
|
|
@@ -2094,6 +2095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2094
2095
|
}], radioGroup: [{
|
|
2095
2096
|
type: ContentChild,
|
|
2096
2097
|
args: [RadioGroupComponent]
|
|
2098
|
+
}], ngControl: [{
|
|
2099
|
+
type: ContentChild,
|
|
2100
|
+
args: [NgControl, { descendants: true }]
|
|
2097
2101
|
}], requiredValidator: [{
|
|
2098
2102
|
type: ContentChild,
|
|
2099
2103
|
args: [RequiredValidator, { descendants: true }]
|
|
@@ -2382,7 +2386,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
2382
2386
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2383
2387
|
multi: true,
|
|
2384
2388
|
},
|
|
2385
|
-
{ provide: MessageDictionary, useValue: translations$
|
|
2389
|
+
{ provide: MessageDictionary, useValue: translations$3 },
|
|
2386
2390
|
], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.is-disabled]=\"disabled && !checkboxGroup?.disabled\"\n [class.sapphire-checkbox--md]=\"size === 'md'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\">\n <ng-content></ng-content>\n <span\n *ngIf=\"labelNecessityIndicator === 'required'\"\n class=\"sapphire-checkbox__required-indicator\"\n ></span>\n <span\n *ngIf=\"labelNecessityIndicator === 'optional'\"\n class=\"sapphire-checkbox__optional-indicator\"\n >({{ 'optional' | t }})\n </span>\n </span>\n</label>\n<div\n *ngIf=\"note\"\n class=\"sapphire-checkbox__note\"\n [class.sapphire-checkbox__note--md]=\"size === 'md'\"\n>\n {{ note }}\n</div>\n", styles: [".sapphire-checkbox-container{display:flex;flex-flow:column}.sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%;cursor:pointer}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-semantic-size-spacing-sm);font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox__required-indicator{background-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A\");width:8px;height:8px}.sapphire-checkbox__optional-indicator{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-checkbox--md .sapphire-checkbox__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs);margin-left:var(--sapphire-semantic-size-spacing-xs)}.sapphire-checkbox__note,.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);margin-top:var(--sapphire-semantic-size-spacing-3xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-semantic-size-height-box-lg))}.sapphire-checkbox__note{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-checkbox__error-text{color:var(--sapphire-semantic-color-foreground-on-negative-subtle)}.sapphire-checkbox__note--md,.sapphire-checkbox__error-text--md{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm);margin-left:calc(var(--sapphire-semantic-size-spacing-xs) + var(--sapphire-semantic-size-height-box-md))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);border-radius:var(--sapphire-semantic-size-radius-sm);border:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-field-default);background:var(--sapphire-semantic-color-background-field);transition:all var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-checkbox--md .sapphire-checkbox__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-semantic-color-foreground-action-on-select-default);margin:calc(var(--sapphire-semantic-size-border-md) * -1);height:var(--sapphire-semantic-size-height-box-lg);width:var(--sapphire-semantic-size-height-box-lg)}.sapphire-checkbox--md .sapphire-checkbox__box-icon{height:var(--sapphire-semantic-size-height-box-md);width:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background:var(--sapphire-semantic-color-background-action-select-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-hover)}.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-select-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-active)}.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-select-active)}.sapphire-checkbox--checked.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-active)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus):has(input:focus-visible) .sapphire-checkbox__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-checkbox.is-disabled,.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox.is-disabled,.sapphire-checkbox:has(:disabled){opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2387
2391
|
__decorate([
|
|
2388
2392
|
AutoId()
|
|
@@ -2404,7 +2408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2404
2408
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2405
2409
|
multi: true,
|
|
2406
2410
|
},
|
|
2407
|
-
{ provide: MessageDictionary, useValue: translations$
|
|
2411
|
+
{ provide: MessageDictionary, useValue: translations$3 },
|
|
2408
2412
|
], host: {
|
|
2409
2413
|
'[attr.tabindex]': 'null',
|
|
2410
2414
|
'[attr.aria-label]': 'null',
|
|
@@ -2519,7 +2523,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
2519
2523
|
provide: ICON_SIZE_PROVIDER,
|
|
2520
2524
|
useValue: { size: 'sm' },
|
|
2521
2525
|
},
|
|
2522
|
-
], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
|
|
2526
|
+
], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content:not(.sapphire-listbox__content--empty){grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__content--empty{grid-template-columns:1fr;justify-items:center;cursor:default}.sapphire-listbox__item:has(.sapphire-listbox__content--empty){cursor:default}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox>.sapphire-listbox__separator:first-child{display:none}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
|
|
2523
2527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2524
2528
|
type: Component,
|
|
2525
2529
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -2537,7 +2541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2537
2541
|
provide: ICON_SIZE_PROVIDER,
|
|
2538
2542
|
useValue: { size: 'sm' },
|
|
2539
2543
|
},
|
|
2540
|
-
], standalone: false, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
2544
|
+
], standalone: false, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content:not(.sapphire-listbox__content--empty){grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__content--empty{grid-template-columns:1fr;justify-items:center;cursor:default}.sapphire-listbox__item:has(.sapphire-listbox__content--empty){cursor:default}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox>.sapphire-listbox__separator:first-child{display:none}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
2541
2545
|
}] });
|
|
2542
2546
|
|
|
2543
2547
|
class MenuItemComponent {
|
|
@@ -3593,7 +3597,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
3593
3597
|
provide: FieldControl,
|
|
3594
3598
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3595
3599
|
},
|
|
3596
|
-
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);color:inherit;background:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input
|
|
3600
|
+
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);color:inherit;background:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-control-lg) inset var(--sapphire-semantic-color-background-field)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-4xs) calc(var(--sapphire-semantic-size-spacing-4xs) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-semantic-size-icon-md);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-radius-sm);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer;background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-text-field--md.sapphire-text-field__stepper-button{width:var(--sapphire-semantic-size-icon-sm)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
|
|
3597
3601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
3598
3602
|
type: Component,
|
|
3599
3603
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -3606,7 +3610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3606
3610
|
provide: FieldControl,
|
|
3607
3611
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3608
3612
|
},
|
|
3609
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);color:inherit;background:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input
|
|
3613
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);color:inherit;background:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-control-lg) inset var(--sapphire-semantic-color-background-field)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-4xs) calc(var(--sapphire-semantic-size-spacing-4xs) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-semantic-size-icon-md);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-radius-sm);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer;background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-text-field--md.sapphire-text-field__stepper-button{width:var(--sapphire-semantic-size-icon-sm)}\n"] }]
|
|
3610
3614
|
}], ctorParameters: function () {
|
|
3611
3615
|
return [{ type: FieldComponent, decorators: [{
|
|
3612
3616
|
type: Optional
|
|
@@ -3964,6 +3968,51 @@ function section(options, ariaLabel) {
|
|
|
3964
3968
|
return section;
|
|
3965
3969
|
}
|
|
3966
3970
|
|
|
3971
|
+
var empty$6 = "Ingen resultater";
|
|
3972
|
+
var da$2 = {
|
|
3973
|
+
empty: empty$6
|
|
3974
|
+
};
|
|
3975
|
+
|
|
3976
|
+
var empty$5 = "No results";
|
|
3977
|
+
var en$2 = {
|
|
3978
|
+
empty: empty$5
|
|
3979
|
+
};
|
|
3980
|
+
|
|
3981
|
+
var empty$4 = "Keine Ergebnisse";
|
|
3982
|
+
var de$2 = {
|
|
3983
|
+
empty: empty$4
|
|
3984
|
+
};
|
|
3985
|
+
|
|
3986
|
+
var empty$3 = "Ei tuloksia";
|
|
3987
|
+
var fi$2 = {
|
|
3988
|
+
empty: empty$3
|
|
3989
|
+
};
|
|
3990
|
+
|
|
3991
|
+
var empty$2 = "Ingen resultater";
|
|
3992
|
+
var no$2 = {
|
|
3993
|
+
empty: empty$2
|
|
3994
|
+
};
|
|
3995
|
+
|
|
3996
|
+
var empty$1 = "Brak wyników";
|
|
3997
|
+
var pl$2 = {
|
|
3998
|
+
empty: empty$1
|
|
3999
|
+
};
|
|
4000
|
+
|
|
4001
|
+
var empty = "Inga resultat";
|
|
4002
|
+
var se$2 = {
|
|
4003
|
+
empty: empty
|
|
4004
|
+
};
|
|
4005
|
+
|
|
4006
|
+
const translations$2 = new MessageDictionary({
|
|
4007
|
+
'da-DK': da$2,
|
|
4008
|
+
'en-US': en$2,
|
|
4009
|
+
'de-DE': de$2,
|
|
4010
|
+
'fi-FI': fi$2,
|
|
4011
|
+
'nb-NO': no$2,
|
|
4012
|
+
'pl-PL': pl$2,
|
|
4013
|
+
'sv-SE': se$2,
|
|
4014
|
+
}, 'en-US');
|
|
4015
|
+
|
|
3967
4016
|
/**
|
|
3968
4017
|
A workaround for an issue in cdkListbox, where the active item is not scrolled
|
|
3969
4018
|
into view when it's not physically focused (i.e. useActiveDescendant is true).
|
|
@@ -4155,8 +4204,14 @@ class ListboxComponent {
|
|
|
4155
4204
|
get options() {
|
|
4156
4205
|
return this._itemsInput || this.itemsInContent;
|
|
4157
4206
|
}
|
|
4158
|
-
|
|
4207
|
+
get isEmpty() {
|
|
4208
|
+
var _a;
|
|
4209
|
+
const options = Array.from((_a = this.options) !== null && _a !== void 0 ? _a : []);
|
|
4210
|
+
return options.length === 0;
|
|
4211
|
+
}
|
|
4212
|
+
constructor(changeDetectorRef, t) {
|
|
4159
4213
|
this.changeDetectorRef = changeDetectorRef;
|
|
4214
|
+
this.t = t;
|
|
4160
4215
|
/**
|
|
4161
4216
|
* The list of selected values (`value`s of selected sp-options).
|
|
4162
4217
|
* It's always an array, regardless of {@property multiple} being true or not.
|
|
@@ -4336,9 +4391,24 @@ class ListboxComponent {
|
|
|
4336
4391
|
_isConnectedToInput() {
|
|
4337
4392
|
return Boolean(this.connectedInput);
|
|
4338
4393
|
}
|
|
4394
|
+
_isString(input) {
|
|
4395
|
+
return typeof input === 'string';
|
|
4396
|
+
}
|
|
4397
|
+
_getEmptyState() {
|
|
4398
|
+
var _a;
|
|
4399
|
+
if (this.emptyState === null) {
|
|
4400
|
+
return null;
|
|
4401
|
+
}
|
|
4402
|
+
return (_a = this.emptyState) !== null && _a !== void 0 ? _a : this.t.translate('empty', translations$2);
|
|
4403
|
+
}
|
|
4404
|
+
_getEmptyStateTemplate() {
|
|
4405
|
+
return this.emptyState && !this._isString(this.emptyState)
|
|
4406
|
+
? this.emptyState
|
|
4407
|
+
: null;
|
|
4408
|
+
}
|
|
4339
4409
|
}
|
|
4340
|
-
ListboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4341
|
-
ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxComponent, selector: "sp-listbox", inputs: { selectedValues: "selectedValues", _itemsInput: ["spListboxItems", "_itemsInput"], disabled: "disabled", multiple: "multiple", navigationWrapDisabled: "navigationWrapDisabled", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], id: "id" }, outputs: { selectedValuesChange: "selectedValuesChange", selected: "selected" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
|
|
4410
|
+
ListboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4411
|
+
ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxComponent, selector: "sp-listbox", inputs: { selectedValues: "selectedValues", _itemsInput: ["spListboxItems", "_itemsInput"], disabled: "disabled", multiple: "multiple", navigationWrapDisabled: "navigationWrapDisabled", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], id: "id", emptyState: "emptyState" }, outputs: { selectedValuesChange: "selectedValuesChange", selected: "selected" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
|
|
4342
4412
|
{
|
|
4343
4413
|
provide: NG_VALUE_ACCESSOR,
|
|
4344
4414
|
useExisting: forwardRef(() => ListboxComponent),
|
|
@@ -4349,7 +4419,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
4349
4419
|
useValue: { size: 'sm' },
|
|
4350
4420
|
},
|
|
4351
4421
|
ViewEncapsulationProvider,
|
|
4352
|
-
], 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 sapphire-listbox--selection\"\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>\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 ></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 ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option"] }] });
|
|
4422
|
+
], 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 sapphire-listbox--selection\"\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>\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 ></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 ></li>\n </ng-container>\n\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item js-hover js-focus\"\n >\n <div class=\"sapphire-listbox__content sapphire-listbox__content--empty\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content:not(.sapphire-listbox__content--empty){grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__content--empty{grid-template-columns:1fr;justify-items:center;cursor:default}.sapphire-listbox__item:has(.sapphire-listbox__content--empty){cursor:default}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox>.sapphire-listbox__separator:first-child{display:none}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option"] }] });
|
|
4353
4423
|
__decorate([
|
|
4354
4424
|
CoerceBoolean
|
|
4355
4425
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -4375,8 +4445,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4375
4445
|
], host: {
|
|
4376
4446
|
'[attr.aria-label]': 'null',
|
|
4377
4447
|
'[attr.aria-labelledby]': 'null',
|
|
4378
|
-
}, exportAs: 'spListbox', standalone: false, template: "<ul\n class=\"sapphire-listbox sapphire-listbox--selection\"\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>\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 ></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 ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}:host{display:block}\n"] }]
|
|
4379
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedValues: [{
|
|
4448
|
+
}, exportAs: 'spListbox', standalone: false, template: "<ul\n class=\"sapphire-listbox sapphire-listbox--selection\"\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>\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 ></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 ></li>\n </ng-container>\n\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item js-hover js-focus\"\n >\n <div class=\"sapphire-listbox__content sapphire-listbox__content--empty\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content:not(.sapphire-listbox__content--empty){grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__content--empty{grid-template-columns:1fr;justify-items:center;cursor:default}.sapphire-listbox__item:has(.sapphire-listbox__content--empty){cursor:default}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox>.sapphire-listbox__separator:first-child{display:none}.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-semantic-size-focus-ring) var(--sapphire-semantic-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-semantic-color-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}:host{display:block}\n"] }]
|
|
4449
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TranslateService }]; }, propDecorators: { selectedValues: [{
|
|
4380
4450
|
type: Input
|
|
4381
4451
|
}], selectedValuesChange: [{
|
|
4382
4452
|
type: Output
|
|
@@ -4397,6 +4467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4397
4467
|
args: ['aria-labelledby']
|
|
4398
4468
|
}], id: [{
|
|
4399
4469
|
type: Input
|
|
4470
|
+
}], emptyState: [{
|
|
4471
|
+
type: Input
|
|
4400
4472
|
}], selected: [{
|
|
4401
4473
|
type: Output
|
|
4402
4474
|
}], itemsInContent: [{
|
|
@@ -4850,7 +4922,7 @@ class SelectComponentBase {
|
|
|
4850
4922
|
}
|
|
4851
4923
|
}
|
|
4852
4924
|
SelectComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectComponentBase, deps: [{ token: SelectValueHolder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4853
|
-
SelectComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponentBase, inputs: { disabled: "disabled", id: "id", name: "name", autocomplete: "autocomplete", placeholder: "placeholder", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { opened: "opened", closed: "closed", selected: "selected" }, queries: [{ propertyName: "selectionText", first: true, predicate: SelectionTextDirective, descendants: true }, { propertyName: "options", predicate: OptionComponent, descendants: true }, { propertyName: "listboxChildren", predicate: ListboxChild }], ngImport: i0 });
|
|
4925
|
+
SelectComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponentBase, inputs: { disabled: "disabled", id: "id", name: "name", autocomplete: "autocomplete", placeholder: "placeholder", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], emptyState: "emptyState" }, outputs: { opened: "opened", closed: "closed", selected: "selected" }, queries: [{ propertyName: "selectionText", first: true, predicate: SelectionTextDirective, descendants: true }, { propertyName: "options", predicate: OptionComponent, descendants: true }, { propertyName: "listboxChildren", predicate: ListboxChild }], ngImport: i0 });
|
|
4854
4926
|
__decorate([
|
|
4855
4927
|
CoerceBoolean
|
|
4856
4928
|
], SelectComponentBase.prototype, "disabled", void 0);
|
|
@@ -4890,6 +4962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4890
4962
|
}], selectionText: [{
|
|
4891
4963
|
type: ContentChild,
|
|
4892
4964
|
args: [SelectionTextDirective]
|
|
4965
|
+
}], emptyState: [{
|
|
4966
|
+
type: Input
|
|
4893
4967
|
}] } });
|
|
4894
4968
|
|
|
4895
4969
|
/**
|
|
@@ -5187,7 +5261,7 @@ class SelectComponent extends SelectComponentBase {
|
|
|
5187
5261
|
}));
|
|
5188
5262
|
this.filteredChildren$ = this.multiple
|
|
5189
5263
|
? // Grouping selected options
|
|
5190
|
-
combineLatest(filterResult$, this.valueHolder.valueChange.pipe(startWith(empty()))).pipe(map(([{ filteredChildren }]) => {
|
|
5264
|
+
combineLatest(filterResult$, this.valueHolder.valueChange.pipe(startWith(empty$7()))).pipe(map(([{ filteredChildren }]) => {
|
|
5191
5265
|
if (this.listboxValue.length === 0) {
|
|
5192
5266
|
return filteredChildren;
|
|
5193
5267
|
}
|
|
@@ -5373,7 +5447,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
5373
5447
|
provide: FieldControl,
|
|
5374
5448
|
useExisting: forwardRef(() => SelectComponent),
|
|
5375
5449
|
},
|
|
5376
|
-
], 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\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 </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none'
|
|
5450
|
+
], 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\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 </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 && !listbox?._getEmptyState()\n ? 'none'\n : undefined\n \"\n noPadding\n [trapFocus]=\"!searchable\"\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [emptyState]=\"emptyState\"\n ></sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-foreground-secondary)}.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-semantic-color-border-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "id", "emptyState"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
|
|
5377
5451
|
__decorate([
|
|
5378
5452
|
AutoId()
|
|
5379
5453
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -5403,7 +5477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5403
5477
|
'[attr.aria-label]': 'null',
|
|
5404
5478
|
'[attr.aria-labelledby]': 'null',
|
|
5405
5479
|
'[attr.placeholder]': 'null',
|
|
5406
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\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 </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none'
|
|
5480
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\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 </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 && !listbox?._getEmptyState()\n ? 'none'\n : undefined\n \"\n noPadding\n [trapFocus]=\"!searchable\"\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [emptyState]=\"emptyState\"\n ></sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-foreground-secondary)}.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-semantic-color-border-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
5407
5481
|
}], ctorParameters: function () {
|
|
5408
5482
|
return [{ type: SelectValueHolder }, { type: IconRegistry }, { type: i3.FocusMonitor }, { type: i3.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
5409
5483
|
type: Optional
|
|
@@ -5508,7 +5582,7 @@ SelectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
5508
5582
|
useExisting: forwardRef(() => SelectButtonComponent),
|
|
5509
5583
|
},
|
|
5510
5584
|
ViewEncapsulationProvider,
|
|
5511
|
-
], 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: ["spSelectButton"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-foreground-secondary)}.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-semantic-color-border-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type", "tabindex"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
5585
|
+
], 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: ["spSelectButton"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-foreground-secondary)}.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-semantic-color-border-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "id", "emptyState"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type", "tabindex"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
5512
5586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
5513
5587
|
type: Component,
|
|
5514
5588
|
args: [{ selector: 'sp-select-button', exportAs: 'spSelectButton', providers: [
|
|
@@ -8400,12 +8474,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8400
8474
|
class ModalLayoutComponent {
|
|
8401
8475
|
}
|
|
8402
8476
|
ModalLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8403
|
-
ModalLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalLayoutComponent, selector: "sp-modal-layout", host: { classAttribute: "sapphire-modal-layout" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
8477
|
+
ModalLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalLayoutComponent, selector: "sp-modal-layout", host: { classAttribute: "sapphire-modal-layout" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{z-index:1;margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
8404
8478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, decorators: [{
|
|
8405
8479
|
type: Component,
|
|
8406
8480
|
args: [{ selector: 'sp-modal-layout', template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", host: {
|
|
8407
8481
|
class: 'sapphire-modal-layout',
|
|
8408
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8482
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{z-index:1;margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8409
8483
|
}] });
|
|
8410
8484
|
|
|
8411
8485
|
/**
|
|
@@ -8627,14 +8701,14 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
8627
8701
|
}
|
|
8628
8702
|
}
|
|
8629
8703
|
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8630
|
-
PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelComponent, selector: "sp-panel", inputs: { size: "size" }, host: { properties: { "class.sapphire-panel--sm": "size === \"sm\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
8704
|
+
PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelComponent, selector: "sp-panel", inputs: { size: "size" }, host: { properties: { "class.sapphire-panel--sm": "size === \"sm\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{z-index:1;margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
8631
8705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
8632
8706
|
type: Component,
|
|
8633
8707
|
args: [{ selector: 'sp-panel', template: '<ng-content></ng-content>', host: {
|
|
8634
8708
|
class: 'sapphire-panel',
|
|
8635
8709
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
8636
8710
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
8637
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8711
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;flex-direction:column;padding:var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-lg)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{z-index:1;margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8638
8712
|
}], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
|
|
8639
8713
|
type: Input
|
|
8640
8714
|
}] } });
|
|
@@ -9601,7 +9675,7 @@ class ListComponent {
|
|
|
9601
9675
|
}
|
|
9602
9676
|
}
|
|
9603
9677
|
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9604
|
-
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListComponent, isStandalone: true, selector: "[sp-list]", inputs: { hideLastDivider: "hideLastDivider", hasNegativeSideMargin: "hasNegativeSideMargin" }, host: { properties: { "class.sapphire-list--without-last-divider": "hideLastDivider", "class.sapphire-list--negative-margin-self": "hasNegativeSideMargin", "attr.role": "!isListElement ? \"list\" : undefined" }, classAttribute: "sapphire-list" }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "listItems", predicate: i0.forwardRef(function () { return ListItemComponent; }), descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] });
|
|
9678
|
+
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListComponent, isStandalone: true, selector: "[sp-list]", inputs: { hideLastDivider: "hideLastDivider", hasNegativeSideMargin: "hasNegativeSideMargin" }, host: { properties: { "class.sapphire-list--without-last-divider": "hideLastDivider", "class.sapphire-list--negative-margin-self": "hasNegativeSideMargin", "attr.role": "!isListElement ? \"list\" : undefined" }, classAttribute: "sapphire-list" }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "listItems", predicate: i0.forwardRef(function () { return ListItemComponent; }), descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default)}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] });
|
|
9605
9679
|
__decorate([
|
|
9606
9680
|
CoerceBoolean
|
|
9607
9681
|
], ListComponent.prototype, "hideLastDivider", void 0);
|
|
@@ -9615,7 +9689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9615
9689
|
'[class.sapphire-list--without-last-divider]': 'hideLastDivider',
|
|
9616
9690
|
'[class.sapphire-list--negative-margin-self]': 'hasNegativeSideMargin',
|
|
9617
9691
|
'[attr.role]': `!isListElement ? "list" : undefined`,
|
|
9618
|
-
}, hostDirectives: [UseComponentStylesOnHost], providers: [ViewEncapsulationProvider], imports: [UseComponentStylesOnHost], styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] }]
|
|
9692
|
+
}, hostDirectives: [UseComponentStylesOnHost], providers: [ViewEncapsulationProvider], imports: [UseComponentStylesOnHost], styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default)}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] }]
|
|
9619
9693
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hideLastDivider: [{
|
|
9620
9694
|
type: Input
|
|
9621
9695
|
}], hasNegativeSideMargin: [{
|