@danske/sapphire-angular 3.6.1 → 3.6.2
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/radio/src/segmented/segmented-radio-group.component.mjs +2 -2
- package/esm2020/lib/segmented-tabs/src/segmented-tab.component.mjs +2 -2
- package/esm2020/lib/segmented-tabs/src/segmented-tabs.component.mjs +2 -2
- package/esm2020/lib/select/src/select/select.component.mjs +3 -3
- package/esm2020/lib/table/src/table.component.mjs +2 -2
- package/fesm2015/danske-sapphire-angular.mjs +10 -10
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +10 -10
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -5355,7 +5355,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
5355
5355
|
provide: FieldControl,
|
|
5356
5356
|
useExisting: forwardRef(() => SelectComponent),
|
|
5357
5357
|
},
|
|
5358
|
-
], 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" }] });
|
|
5358
|
+
], 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 [attr.aria-expanded]=\"isOpen()\"\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" }] });
|
|
5359
5359
|
__decorate([
|
|
5360
5360
|
AutoId()
|
|
5361
5361
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -5385,7 +5385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5385
5385
|
'[attr.aria-label]': 'null',
|
|
5386
5386
|
'[attr.aria-labelledby]': 'null',
|
|
5387
5387
|
'[attr.placeholder]': 'null',
|
|
5388
|
-
}, 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"] }]
|
|
5388
|
+
}, 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 [attr.aria-expanded]=\"isOpen()\"\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"] }]
|
|
5389
5389
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: IconRegistry }, { type: i3.FocusMonitor }, { type: i3.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
5390
5390
|
type: Optional
|
|
5391
5391
|
}] }, { type: SearchableSelectDirective, decorators: [{
|
|
@@ -5715,7 +5715,7 @@ class SegmentedTabComponent {
|
|
|
5715
5715
|
}
|
|
5716
5716
|
}
|
|
5717
5717
|
SegmentedTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabComponent, deps: [{ token: forwardRef(() => SegmentedTabsComponent) }], target: i0.ɵɵFactoryTarget.Component });
|
|
5718
|
-
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-
|
|
5718
|
+
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"], dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5719
5719
|
__decorate([
|
|
5720
5720
|
AutoId()
|
|
5721
5721
|
], SegmentedTabComponent.prototype, "id", void 0);
|
|
@@ -5725,7 +5725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5725
5725
|
// Angular specific styles that are needed due to extra dom elements added by angular
|
|
5726
5726
|
'[style.flex]': "'1 1 auto'",
|
|
5727
5727
|
'[style.display]': "'inline-flex'",
|
|
5728
|
-
}, standalone: false, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-
|
|
5728
|
+
}, standalone: false, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"] }]
|
|
5729
5729
|
}], ctorParameters: function () { return [{ type: SegmentedTabsComponent, decorators: [{
|
|
5730
5730
|
type: Inject,
|
|
5731
5731
|
args: [forwardRef(() => SegmentedTabsComponent)]
|
|
@@ -5938,7 +5938,7 @@ class SegmentedTabsComponent {
|
|
|
5938
5938
|
}
|
|
5939
5939
|
}
|
|
5940
5940
|
SegmentedTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5941
|
-
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--
|
|
5941
|
+
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
5942
5942
|
__decorate([
|
|
5943
5943
|
CoerceBoolean
|
|
5944
5944
|
], SegmentedTabsComponent.prototype, "disabled", void 0);
|
|
@@ -5946,7 +5946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5946
5946
|
type: Component,
|
|
5947
5947
|
args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
|
|
5948
5948
|
'[attr.align]': 'null',
|
|
5949
|
-
}, standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--
|
|
5949
|
+
}, standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
5950
5950
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
5951
5951
|
type: ViewChild,
|
|
5952
5952
|
args: ['segmentedControl']
|
|
@@ -7054,7 +7054,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
7054
7054
|
<ng-container>
|
|
7055
7055
|
<ng-content select="table"></ng-content>
|
|
7056
7056
|
</ng-container>
|
|
7057
|
-
`, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] });
|
|
7057
|
+
`, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] });
|
|
7058
7058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
7059
7059
|
type: Component,
|
|
7060
7060
|
args: [{ selector: 'sp-table', template: `
|
|
@@ -7067,7 +7067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7067
7067
|
'[style.max-height]': 'maxHeight',
|
|
7068
7068
|
'[class.sapphire-table--overflow]': 'height || maxHeight',
|
|
7069
7069
|
'[class.sapphire-table--interactive]': 'isInteractive',
|
|
7070
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] }]
|
|
7070
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] }]
|
|
7071
7071
|
}], ctorParameters: function () { return []; }, propDecorators: { rowAction: [{
|
|
7072
7072
|
type: Output
|
|
7073
7073
|
}], stickyHeader: [{
|
|
@@ -7649,7 +7649,7 @@ SegmentedRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
7649
7649
|
provide: RadioGroupBase,
|
|
7650
7650
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7651
7651
|
},
|
|
7652
|
-
], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--
|
|
7652
|
+
], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
7653
7653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
|
|
7654
7654
|
type: Component,
|
|
7655
7655
|
args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
@@ -7667,7 +7667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7667
7667
|
provide: RadioGroupBase,
|
|
7668
7668
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7669
7669
|
},
|
|
7670
|
-
], hostDirectives: [ThemeCheckDirective], standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--
|
|
7670
|
+
], hostDirectives: [ThemeCheckDirective], standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
7671
7671
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
7672
7672
|
type: ViewChild,
|
|
7673
7673
|
args: ['segmentedControl']
|