@danske/sapphire-angular 1.14.1 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/contextual-help/src/contextual-help.component.mjs +1 -1
- package/esm2020/lib/listbox/src/listbox-input.directive.mjs +3 -2
- package/esm2020/lib/listbox/src/listbox.component.mjs +6 -4
- package/esm2020/lib/listbox/src/listbox.module.mjs +3 -3
- package/esm2020/lib/popover/src/popover-trigger.directive.mjs +2 -5
- package/esm2020/lib/popover/src/popover.component.mjs +13 -4
- package/esm2020/lib/select/src/basic-select/basic-select.component.mjs +1 -1
- package/esm2020/lib/select/src/select/select.component.mjs +1 -1
- package/esm2020/lib/table/src/table-cell.directive.mjs +9 -9
- package/esm2020/lib/table/src/table-row.directive.mjs +3 -3
- package/fesm2015/danske-sapphire-angular.mjs +40 -27
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +35 -26
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/listbox/src/listbox-input.directive.d.ts +1 -1
- package/lib/listbox/src/listbox.component.d.ts +2 -1
- package/lib/listbox/src/listbox.module.d.ts +10 -10
- package/lib/popover/src/popover.component.d.ts +5 -1
- package/lib/table/src/table-cell.directive.d.ts +8 -6
- package/lib/table/src/table-row.directive.d.ts +1 -1
- package/package.json +2 -2
|
@@ -1605,7 +1605,6 @@ class PopoverTriggerDirective {
|
|
|
1605
1605
|
if (!this.overlayRef) {
|
|
1606
1606
|
this.overlayRef = this.cdkOverlay.create(this.getOverlayConfig());
|
|
1607
1607
|
this.overlayRef.updatePositionStrategy(this.getOverlayPositionStrategy());
|
|
1608
|
-
this.overlayRef.attach(this.getContentPortal());
|
|
1609
1608
|
this.overlayRef.detachments().subscribe(() => {
|
|
1610
1609
|
this.closed.next();
|
|
1611
1610
|
this.changeDetectorRef.detectChanges();
|
|
@@ -1624,9 +1623,7 @@ class PopoverTriggerDirective {
|
|
|
1624
1623
|
}
|
|
1625
1624
|
});
|
|
1626
1625
|
}
|
|
1627
|
-
|
|
1628
|
-
this.overlayRef.attach(this.getContentPortal());
|
|
1629
|
-
}
|
|
1626
|
+
this.overlayRef.attach(this.getContentPortal());
|
|
1630
1627
|
this.changeDetectorRef.detectChanges();
|
|
1631
1628
|
}
|
|
1632
1629
|
}
|
|
@@ -1869,6 +1866,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1869
1866
|
class PopoverComponent {
|
|
1870
1867
|
constructor(trigger) {
|
|
1871
1868
|
this.trigger = trigger;
|
|
1869
|
+
/**
|
|
1870
|
+
* Whether the default behavior of moving focus to the popover content upon open should be disabled
|
|
1871
|
+
*/
|
|
1872
|
+
this.noAutoFocus = false;
|
|
1872
1873
|
this.ID = `sp-popover-${Math.floor(Math.random() * 1000000000)}`;
|
|
1873
1874
|
/**
|
|
1874
1875
|
* Keeps track of if the content is focused
|
|
@@ -1876,7 +1877,7 @@ class PopoverComponent {
|
|
|
1876
1877
|
this.contentFocused = false;
|
|
1877
1878
|
}
|
|
1878
1879
|
ngAfterViewInit() {
|
|
1879
|
-
if (!this.contentFocused) {
|
|
1880
|
+
if (!this.contentFocused && !this.noAutoFocus) {
|
|
1880
1881
|
this.contentWrapper?.nativeElement.focus();
|
|
1881
1882
|
}
|
|
1882
1883
|
}
|
|
@@ -1901,13 +1902,16 @@ class PopoverComponent {
|
|
|
1901
1902
|
}
|
|
1902
1903
|
}
|
|
1903
1904
|
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: POPOVER_TRIGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1904
|
-
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\nNOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria. It does NOT prevent focus from going out of popover,\n which is good, as we want the popover to close on blur.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
1905
|
+
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\nNOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria. It does NOT prevent focus from going out of popover,\n which is good, as we want the popover to close on blur.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
1905
1906
|
__decorate([
|
|
1906
1907
|
CoerceBoolean
|
|
1907
1908
|
], PopoverComponent.prototype, "noPadding", void 0);
|
|
1908
1909
|
__decorate([
|
|
1909
1910
|
CoerceBoolean
|
|
1910
1911
|
], PopoverComponent.prototype, "noMaxWidth", void 0);
|
|
1912
|
+
__decorate([
|
|
1913
|
+
CoerceBoolean
|
|
1914
|
+
], PopoverComponent.prototype, "noAutoFocus", void 0);
|
|
1911
1915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
1912
1916
|
type: Component,
|
|
1913
1917
|
args: [{ selector: 'sp-popover', host: {
|
|
@@ -1915,7 +1919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1915
1919
|
'[class.sapphire-popover--padded]': '!noPadding',
|
|
1916
1920
|
'[class.sapphire-popover--max-width]': '!noMaxWidth',
|
|
1917
1921
|
role: 'presentation',
|
|
1918
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\nNOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria. It does NOT prevent focus from going out of popover,\n which is good, as we want the popover to close on blur.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"] }]
|
|
1922
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\nNOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria. It does NOT prevent focus from going out of popover,\n which is good, as we want the popover to close on blur.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"] }]
|
|
1919
1923
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1920
1924
|
type: Optional
|
|
1921
1925
|
}, {
|
|
@@ -1931,6 +1935,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1931
1935
|
}], contentWrapper: [{
|
|
1932
1936
|
type: ViewChild,
|
|
1933
1937
|
args: ['contentWrapper', { read: ElementRef }]
|
|
1938
|
+
}], noAutoFocus: [{
|
|
1939
|
+
type: Input
|
|
1934
1940
|
}], handleEscape: [{
|
|
1935
1941
|
type: HostListener,
|
|
1936
1942
|
args: ['keydown.Escape', ['$event']]
|
|
@@ -3139,7 +3145,7 @@ class ListboxComponent {
|
|
|
3139
3145
|
}
|
|
3140
3146
|
}
|
|
3141
3147
|
ListboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3142
|
-
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"], size: "size" }, outputs: { selectedValuesChange: "selectedValuesChange", selected: "selected" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
|
|
3148
|
+
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"], size: "size", id: "id" }, outputs: { selectedValuesChange: "selectedValuesChange", selected: "selected" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
|
|
3143
3149
|
{
|
|
3144
3150
|
provide: NG_VALUE_ACCESSOR,
|
|
3145
3151
|
useExisting: forwardRef(() => ListboxComponent),
|
|
@@ -3150,7 +3156,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
3150
3156
|
useExisting: forwardRef(() => ListboxComponent),
|
|
3151
3157
|
},
|
|
3152
3158
|
ViewEncapsulationProvider,
|
|
3153
|
-
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;display:flex;justify-content:stretch;flex-direction:column;min-width:var(--sapphire-listbox-size-width-min);margin:0;padding:0;position:relative;list-style:none;outline:none;padding-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));padding-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$4.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", "size"] }] });
|
|
3159
|
+
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;display:flex;justify-content:stretch;flex-direction:column;min-width:var(--sapphire-listbox-size-width-min);margin:0;padding:0;position:relative;list-style:none;outline:none;padding-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));padding-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$4.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", "size"] }] });
|
|
3154
3160
|
__decorate([
|
|
3155
3161
|
CoerceBoolean
|
|
3156
3162
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -3176,7 +3182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3176
3182
|
], host: {
|
|
3177
3183
|
'[attr.aria-label]': 'null',
|
|
3178
3184
|
'[attr.aria-labelledby]': 'null',
|
|
3179
|
-
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;display:flex;justify-content:stretch;flex-direction:column;min-width:var(--sapphire-listbox-size-width-min);margin:0;padding:0;position:relative;list-style:none;outline:none;padding-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));padding-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"] }]
|
|
3185
|
+
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--medium]=\"size === 'medium'\"\n [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;display:flex;justify-content:stretch;flex-direction:column;min-width:var(--sapphire-listbox-size-width-min);margin:0;padding:0;position:relative;list-style:none;outline:none;padding-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));padding-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"] }]
|
|
3180
3186
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedValues: [{
|
|
3181
3187
|
type: Input
|
|
3182
3188
|
}], selectedValuesChange: [{
|
|
@@ -3198,6 +3204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3198
3204
|
args: ['aria-labelledby']
|
|
3199
3205
|
}], size: [{
|
|
3200
3206
|
type: Input
|
|
3207
|
+
}], id: [{
|
|
3208
|
+
type: Input
|
|
3201
3209
|
}], selected: [{
|
|
3202
3210
|
type: Output
|
|
3203
3211
|
}], itemsInContent: [{
|
|
@@ -3231,11 +3239,12 @@ class ListboxInputDirective {
|
|
|
3231
3239
|
}
|
|
3232
3240
|
}
|
|
3233
3241
|
ListboxInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3234
|
-
ListboxInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: { listbox: ["spListboxInput", "listbox"] }, host: { listeners: { "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
|
|
3242
|
+
ListboxInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ListboxInputDirective, isStandalone: true, selector: "input[spListboxInput]", inputs: { listbox: ["spListboxInput", "listbox"] }, host: { listeners: { "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
|
|
3235
3243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxInputDirective, decorators: [{
|
|
3236
3244
|
type: Directive,
|
|
3237
3245
|
args: [{
|
|
3238
3246
|
selector: 'input[spListboxInput]',
|
|
3247
|
+
standalone: true,
|
|
3239
3248
|
}]
|
|
3240
3249
|
}], propDecorators: { listbox: [{
|
|
3241
3250
|
type: Input,
|
|
@@ -3260,7 +3269,6 @@ SapphireListboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
|
|
|
3260
3269
|
OptionSecondaryTextDirective,
|
|
3261
3270
|
OptionPrimaryTextDirective,
|
|
3262
3271
|
ListboxComponent,
|
|
3263
|
-
ListboxInputDirective,
|
|
3264
3272
|
ListboxItemComponent], imports: [CommonModule,
|
|
3265
3273
|
SapphireIconModule,
|
|
3266
3274
|
CdkListboxModule,
|
|
@@ -3268,6 +3276,7 @@ SapphireListboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
|
|
|
3268
3276
|
PressedDirective,
|
|
3269
3277
|
FocusedDirective,
|
|
3270
3278
|
UseComponentStyles,
|
|
3279
|
+
ListboxInputDirective,
|
|
3271
3280
|
CdkOptionScrollIssuePatch], exports: [ListboxComponent,
|
|
3272
3281
|
OptionComponent,
|
|
3273
3282
|
OptionIconDirective,
|
|
@@ -3289,7 +3298,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3289
3298
|
OptionSecondaryTextDirective,
|
|
3290
3299
|
OptionPrimaryTextDirective,
|
|
3291
3300
|
ListboxComponent,
|
|
3292
|
-
ListboxInputDirective,
|
|
3293
3301
|
ListboxItemComponent,
|
|
3294
3302
|
],
|
|
3295
3303
|
imports: [
|
|
@@ -3300,6 +3308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3300
3308
|
PressedDirective,
|
|
3301
3309
|
FocusedDirective,
|
|
3302
3310
|
UseComponentStyles,
|
|
3311
|
+
ListboxInputDirective,
|
|
3303
3312
|
CdkOptionScrollIssuePatch,
|
|
3304
3313
|
],
|
|
3305
3314
|
exports: [
|
|
@@ -4131,7 +4140,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
4131
4140
|
provide: FieldControl,
|
|
4132
4141
|
useExisting: forwardRef(() => SelectComponent),
|
|
4133
4142
|
},
|
|
4134
|
-
], 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 [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\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' : undefined\n \"\n noPadding\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 [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.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" }] });
|
|
4143
|
+
], 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 [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\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' : undefined\n \"\n noPadding\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 [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], 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"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.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" }] });
|
|
4135
4144
|
__decorate([
|
|
4136
4145
|
AutoId()
|
|
4137
4146
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -4257,7 +4266,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
4257
4266
|
useExisting: forwardRef(() => BasicSelectComponent),
|
|
4258
4267
|
},
|
|
4259
4268
|
ViewEncapsulationProvider,
|
|
4260
|
-
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant === 'primary' ? 'primary' : 'secondary'\"\n [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
4269
|
+
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant === 'primary' ? 'primary' : 'secondary'\"\n [appearance]=\"variant === 'uncontained' ? 'ghost' : 'fill'\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
4261
4270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
|
|
4262
4271
|
type: Component,
|
|
4263
4272
|
args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
|
|
@@ -5227,9 +5236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5227
5236
|
|
|
5228
5237
|
class TableCellDirective {
|
|
5229
5238
|
get role() {
|
|
5230
|
-
return this.
|
|
5231
|
-
? 'rowheader'
|
|
5232
|
-
: 'cell';
|
|
5239
|
+
return this.isFirstCellInRow ? 'rowheader' : 'cell';
|
|
5233
5240
|
}
|
|
5234
5241
|
/**
|
|
5235
5242
|
* Horizontal alignment of content in the cell.
|
|
@@ -5237,29 +5244,31 @@ class TableCellDirective {
|
|
|
5237
5244
|
* @default 'left'
|
|
5238
5245
|
*/
|
|
5239
5246
|
get align() {
|
|
5240
|
-
return
|
|
5241
|
-
this.tableRow.getColumnHeadCellProperty(this, 'align'));
|
|
5247
|
+
return this._align || this.headCell?.align;
|
|
5242
5248
|
}
|
|
5243
5249
|
set align(value) {
|
|
5244
5250
|
this._align = value;
|
|
5245
5251
|
}
|
|
5246
5252
|
get width() {
|
|
5247
|
-
return this.
|
|
5253
|
+
return this.headCell?.width;
|
|
5248
5254
|
}
|
|
5249
5255
|
get minWidth() {
|
|
5250
|
-
return this.
|
|
5256
|
+
return this.headCell?.minWidth;
|
|
5251
5257
|
}
|
|
5252
5258
|
get maxWidth() {
|
|
5253
|
-
return this.
|
|
5259
|
+
return this.headCell?.maxWidth;
|
|
5254
5260
|
}
|
|
5255
5261
|
constructor(table, truncatedWithTooltipDirective, tableRow) {
|
|
5256
5262
|
this.table = table;
|
|
5257
5263
|
this.truncatedWithTooltipDirective = truncatedWithTooltipDirective;
|
|
5258
5264
|
this.tableRow = tableRow;
|
|
5265
|
+
this.isFirstCellInRow = false;
|
|
5259
5266
|
}
|
|
5260
5267
|
ngAfterContentChecked() {
|
|
5261
5268
|
this.truncatedWithTooltipDirective.enabled =
|
|
5262
5269
|
this.table.cellOverflow === 'truncate';
|
|
5270
|
+
this.headCell = this.tableRow.getColumnHeadCell(this);
|
|
5271
|
+
this.isFirstCellInRow = this.tableRow.cells.toArray().indexOf(this) === 0;
|
|
5263
5272
|
}
|
|
5264
5273
|
}
|
|
5265
5274
|
TableCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableCellDirective, deps: [{ token: forwardRef(() => TableComponent) }, { token: TruncatedWithTooltipDirective }, { token: forwardRef(() => TableRowDirective) }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -5308,9 +5317,9 @@ class TableRowDirective {
|
|
|
5308
5317
|
rowData: this.rowData,
|
|
5309
5318
|
});
|
|
5310
5319
|
}
|
|
5311
|
-
|
|
5320
|
+
getColumnHeadCell(cell) {
|
|
5312
5321
|
const index = this.cells.toArray().indexOf(cell);
|
|
5313
|
-
return this.table.headCells?.toArray()[index]
|
|
5322
|
+
return this.table.headCells?.toArray()[index];
|
|
5314
5323
|
}
|
|
5315
5324
|
constructor(table) {
|
|
5316
5325
|
this.table = table;
|
|
@@ -7597,7 +7606,7 @@ class ContextualHelpComponent {
|
|
|
7597
7606
|
}
|
|
7598
7607
|
}
|
|
7599
7608
|
ContextualHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7600
|
-
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7609
|
+
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7601
7610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, decorators: [{
|
|
7602
7611
|
type: Component,
|
|
7603
7612
|
args: [{ selector: 'sp-contextual-help', standalone: true, imports: [
|