@danske/sapphire-angular 1.31.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/badge/src/badge.component.mjs +4 -4
- package/esm2020/lib/button/src/button-group.component.mjs +6 -14
- package/esm2020/lib/button/src/button.component.mjs +9 -38
- package/esm2020/lib/button/src/icon-button.component.mjs +13 -40
- package/esm2020/lib/button/src/toggle-button.component.mjs +7 -6
- package/esm2020/lib/checkbox/src/checkbox-group.component.mjs +6 -3
- package/esm2020/lib/checkbox/src/checkbox.component.mjs +12 -4
- package/esm2020/lib/common/disabled.mjs +1 -1
- package/esm2020/lib/common/sapphire-view-encapsulation.mjs +3 -1
- package/esm2020/lib/core.module.mjs +8 -8
- package/esm2020/lib/field/src/field-control.mjs +2 -1
- package/esm2020/lib/field/src/field.component.mjs +8 -8
- package/esm2020/lib/help-button/public_api.mjs +3 -0
- package/esm2020/lib/help-button/src/help-button.component.mjs +112 -0
- package/esm2020/lib/help-button/src/help-button.module.mjs +33 -0
- package/esm2020/lib/icon/src/icon-size-provider.mjs +2 -2
- package/esm2020/lib/icon/src/icon.component.mjs +22 -37
- package/esm2020/lib/label/src/label.component.mjs +5 -5
- package/esm2020/lib/link/src/link.component.mjs +5 -5
- package/esm2020/lib/listbox/src/listbox-item.component.mjs +2 -2
- package/esm2020/lib/listbox/src/listbox.component.mjs +5 -5
- package/esm2020/lib/listbox/src/option-primary-text.directive.mjs +4 -2
- package/esm2020/lib/listbox/src/option.component.mjs +4 -2
- package/esm2020/lib/menu/src/menu-trigger.directive.mjs +5 -2
- package/esm2020/lib/menu/src/menu.component.mjs +4 -4
- package/esm2020/lib/modal/public_api.mjs +8 -12
- package/esm2020/lib/modal/src/dialog/confirmation-dialog.component.mjs +9 -7
- package/esm2020/lib/modal/src/dialog/danger-dialog.component.mjs +9 -7
- package/esm2020/lib/modal/src/dialog/dialog.component.mjs +10 -35
- package/esm2020/lib/modal/src/layout/modal-back-button.directive.mjs +13 -0
- package/esm2020/lib/modal/src/layout/modal-body.component.mjs +38 -0
- package/esm2020/lib/modal/src/layout/modal-close-button.directive.mjs +31 -0
- package/esm2020/lib/modal/src/layout/modal-footer.component.mjs +39 -0
- package/esm2020/lib/modal/src/layout/modal-header.component.mjs +77 -0
- package/esm2020/lib/modal/src/layout/modal-layout.component.mjs +15 -0
- package/esm2020/lib/modal/src/modal-base.component.mjs +7 -13
- package/esm2020/lib/modal/src/modal.module.mjs +43 -71
- package/esm2020/lib/modal/src/modal.service.mjs +1 -1
- package/esm2020/lib/modal/src/panel/panel.component.mjs +8 -15
- package/esm2020/lib/notification-badge/src/notification-badge.component.mjs +4 -4
- package/esm2020/lib/pagination/i18n/da-DK.json +2 -0
- package/esm2020/lib/pagination/i18n/de-DE.json +2 -0
- package/esm2020/lib/pagination/i18n/en-US.json +2 -0
- package/esm2020/lib/pagination/i18n/fi-FI.json +2 -0
- package/esm2020/lib/pagination/i18n/nb-NO.json +2 -0
- package/esm2020/lib/pagination/i18n/pl-PL.json +2 -0
- package/esm2020/lib/pagination/i18n/sv-SE.json +2 -0
- package/esm2020/lib/pagination/src/page-selection-row.component.mjs +119 -0
- package/esm2020/lib/pagination/src/pagination.component.mjs +20 -4
- package/esm2020/lib/pagination/src/pagination.module.mjs +4 -3
- package/esm2020/lib/popover/src/popover-trigger.directive.mjs +14 -4
- package/esm2020/lib/radio/src/radio-group.component.mjs +3 -3
- package/esm2020/lib/radio/src/radio.component.mjs +3 -3
- package/esm2020/lib/segmented-tabs/src/segmented-tabs.component.mjs +4 -4
- package/esm2020/lib/select/src/basic-select/basic-select.component.mjs +7 -27
- package/esm2020/lib/select/src/select/select.component.mjs +5 -5
- package/esm2020/lib/skeleton/src/skeleton.component.mjs +2 -2
- package/esm2020/lib/switch/src/switch.component.mjs +5 -5
- package/esm2020/lib/table/public_api.mjs +2 -1
- package/esm2020/lib/table/src/table-footer.directive.mjs +20 -0
- package/esm2020/lib/table/src/table-head-cell.component.mjs +3 -3
- package/esm2020/lib/table/src/table-sort-header.directive.mjs +2 -3
- package/esm2020/lib/table/src/table-sort.directive.mjs +13 -3
- package/esm2020/lib/table/src/table.component.mjs +7 -14
- package/esm2020/lib/table/src/table.directive.mjs +12 -6
- package/esm2020/lib/table/src/table.module.mjs +6 -1
- package/esm2020/lib/text-field/src/text-field.component.mjs +5 -5
- package/esm2020/lib/theme/src/themes.mjs +4 -4
- package/esm2020/lib/tooltip/src/tooltip.directive.mjs +3 -3
- package/esm2020/lib/typography/src/paragraph.component.mjs +5 -5
- package/esm2020/public-api.mjs +2 -2
- package/fesm2015/danske-sapphire-angular.mjs +721 -847
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +728 -852
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/badge/src/badge.component.d.ts +2 -2
- package/lib/button/src/button-group.component.d.ts +3 -5
- package/lib/button/src/button.component.d.ts +4 -11
- package/lib/button/src/icon-button.component.d.ts +4 -11
- package/lib/button/src/toggle-button.component.d.ts +3 -3
- package/lib/checkbox/src/checkbox-group.component.d.ts +1 -0
- package/lib/checkbox/src/checkbox.component.d.ts +3 -1
- package/lib/common/disabled.d.ts +1 -1
- package/lib/core.module.d.ts +2 -2
- package/lib/field/src/field.component.d.ts +4 -4
- package/lib/help-button/public_api.d.ts +2 -0
- package/lib/help-button/src/help-button.component.d.ts +50 -0
- package/lib/help-button/src/help-button.module.d.ts +7 -0
- package/lib/icon/src/icon-size-provider.d.ts +2 -2
- package/lib/icon/src/icon.component.d.ts +6 -3
- package/lib/label/src/label.component.d.ts +3 -3
- package/lib/link/src/link.component.d.ts +1 -1
- package/lib/listbox/src/listbox-item.component.d.ts +1 -1
- package/lib/listbox/src/listbox.component.d.ts +1 -1
- package/lib/menu/src/menu.component.d.ts +1 -1
- package/lib/modal/public_api.d.ts +7 -11
- package/lib/modal/src/dialog/dialog.component.d.ts +2 -17
- package/lib/modal/src/layout/modal-back-button.directive.d.ts +5 -0
- package/lib/modal/src/{panel/panel-content.component.d.ts → layout/modal-body.component.d.ts} +3 -3
- package/lib/modal/src/{modal-close-button.directive.d.ts → layout/modal-close-button.directive.d.ts} +2 -2
- package/lib/modal/src/layout/modal-footer.component.d.ts +21 -0
- package/lib/modal/src/layout/modal-header.component.d.ts +29 -0
- package/lib/modal/src/layout/modal-layout.component.d.ts +6 -0
- package/lib/modal/src/modal-base.component.d.ts +5 -7
- package/lib/modal/src/modal.module.d.ts +21 -25
- package/lib/modal/src/modal.service.d.ts +2 -2
- package/lib/modal/src/panel/panel.component.d.ts +3 -6
- package/lib/notification-badge/src/notification-badge.component.d.ts +1 -1
- package/lib/pagination/src/page-selection-row.component.d.ts +39 -0
- package/lib/pagination/src/pagination.component.d.ts +8 -1
- package/lib/pagination/src/pagination.module.d.ts +8 -7
- package/lib/popover/src/popover-trigger.directive.d.ts +6 -1
- package/lib/segmented-tabs/src/segmented-tabs.component.d.ts +1 -1
- package/lib/select/src/basic-select/basic-select.component.d.ts +5 -7
- package/lib/switch/src/switch.component.d.ts +2 -2
- package/lib/table/public_api.d.ts +1 -0
- package/lib/table/src/table-footer.directive.d.ts +7 -0
- package/lib/table/src/table-sort.directive.d.ts +7 -4
- package/lib/table/src/table.component.d.ts +4 -3
- package/lib/table/src/table.directive.d.ts +3 -1
- package/lib/table/src/table.module.d.ts +12 -11
- package/lib/typography/src/paragraph.component.d.ts +1 -1
- package/package.json +4 -4
- package/public-api.d.ts +1 -1
- package/esm2020/lib/contextual-help/public_api.mjs +0 -6
- package/esm2020/lib/contextual-help/src/contextual-help.component.mjs +0 -112
- package/esm2020/lib/contextual-help/src/contextual-help.module.mjs +0 -33
- package/esm2020/lib/modal/src/dialog/dialog-close-button.directive.mjs +0 -18
- package/esm2020/lib/modal/src/dialog/dialog-content.directive.mjs +0 -29
- package/esm2020/lib/modal/src/dialog/dialog-footer.component.mjs +0 -77
- package/esm2020/lib/modal/src/dialog/dialog-header.component.mjs +0 -66
- package/esm2020/lib/modal/src/modal-close-button.directive.mjs +0 -31
- package/esm2020/lib/modal/src/panel/inline-panel.component.mjs +0 -15
- package/esm2020/lib/modal/src/panel/panel-back-button.directive.mjs +0 -13
- package/esm2020/lib/modal/src/panel/panel-close-button.directive.mjs +0 -16
- package/esm2020/lib/modal/src/panel/panel-content.component.mjs +0 -38
- package/esm2020/lib/modal/src/panel/panel-footer.component.mjs +0 -38
- package/esm2020/lib/modal/src/panel/panel-header.component.mjs +0 -69
- package/lib/contextual-help/public_api.d.ts +0 -2
- package/lib/contextual-help/src/contextual-help.component.d.ts +0 -50
- package/lib/contextual-help/src/contextual-help.module.d.ts +0 -7
- package/lib/modal/src/dialog/dialog-close-button.directive.d.ts +0 -7
- package/lib/modal/src/dialog/dialog-content.directive.d.ts +0 -13
- package/lib/modal/src/dialog/dialog-footer.component.d.ts +0 -37
- package/lib/modal/src/dialog/dialog-header.component.d.ts +0 -25
- package/lib/modal/src/panel/inline-panel.component.d.ts +0 -6
- package/lib/modal/src/panel/panel-back-button.directive.d.ts +0 -5
- package/lib/modal/src/panel/panel-close-button.directive.d.ts +0 -6
- package/lib/modal/src/panel/panel-footer.component.d.ts +0 -21
- package/lib/modal/src/panel/panel-header.component.d.ts +0 -26
|
@@ -8,7 +8,7 @@ export class BadgeComponent {
|
|
|
8
8
|
get classNames() {
|
|
9
9
|
return [
|
|
10
10
|
'sapphire-badge',
|
|
11
|
-
`sapphire-badge--${this.size
|
|
11
|
+
`sapphire-badge--${this.size}`,
|
|
12
12
|
`sapphire-badge--${this.variant}-${this.color}`,
|
|
13
13
|
].join(' ');
|
|
14
14
|
}
|
|
@@ -20,9 +20,9 @@ export class BadgeComponent {
|
|
|
20
20
|
*/
|
|
21
21
|
this.id = '';
|
|
22
22
|
/**
|
|
23
|
-
* @default '
|
|
23
|
+
* @default 'md'
|
|
24
24
|
*/
|
|
25
|
-
this.size = '
|
|
25
|
+
this.size = 'md';
|
|
26
26
|
/**
|
|
27
27
|
* Whether the badge has a saturated or faint background.
|
|
28
28
|
*
|
|
@@ -63,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
63
63
|
type: HostBinding,
|
|
64
64
|
args: ['class']
|
|
65
65
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9iYWRnZS9zcmMvYmFkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3hELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDOzs7QUFrQ3BGLE1BQU0sT0FBTyxjQUFjO0lBbUN6QixJQUNZLFVBQVU7UUFDcEIsT0FBTztZQUNMLGdCQUFnQjtZQUNoQixtQkFBbUIsSUFBSSxDQUFDLElBQUksRUFBRTtZQUM5QixtQkFBbUIsSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1NBQ2hELENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2QsQ0FBQztJQUVEO1FBM0NxQixTQUFJLEdBQUcsY0FBYyxDQUFDO1FBRTNDOzs7V0FHRztRQUlILE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFUjs7V0FFRztRQUVILFNBQUksR0FBVSxJQUFJLENBQUM7UUFFbkI7Ozs7V0FJRztRQUVILFlBQU8sR0FBYSxTQUFTLENBQUM7UUFFOUI7Ozs7O1dBS0c7UUFFSCxVQUFLLEdBQVcsYUFBYSxDQUFDO0lBV2YsQ0FBQzs7MkdBNUNMLGNBQWM7K0ZBQWQsY0FBYyxrUkFKZiwyQkFBMkI7QUFjckM7SUFEQyxNQUFNLEVBQUU7MENBQ0Q7MkZBVkcsY0FBYztrQkFOMUIsU0FBUzsrQkFDRSxVQUFVLFlBQ1YsMkJBQTJCLGtCQUNyQixDQUFDLHdCQUF3QixDQUFDOzBFQUlyQixJQUFJO3NCQUF4QixXQUFXO3VCQUFDLE1BQU07Z0JBU25CLEVBQUU7c0JBSEQsV0FBVzs7c0JBQ1gsS0FBSztnQkFRTixJQUFJO3NCQURILEtBQUs7Z0JBU04sT0FBTztzQkFETixLQUFLO2dCQVVOLEtBQUs7c0JBREosS0FBSztnQkFJTSxVQUFVO3NCQURyQixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQXV0b0lkIH0gZnJvbSAnLi4vLi4vY29tbW9uL2F1dG8taWQuZGVjb3JhdG9yJztcbmltcG9ydCB7IFVzZUNvbXBvbmVudFN0eWxlc09uSG9zdCB9IGZyb20gJy4uLy4uL2NvbW1vbi9zYXBwaGlyZS12aWV3LWVuY2Fwc3VsYXRpb24nO1xuXG50eXBlIENvbG9yID1cbiAgfCAncG9zaXRpdmUnXG4gIHwgJ25lZ2F0aXZlJ1xuICB8ICd3YXJuaW5nJ1xuICB8ICdpbmZvcm1hdGl2ZSdcbiAgfCAncGFzc2l2ZSdcbiAgfCAnYXF1YSdcbiAgfCAnY29wcGVyJ1xuICB8ICdlbGVjdHJvJ1xuICB8ICdpbmRpZ28nXG4gIHwgJ2xpbWUnXG4gIHwgJ3BpbmsnXG4gIHwgJ3Zpb2xldCdcbiAgfCAnZ29sZCdcbiAgfCAnYmVpZ2UnXG4gIHwgJ29yY2hpZCdcbiAgfCAnZ3JheSdcbiAgfCAnY29iYWx0J1xuICB8ICdmb3Jlc3RHcmVlbidcbiAgfCAndGVhbCdcbiAgfCAnb3JhbmdlJztcblxudHlwZSBWYXJpYW50ID0gJ3ByaW1hcnknIHwgJ3NlY29uZGFyeSc7XG5cbnR5cGUgU2l6ZSA9ICdzbScgfCAnbWQnIHwgJ2xnJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtYmFkZ2UnLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50PjwvbmctY29udGVudD4nLFxuICBob3N0RGlyZWN0aXZlczogW1VzZUNvbXBvbmVudFN0eWxlc09uSG9zdF0sXG4gIHN0eWxlVXJsczogWycuL2JhZGdlLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdyb2xlJykgcm9sZSA9ICdwcmVzZW50YXRpb24nO1xuXG4gIC8qKlxuICAgKiBBIHVuaXF1ZSBpZCBmb3IgdGhlIGhvc3QgRE9NIGVsZW1lbnQuXG4gICAqIElmIG5vbmUgaXMgc3VwcGxpZWQsIGl0IHdpbGwgYmUgYXV0by1nZW5lcmF0ZWQuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoKVxuICBASW5wdXQoKVxuICBAQXV0b0lkKClcbiAgaWQgPSAnJztcblxuICAvKipcbiAgICogQGRlZmF1bHQgJ21kJ1xuICAgKi9cbiAgQElucHV0KClcbiAgc2l6ZT86IFNpemUgPSAnbWQnO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBiYWRnZSBoYXMgYSBzYXR1cmF0ZWQgb3IgZmFpbnQgYmFja2dyb3VuZC5cbiAgICpcbiAgICogQGRlZmF1bHQgJ3ByaW1hcnknXG4gICAqL1xuICBASW5wdXQoKVxuICB2YXJpYW50PzogVmFyaWFudCA9ICdwcmltYXJ5JztcblxuICAvKipcbiAgICogVGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIGJhZGdlLlxuICAgKiBDYW4gZWl0aGVyIGJlIHNlbWFudGljIG9yIG9uZSBvZiB0aGUgbmFtZWQgZGVjb3JhdGl2ZSBjb2xvci5cbiAgICpcbiAgICogQGRlZmF1bHQgJ2luZm9ybWF0aXZlJ1xuICAgKi9cbiAgQElucHV0KClcbiAgY29sb3I/OiBDb2xvciA9ICdpbmZvcm1hdGl2ZSc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByaXZhdGUgZ2V0IGNsYXNzTmFtZXMoKSB7XG4gICAgcmV0dXJuIFtcbiAgICAgICdzYXBwaGlyZS1iYWRnZScsXG4gICAgICBgc2FwcGhpcmUtYmFkZ2UtLSR7dGhpcy5zaXplfWAsXG4gICAgICBgc2FwcGhpcmUtYmFkZ2UtLSR7dGhpcy52YXJpYW50fS0ke3RoaXMuY29sb3J9YCxcbiAgICBdLmpvaW4oJyAnKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiJdfQ==
|
|
@@ -27,26 +27,20 @@ export class ButtonGroupComponent {
|
|
|
27
27
|
this.stretch = 'none';
|
|
28
28
|
/**
|
|
29
29
|
* Spacing between the buttons
|
|
30
|
-
* @default
|
|
30
|
+
* @default md
|
|
31
31
|
*/
|
|
32
|
-
this.spacing = '
|
|
32
|
+
this.spacing = 'md';
|
|
33
33
|
/**
|
|
34
34
|
* @default "horizontal"
|
|
35
35
|
*/
|
|
36
36
|
this.orientation = 'horizontal';
|
|
37
37
|
}
|
|
38
|
-
get iconSpacing() {
|
|
39
|
-
return this.spacing;
|
|
40
|
-
}
|
|
41
|
-
set iconSpacing(value) {
|
|
42
|
-
this.spacing = value;
|
|
43
|
-
}
|
|
44
38
|
}
|
|
45
39
|
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch",
|
|
40
|
+
ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === 'xs'\"\n [class.sapphire-button-group--spacing-sm]=\"spacing === 'sm'\"\n [class.sapphire-button-group--spacing-lg]=\"spacing === 'lg'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-lg{gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-button-group--spacing-sm{gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-semantic-size-spacing-5)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
47
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
48
42
|
type: Component,
|
|
49
|
-
args: [{ selector: 'sp-button-group', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === '
|
|
43
|
+
args: [{ selector: 'sp-button-group', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"\n stretch !== 'none'\n ? 'sapphire-button-group--stretch'\n : 'sapphire-button-group--align-' + align\n \"\n [class.sapphire-button-group--stretch-auto-vertical]=\"\n stretch === 'autoVertical'\n \"\n [class.sapphire-button-group--spacing-xs]=\"spacing === 'xs'\"\n [class.sapphire-button-group--spacing-sm]=\"spacing === 'sm'\"\n [class.sapphire-button-group--spacing-lg]=\"spacing === 'lg'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-lg{gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-button-group--spacing-sm{gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-semantic-size-spacing-5)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"] }]
|
|
50
44
|
}], propDecorators: {
|
|
51
45
|
/**
|
|
52
46
|
* Alignment of buttons within the group.
|
|
@@ -68,12 +62,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
68
62
|
*/
|
|
69
63
|
stretch: [{
|
|
70
64
|
type: Input
|
|
71
|
-
}], iconSpacing: [{
|
|
72
|
-
type: Input
|
|
73
65
|
}],
|
|
74
66
|
/**
|
|
75
67
|
* Spacing between the buttons
|
|
76
|
-
* @default
|
|
68
|
+
* @default md
|
|
77
69
|
*/
|
|
78
70
|
spacing: [{
|
|
79
71
|
type: Input
|
|
@@ -84,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
84
76
|
orientation: [{
|
|
85
77
|
type: Input
|
|
86
78
|
}] } });
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL3NyYy9idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9idXR0b24vc3JjL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBSXBFOzs7O0dBSUc7QUFPSCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBUUU7OztXQUdHO1FBQ0gsVUFBSyxHQUFnQyxPQUFPLENBQUM7UUFHN0M7Ozs7Ozs7Ozs7V0FVRztRQUNILFlBQU8sR0FBNEIsTUFBTSxDQUFDO1FBRzFDOzs7V0FHRztRQUNILFlBQU8sR0FBOEIsSUFBSSxDQUFDO1FBRzFDOztXQUVHO1FBQ0gsZ0JBQVcsR0FBK0IsWUFBWSxDQUFDO0tBQ3hEOztpSEFsQ1ksb0JBQW9CO3FHQUFwQixvQkFBb0IsdUpDZmpDLDZrQkFpQkE7MkZERmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLGlCQUFpQixpQkFHWixpQkFBaUIsQ0FBQyxJQUFJOztRQUlyQzs7O1dBR0c7UUFDSCxLQUFLO3NCQUxKLEtBQUs7O1FBUU47Ozs7Ozs7Ozs7V0FVRztRQUNILE9BQU87c0JBWk4sS0FBSzs7UUFlTjs7O1dBR0c7UUFDSCxPQUFPO3NCQUxOLEtBQUs7O1FBUU47O1dBRUc7UUFDSCxXQUFXO3NCQUpWLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgdHlwZSBCdXR0b25Hcm91cFN0cmV0Y2hUeXBlID0gJ25vbmUnIHwgJ2RlZmF1bHQnIHwgJ2F1dG9WZXJ0aWNhbCc7XG5cbi8qKlxuICogQnV0dG9uR3JvdXAgaXMgYSB1dGlsaXR5IGNvbXBvbmVudCB3aGljaCBlbnN1cmVzIGNvbnNpc3RlbnQgc3BhY2luZyBiZXR3ZWVuXG4gKiBidXR0b25zIEFsbCBjaGlsZHJlbiBtdXN0IGJlIG9mIHR5cGUgQnV0dG9uLiBJY29uIGJ1dHRvbnMgY2Fubm90IGJlIG1peGVkXG4gKiB3aXRoIHN0YW5kYXJkIGJ1dHRvbnMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NwLWJ1dHRvbi1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24tZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24tZ3JvdXAuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSwgLy8gVE9ETzogY3JlYXRlIGFub3RoZXIgaG9zdERpcmVjdGl2ZSBmb3IgdGhpcz9cbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uR3JvdXBDb21wb25lbnQge1xuICBASW5wdXQoKVxuICAvKipcbiAgICogQWxpZ25tZW50IG9mIGJ1dHRvbnMgd2l0aGluIHRoZSBncm91cC5cbiAgICogQGRlZmF1bHQgXCJyaWdodFwiXG4gICAqL1xuICBhbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcicgfCAncmlnaHQnID0gJ3JpZ2h0JztcblxuICBASW5wdXQoKVxuICAvKipcbiAgICogQ29udHJvbHMgc3RyZXRjaGluZyBvZiB0aGUgY29udGVudHMuXG4gICAqXG4gICAqIGBub25lYCAtIHRoZSBjaGlsZHJlbiB3aWxsIG5vdCBzdHJldGNoIGFuZCB3aWxsIHJlc3BlY3QgdGhlIGFsaWdubWVudCBzZXQgd2l0aCB0aGUgYWxpZ24gcHJvcC5cbiAgICpcbiAgICogYGRlZmF1bHRgIC0gdGhlIGNoaWxkcmVuIHdpbGwgc3RyZXRjaCB0byB0YWtlIGZ1bGwgd2lkdGguIElmIHRoZSBjaGlsZHJlbiBvdmVyZmxvdywgdGhleSB3aWxsIGJlIHdyYXBwZWQgdmVydGljYWxseS5cbiAgICpcbiAgICogYGF1dG9WZXJ0aWNhbGAgLSBzYW1lIGJlaGF2aW91ciBhcyBgZGVmYXVsdGAsIGJ1dCBpZiB0aGVyZSBpcyBtb3JlIHRoYW4gMyBjaGlsZHJlbiwgdGhleSB3aWxsIGJlIHdyYXBwZWQgdmVydGljYWxseSBldmVuIGlmIHRoZXkgZG9uJ3Qgb3ZlcmZsb3cuXG4gICAqXG4gICAqIEBkZWZhdWx0IFwibm9uZVwiXG4gICAqL1xuICBzdHJldGNoPzogQnV0dG9uR3JvdXBTdHJldGNoVHlwZSA9ICdub25lJztcblxuICBASW5wdXQoKVxuICAvKipcbiAgICogU3BhY2luZyBiZXR3ZWVuIHRoZSBidXR0b25zXG4gICAqIEBkZWZhdWx0IG1kXG4gICAqL1xuICBzcGFjaW5nOiAnbGcnIHwgJ21kJyB8ICdzbScgfCAneHMnID0gJ21kJztcblxuICBASW5wdXQoKVxuICAvKipcbiAgICogQGRlZmF1bHQgXCJob3Jpem9udGFsXCJcbiAgICovXG4gIG9yaWVudGF0aW9uPzogJ3ZlcnRpY2FsJyB8ICdob3Jpem9udGFsJyA9ICdob3Jpem9udGFsJztcbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJzYXBwaGlyZS1idXR0b24tZ3JvdXBcIlxuICBbbmdDbGFzc109XCJcbiAgICBzdHJldGNoICE9PSAnbm9uZSdcbiAgICAgID8gJ3NhcHBoaXJlLWJ1dHRvbi1ncm91cC0tc3RyZXRjaCdcbiAgICAgIDogJ3NhcHBoaXJlLWJ1dHRvbi1ncm91cC0tYWxpZ24tJyArIGFsaWduXG4gIFwiXG4gIFtjbGFzcy5zYXBwaGlyZS1idXR0b24tZ3JvdXAtLXN0cmV0Y2gtYXV0by12ZXJ0aWNhbF09XCJcbiAgICBzdHJldGNoID09PSAnYXV0b1ZlcnRpY2FsJ1xuICBcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS1zcGFjaW5nLXhzXT1cInNwYWNpbmcgPT09ICd4cydcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS1zcGFjaW5nLXNtXT1cInNwYWNpbmcgPT09ICdzbSdcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS1zcGFjaW5nLWxnXT1cInNwYWNpbmcgPT09ICdsZydcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS12ZXJ0aWNhbF09XCJvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1wiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
|
|
@@ -10,39 +10,13 @@ import * as i1 from "../../theme/src/theme-check.directive";
|
|
|
10
10
|
import * as i2 from "../../common/sapphire-view-encapsulation";
|
|
11
11
|
import * as i3 from "@angular/common";
|
|
12
12
|
export class ButtonComponent {
|
|
13
|
-
get
|
|
14
|
-
|
|
15
|
-
if (this.variant === 'primary') {
|
|
16
|
-
derivedVariantAndStyle = 'primary';
|
|
17
|
-
}
|
|
18
|
-
else if (this.variant === 'dangerSecondary') {
|
|
19
|
-
// TODO(v2): Remove as we remove this deprecated value for variant-prop
|
|
20
|
-
derivedVariantAndStyle = 'danger';
|
|
21
|
-
}
|
|
22
|
-
else if (this.variant === 'dangerTertiary') {
|
|
23
|
-
// TODO(v2): Remove as we remove this deprecated value for variant-prop
|
|
24
|
-
derivedVariantAndStyle = 'danger-ghost';
|
|
25
|
-
}
|
|
26
|
-
else if (this.appearance === 'fill') {
|
|
27
|
-
derivedVariantAndStyle = this.variant;
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
derivedVariantAndStyle = `${this.variant}-${this.appearance}`;
|
|
31
|
-
}
|
|
32
|
-
return `sapphire-button--${derivedVariantAndStyle}`;
|
|
13
|
+
get variantClass() {
|
|
14
|
+
return `sapphire-button--${this.variant}`;
|
|
33
15
|
}
|
|
34
16
|
constructor(elementRef) {
|
|
35
17
|
this.elementRef = elementRef;
|
|
36
18
|
this.variant = 'primary';
|
|
37
|
-
|
|
38
|
-
this.appearance = 'fill';
|
|
39
|
-
/**
|
|
40
|
-
* Applies different styles for a better contrast with the secondary color background.
|
|
41
|
-
* @default 'primary'
|
|
42
|
-
* @deprecated This will be done automatically.
|
|
43
|
-
*/
|
|
44
|
-
this.surface = 'primary';
|
|
45
|
-
this.size = 'medium';
|
|
19
|
+
this.size = 'md';
|
|
46
20
|
this.iconAlign = 'left';
|
|
47
21
|
/**
|
|
48
22
|
* The behavior of the button when used in an HTML form.
|
|
@@ -52,6 +26,7 @@ export class ButtonComponent {
|
|
|
52
26
|
ngAfterContentInit() {
|
|
53
27
|
if (this.icon) {
|
|
54
28
|
if (!this.buttonIcon && isDevMode()) {
|
|
29
|
+
// eslint-disable-next-line no-console
|
|
55
30
|
console.error(`Icon is used in a button of variant "${this.variant}".
|
|
56
31
|
You should either add spButtonIcon on the icon or use sp-icon-button instead of sp-button"`);
|
|
57
32
|
}
|
|
@@ -59,7 +34,7 @@ export class ButtonComponent {
|
|
|
59
34
|
}
|
|
60
35
|
}
|
|
61
36
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant",
|
|
37
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--lg": "size === \"lg\"", "class.sapphire-button--sm": "size === \"sm\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "type": "this.type", "class": "this.variantClass" }, classAttribute: "sapphire-button" }, providers: [
|
|
63
38
|
{
|
|
64
39
|
provide: ICON_SIZE_PROVIDER,
|
|
65
40
|
useExisting: forwardRef(() => ButtonComponent),
|
|
@@ -74,8 +49,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
74
49
|
'[attr.disabled]': 'disabled || null',
|
|
75
50
|
'[class.is-disabled]': 'disabled',
|
|
76
51
|
class: 'sapphire-button',
|
|
77
|
-
'[class.sapphire-button--lg]': 'size === "
|
|
78
|
-
'[class.sapphire-button--sm]': 'size === "
|
|
52
|
+
'[class.sapphire-button--lg]': 'size === "lg"',
|
|
53
|
+
'[class.sapphire-button--sm]': 'size === "sm"',
|
|
79
54
|
'[class.sapphire-button--with-left-icon]': 'buttonIcon && iconAlign === "left"',
|
|
80
55
|
'[class.sapphire-button--with-right-icon]': 'buttonIcon && iconAlign === "right"',
|
|
81
56
|
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], providers: [
|
|
@@ -86,10 +61,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
86
61
|
], template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);text-transform:none;letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-global-size-generic-100)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-semantic-size-spacing-20)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-semantic-size-spacing-20)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background-color:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-content-action-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-button--secondary{background-color:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-semantic-color-content-action-secondary-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:var(--sapphire-semantic-color-background-action-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-button--tertiary{background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-semantic-color-content-action-tertiary-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:var(--sapphire-semantic-color-background-action-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-button--danger{background-color:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-content-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:var(--sapphire-semantic-color-background-action-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-semantic-color-background-selection-selected-default);color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-selected-active);color:var(--sapphire-semantic-color-content-selection-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-semantic-color-background-selection-unselected-default);color:var(--sapphire-semantic-color-content-selection-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-unselected-active);color:var(--sapphire-semantic-color-content-selection-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-button--sm .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);font-size:var(--sapphire-semantic-size-font-control-default);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--secondary-text,.sapphire-button--lg.sapphire-button--tertiary-text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-40);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--secondary-text,.sapphire-button--sm.sapphire-button--tertiary-text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}\n"] }]
|
|
87
62
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
|
|
88
63
|
type: Input
|
|
89
|
-
}], appearance: [{
|
|
90
|
-
type: Input
|
|
91
|
-
}], surface: [{
|
|
92
|
-
type: Input
|
|
93
64
|
}], size: [{
|
|
94
65
|
type: Input
|
|
95
66
|
}], disabled: [{
|
|
@@ -101,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
101
72
|
}, {
|
|
102
73
|
type: HostBinding,
|
|
103
74
|
args: ['type']
|
|
104
|
-
}],
|
|
75
|
+
}], variantClass: [{
|
|
105
76
|
type: HostBinding,
|
|
106
77
|
args: ['class']
|
|
107
78
|
}], buttonIcon: [{
|
|
@@ -111,4 +82,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
111
82
|
type: ContentChild,
|
|
112
83
|
args: [IconComponent]
|
|
113
84
|
}] } });
|
|
114
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL3NyYy9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9idXR0b24vc3JjL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUVaLFVBQVUsRUFDVixXQUFXLEVBQ1gsS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsYUFBYSxFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDMUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzlELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDOzs7OztBQTZCcEYsTUFBTSxPQUFPLGVBQWU7SUErQjFCLElBQ1ksWUFBWTtRQUN0QixPQUFPLG9CQUFvQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDNUMsQ0FBQztJQUtELFlBQW1CLFVBQXlDO1FBQXpDLGVBQVUsR0FBVixVQUFVLENBQStCO1FBckM1RCxZQUFPLEdBVWEsU0FBUyxDQUFDO1FBRzlCLFNBQUksR0FBd0IsSUFBSSxDQUFDO1FBT2pDLGNBQVMsR0FBcUIsTUFBTSxDQUFDO1FBRXJDOztXQUVHO1FBR0gsU0FBSSxHQUFrQyxRQUFRLENBQUM7SUFVZ0IsQ0FBQztJQUVoRSxrQkFBa0I7UUFDaEIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksU0FBUyxFQUFFLEVBQUU7Z0JBQ25DLHNDQUFzQztnQkFDdEMsT0FBTyxDQUFDLEtBQUssQ0FBQyx3Q0FBd0MsSUFBSSxDQUFDLE9BQU87bUdBQ3lCLENBQUMsQ0FBQzthQUM5RjtTQUNGO0lBQ0gsQ0FBQzs7NEdBakRVLGVBQWU7Z0dBQWYsZUFBZSw4bEJBUGY7UUFDVDtZQUNFLE9BQU8sRUFBRSxrQkFBa0I7WUFDM0IsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7U0FDL0M7S0FDRixrRUFzQ2EsbUJBQW1CLHVFQUNuQixhQUFhLHFKQ25GN0IsMHBCQXdCQTtBRHlDRTtJQURDLGFBQWE7aURBQ1M7MkZBbkJaLGVBQWU7a0JBM0IzQixTQUFTOytCQUNFLGlDQUFpQyxtQkFHMUIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDSixpQkFBaUIsRUFBRSxrQkFBa0I7d0JBQ3JDLHFCQUFxQixFQUFFLFVBQVU7d0JBRWpDLEtBQUssRUFBRSxpQkFBaUI7d0JBRXhCLDZCQUE2QixFQUFFLGVBQWU7d0JBQzlDLDZCQUE2QixFQUFFLGVBQWU7d0JBRTlDLHlDQUF5QyxFQUN2QyxvQ0FBb0M7d0JBQ3RDLDBDQUEwQyxFQUN4QyxxQ0FBcUM7cUJBQ3hDLGtCQUNlLENBQUMsbUJBQW1CLEVBQUUsd0JBQXdCLENBQUMsYUFDcEQ7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGtCQUFrQjs0QkFDM0IsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZ0JBQWdCLENBQUM7eUJBQy9DO3FCQUNGO2lHQUlELE9BQU87c0JBRE4sS0FBSztnQkFjTixJQUFJO3NCQURILEtBQUs7Z0JBS04sUUFBUTtzQkFGUCxLQUFLO2dCQUtOLFNBQVM7c0JBRFIsS0FBSztnQkFRTixJQUFJO3NCQUZILEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsTUFBTTtnQkFJUCxZQUFZO3NCQUR2QixXQUFXO3VCQUFDLE9BQU87Z0JBS2UsVUFBVTtzQkFBNUMsWUFBWTt1QkFBQyxtQkFBbUI7Z0JBQ0osSUFBSTtzQkFBaEMsWUFBWTt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBmb3J3YXJkUmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIGlzRGV2TW9kZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5pbXBvcnQgeyBJY29uQ29tcG9uZW50LCBJQ09OX1NJWkVfUFJPVklERVIgfSBmcm9tICcuLi8uLi9pY29uL3B1YmxpY19hcGknO1xuaW1wb3J0IHsgVGhlbWVDaGVja0RpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL3RoZW1lL3NyYy90aGVtZS1jaGVjay5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQ29lcmNlQm9vbGVhbiB9IGZyb20gJy4uLy4uL2NvbW1vbi9jb2VyY2UtYm9vbGVhbi5kZWNvcmF0b3InO1xuaW1wb3J0IHsgQnV0dG9uSWNvbkRpcmVjdGl2ZSB9IGZyb20gJy4vYnV0dG9uLWljb24uZGlyZWN0aXZlJztcbmltcG9ydCB7IFVzZUNvbXBvbmVudFN0eWxlc09uSG9zdCB9IGZyb20gJy4uLy4uL2NvbW1vbi9zYXBwaGlyZS12aWV3LWVuY2Fwc3VsYXRpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdidXR0b25bc3AtYnV0dG9uXSwgYVtzcC1idXR0b25dJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDoge1xuICAgICdbYXR0ci5kaXNhYmxlZF0nOiAnZGlzYWJsZWQgfHwgbnVsbCcsXG4gICAgJ1tjbGFzcy5pcy1kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuXG4gICAgY2xhc3M6ICdzYXBwaGlyZS1idXR0b24nLFxuXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1idXR0b24tLWxnXSc6ICdzaXplID09PSBcImxnXCInLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLS1zbV0nOiAnc2l6ZSA9PT0gXCJzbVwiJyxcblxuICAgICdbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLS13aXRoLWxlZnQtaWNvbl0nOlxuICAgICAgJ2J1dHRvbkljb24gJiYgaWNvbkFsaWduID09PSBcImxlZnRcIicsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1idXR0b24tLXdpdGgtcmlnaHQtaWNvbl0nOlxuICAgICAgJ2J1dHRvbkljb24gJiYgaWNvbkFsaWduID09PSBcInJpZ2h0XCInLFxuICB9LFxuICBob3N0RGlyZWN0aXZlczogW1RoZW1lQ2hlY2tEaXJlY3RpdmUsIFVzZUNvbXBvbmVudFN0eWxlc09uSG9zdF0sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IElDT05fU0laRV9QUk9WSURFUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEJ1dHRvbkNvbXBvbmVudCksXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIEBJbnB1dCgpXG4gIHZhcmlhbnQ/OlxuICAgIHwgJ3ByaW1hcnknXG4gICAgfCAnc2Vjb25kYXJ5J1xuICAgIHwgJ3NlY29uZGFyeS1naG9zdCdcbiAgICB8ICdzZWNvbmRhcnktdGV4dCdcbiAgICB8ICd0ZXJ0aWFyeSdcbiAgICB8ICd0ZXJ0aWFyeS1naG9zdCdcbiAgICB8ICd0ZXJ0aWFyeS10ZXh0J1xuICAgIHwgJ2RhbmdlcidcbiAgICB8ICdkYW5nZXItZ2hvc3QnXG4gICAgfCAnZGFuZ2VyLXRleHQnID0gJ3ByaW1hcnknO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU/OiAnc20nIHwgJ21kJyB8ICdsZycgPSAnbWQnO1xuXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRpc2FibGVkOiBCb29sZWFuSW5wdXQ7XG5cbiAgQElucHV0KClcbiAgaWNvbkFsaWduOiAnbGVmdCcgfCAncmlnaHQnID0gJ2xlZnQnO1xuXG4gIC8qKlxuICAgKiBUaGUgYmVoYXZpb3Igb2YgdGhlIGJ1dHRvbiB3aGVuIHVzZWQgaW4gYW4gSFRNTCBmb3JtLlxuICAgKi9cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCd0eXBlJylcbiAgdHlwZTogJ3N1Ym1pdCcgfCAnYnV0dG9uJyB8ICdyZXNldCcgPSAnYnV0dG9uJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgcHJpdmF0ZSBnZXQgdmFyaWFudENsYXNzKCkge1xuICAgIHJldHVybiBgc2FwcGhpcmUtYnV0dG9uLS0ke3RoaXMudmFyaWFudH1gO1xuICB9XG5cbiAgQENvbnRlbnRDaGlsZChCdXR0b25JY29uRGlyZWN0aXZlKSBidXR0b25JY29uPzogQnV0dG9uSWNvbkRpcmVjdGl2ZTtcbiAgQENvbnRlbnRDaGlsZChJY29uQ29tcG9uZW50KSBpY29uPzogSWNvbkNvbXBvbmVudDtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MQnV0dG9uRWxlbWVudD4pIHt9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGlmICh0aGlzLmljb24pIHtcbiAgICAgIGlmICghdGhpcy5idXR0b25JY29uICYmIGlzRGV2TW9kZSgpKSB7XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgICAgIGNvbnNvbGUuZXJyb3IoYEljb24gaXMgdXNlZCBpbiBhIGJ1dHRvbiBvZiB2YXJpYW50IFwiJHt0aGlzLnZhcmlhbnR9XCIuXG4gICAgICAgIFlvdSBzaG91bGQgZWl0aGVyIGFkZCBzcEJ1dHRvbkljb24gb24gdGhlIGljb24gb3IgdXNlIHNwLWljb24tYnV0dG9uIGluc3RlYWQgb2Ygc3AtYnV0dG9uXCJgKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIjxzcGFuIGNsYXNzPVwic2FwcGhpcmUtYnV0dG9uX19jb250ZW50XCI+XG4gIDxzcGFuXG4gICAgKm5nSWY9XCJidXR0b25JY29uICYmIGljb25BbGlnbiA9PT0gJ2xlZnQnXCJcbiAgICBjbGFzcz1cInNhcHBoaXJlLWJ1dHRvbl9faWNvblwiXG4gID5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaWNvbkNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9zcGFuPlxuXG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG5cbiAgPHNwYW5cbiAgICAqbmdJZj1cImJ1dHRvbkljb24gJiYgaWNvbkFsaWduID09PSAncmlnaHQnXCJcbiAgICBjbGFzcz1cInNhcHBoaXJlLWJ1dHRvbl9faWNvblwiXG4gID5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaWNvbkNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9zcGFuPlxuXG4gIDxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvbmctdGVtcGxhdGU+XG4gIDxuZy10ZW1wbGF0ZSAjaWNvbkNvbnRlbnQ+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NwQnV0dG9uSWNvbl1cIj48L25nLWNvbnRlbnQ+XG4gIDwvbmctdGVtcGxhdGU+XG48L3NwYW4+XG4iXX0=
|
|
@@ -6,37 +6,13 @@ import { ICON_SIZE_PROVIDER, } from '../../icon/src/icon-size-provider';
|
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
import * as i1 from "../../common/sapphire-view-encapsulation";
|
|
8
8
|
export class IconButtonComponent {
|
|
9
|
-
get
|
|
10
|
-
|
|
11
|
-
if (this.variant === 'primary') {
|
|
12
|
-
derivedVariantAndStyle = 'primary';
|
|
13
|
-
}
|
|
14
|
-
else if (this.variant === 'neutral') {
|
|
15
|
-
// TODO(v2): Remove as we remove this deprecated value for variant-prop
|
|
16
|
-
derivedVariantAndStyle = 'tertiary-ghost';
|
|
17
|
-
}
|
|
18
|
-
else if (this.appearance === 'fill') {
|
|
19
|
-
derivedVariantAndStyle = this.variant;
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
// Making 'ghost' the default for all non-primary variants is to match previous api and avoid breaking changes
|
|
23
|
-
// TODO(v2) make 'fill' the default value for 'appearance' prop
|
|
24
|
-
derivedVariantAndStyle = `${this.variant}-ghost`;
|
|
25
|
-
}
|
|
26
|
-
return `sapphire-icon-button--${derivedVariantAndStyle}`;
|
|
9
|
+
get variantClass() {
|
|
10
|
+
return `sapphire-icon-button--${this.variant}`;
|
|
27
11
|
}
|
|
28
12
|
constructor(elementRef) {
|
|
29
13
|
this.elementRef = elementRef;
|
|
30
|
-
this.variant = 'tertiary';
|
|
31
|
-
|
|
32
|
-
this.appearance = 'ghost';
|
|
33
|
-
/**
|
|
34
|
-
* Applies different styles for a better contrast with the secondary color background.
|
|
35
|
-
* @default 'primary'
|
|
36
|
-
* @deprecated This will be done automatically
|
|
37
|
-
*/
|
|
38
|
-
this.surface = 'primary';
|
|
39
|
-
this.size = 'medium';
|
|
14
|
+
this.variant = 'tertiary-ghost';
|
|
15
|
+
this.size = 'md';
|
|
40
16
|
/**
|
|
41
17
|
* The behavior of the button when used in an HTML form.
|
|
42
18
|
*/
|
|
@@ -45,17 +21,18 @@ export class IconButtonComponent {
|
|
|
45
21
|
ngAfterViewInit() {
|
|
46
22
|
const { ariaLabel, ariaHidden } = this.elementRef.nativeElement;
|
|
47
23
|
if (!ariaLabel && ariaHidden !== 'true' && isDevMode()) {
|
|
24
|
+
// eslint-disable-next-line no-console
|
|
48
25
|
console.warn(`Label is required for accessibility reasons. Please, provide attribute "aria-label" value or set aria-hidden="true" for non-interactive elements.`, this.elementRef.nativeElement);
|
|
49
26
|
}
|
|
50
27
|
}
|
|
51
28
|
}
|
|
52
29
|
IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: { variant: "variant",
|
|
30
|
+
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-icon-button--lg": "size === \"lg\"", "class.sapphire-icon-button--sm": "size === \"sm\"", "class.sapphire-icon-button--xs": "size === \"xs\"", "class": "this.variantClass", "type": "this.type" }, classAttribute: "sapphire-icon-button" }, providers: [
|
|
54
31
|
{
|
|
55
32
|
provide: ICON_SIZE_PROVIDER,
|
|
56
33
|
useExisting: forwardRef(() => IconButtonComponent),
|
|
57
34
|
},
|
|
58
|
-
], hostDirectives: [{ directive: i1.UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-button: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)}.sapphire-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background-color:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-content-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-button--primary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background-color:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary.is-focus,.sapphire-icon-button--secondary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--tertiary{background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-button--tertiary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--danger{background-color:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger.is-focus,.sapphire-icon-button--danger:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
], hostDirectives: [{ directive: i1.UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-button: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)}.sapphire-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background-color:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-content-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-button--primary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background-color:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary.is-focus,.sapphire-icon-button--secondary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--tertiary{background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-button--tertiary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--danger{background-color:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger.is-focus,.sapphire-icon-button--danger:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background-color:var(--sapphire-semantic-color-background-selection-selected-default);color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-selected-active);color:var(--sapphire-semantic-color-content-selection-selected-active)}.sapphire-icon-button--unselected{background-color:var(--sapphire-semantic-color-background-selection-unselected-default);color:var(--sapphire-semantic-color-content-selection-unselected-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-unselected-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-unselected-active);color:var(--sapphire-semantic-color-content-selection-unselected-active)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
36
|
__decorate([
|
|
60
37
|
CoerceBoolean
|
|
61
38
|
], IconButtonComponent.prototype, "disabled", void 0);
|
|
@@ -70,21 +47,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
70
47
|
'[attr.disabled]': 'disabled || null',
|
|
71
48
|
'[class.is-disabled]': 'disabled',
|
|
72
49
|
class: 'sapphire-icon-button',
|
|
73
|
-
'[class.sapphire-icon-button--lg]': 'size === "
|
|
74
|
-
'[class.sapphire-icon-button--sm]': 'size === "
|
|
75
|
-
'[class.sapphire-icon-button--xs]': 'size === "
|
|
76
|
-
}, hostDirectives: [UseComponentStylesOnHost], template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-button: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)}.sapphire-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background-color:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-content-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-button--primary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background-color:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary.is-focus,.sapphire-icon-button--secondary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--tertiary{background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-button--tertiary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--danger{background-color:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger.is-focus,.sapphire-icon-button--danger:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}\n"] }]
|
|
50
|
+
'[class.sapphire-icon-button--lg]': 'size === "lg"',
|
|
51
|
+
'[class.sapphire-icon-button--sm]': 'size === "sm"',
|
|
52
|
+
'[class.sapphire-icon-button--xs]': 'size === "xs"',
|
|
53
|
+
}, hostDirectives: [UseComponentStylesOnHost], template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-button: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)}.sapphire-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background-color:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-content-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-button--primary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background-color:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary.is-focus,.sapphire-icon-button--secondary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default);color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-hover);color:var(--sapphire-semantic-color-content-action-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-default)}.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-secondary-ghost-active);color:var(--sapphire-semantic-color-content-action-secondary-active)}.sapphire-icon-button--tertiary{background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-button--tertiary:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-default)}.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-ghost-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-icon-button--danger{background-color:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger.is-focus,.sapphire-icon-button--danger:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default);color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-hover);color:var(--sapphire-semantic-color-content-action-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-default)}.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-action-danger-ghost-active);color:var(--sapphire-semantic-color-content-action-danger-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background-color:var(--sapphire-semantic-color-background-selection-selected-default);color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-selected-active);color:var(--sapphire-semantic-color-content-selection-selected-active)}.sapphire-icon-button--unselected{background-color:var(--sapphire-semantic-color-background-selection-unselected-default);color:var(--sapphire-semantic-color-content-selection-unselected-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-semantic-color-background-selection-unselected-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-semantic-color-background-selection-unselected-active);color:var(--sapphire-semantic-color-content-selection-unselected-active)}\n"] }]
|
|
77
54
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
|
|
78
55
|
type: Input
|
|
79
|
-
}], appearance: [{
|
|
80
|
-
type: Input
|
|
81
|
-
}], surface: [{
|
|
82
|
-
type: Input
|
|
83
56
|
}], size: [{
|
|
84
57
|
type: Input
|
|
85
58
|
}], disabled: [{
|
|
86
59
|
type: Input
|
|
87
|
-
}],
|
|
60
|
+
}], variantClass: [{
|
|
88
61
|
type: HostBinding,
|
|
89
62
|
args: ['class']
|
|
90
63
|
}], type: [{
|
|
@@ -93,4 +66,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
93
66
|
type: HostBinding,
|
|
94
67
|
args: ['type']
|
|
95
68
|
}] } });
|
|
96
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9idXR0b24vc3JjL2ljb24tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL3NyYy9pY29uLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLFdBQVcsRUFDWCxVQUFVLEVBQ1YsU0FBUyxHQUdWLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUNwRixPQUFPLEVBQ0wsa0JBQWtCLEdBRW5CLE1BQU0sbUNBQW1DLENBQUM7OztBQXlCM0MsTUFBTSxPQUFPLG1CQUFtQjtJQWtCOUIsSUFDWSxZQUFZO1FBQ3RCLE9BQU8seUJBQXlCLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqRCxDQUFDO0lBU0QsWUFBb0IsVUFBbUM7UUFBbkMsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUE1QnZELFlBQU8sR0FPYyxnQkFBZ0IsQ0FBQztRQUd0QyxTQUFJLEdBQStCLElBQUksQ0FBQztRQVd4Qzs7V0FFRztRQUdILFNBQUksR0FBa0MsUUFBUSxDQUFDO0lBRVcsQ0FBQztJQUUzRCxlQUFlO1FBQ2IsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUNoRSxJQUFJLENBQUMsU0FBUyxJQUFJLFVBQVUsS0FBSyxNQUFNLElBQUksU0FBUyxFQUFFLEVBQUU7WUFDdEQsc0NBQXNDO1lBQ3RDLE9BQU8sQ0FBQyxJQUFJLENBQ1YsbUpBQW1KLEVBQ25KLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUM5QixDQUFDO1NBQ0g7SUFDSCxDQUFDOztnSEF6Q1UsbUJBQW1CO29HQUFuQixtQkFBbUIsZ2ZBbkJuQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGtCQUFrQjtZQUMzQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDO1NBQ25EO0tBQ0Ysd0ZDM0JILHFGQUdBO0FEc0RFO0lBREMsYUFBYTtxREFDUzsyRkFoQlosbUJBQW1CO2tCQXZCL0IsU0FBUzsrQkFDRSwyQ0FBMkMsYUFHMUM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGtCQUFrQjs0QkFDM0IsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsb0JBQW9CLENBQUM7eUJBQ25EO3FCQUNGLG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNKLGlCQUFpQixFQUFFLGtCQUFrQjt3QkFDckMscUJBQXFCLEVBQUUsVUFBVTt3QkFFakMsS0FBSyxFQUFFLHNCQUFzQjt3QkFFN0Isa0NBQWtDLEVBQUUsZUFBZTt3QkFDbkQsa0NBQWtDLEVBQUUsZUFBZTt3QkFDbkQsa0NBQWtDLEVBQUUsZUFBZTtxQkFDcEQsa0JBQ2UsQ0FBQyx3QkFBd0IsQ0FBQztpR0FJMUMsT0FBTztzQkFETixLQUFLO2dCQVdOLElBQUk7c0JBREgsS0FBSztnQkFLTixRQUFRO3NCQUZQLEtBQUs7Z0JBS00sWUFBWTtzQkFEdkIsV0FBVzt1QkFBQyxPQUFPO2dCQVVwQixJQUFJO3NCQUZILEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBIb3N0QmluZGluZyxcbiAgZm9yd2FyZFJlZixcbiAgaXNEZXZNb2RlLFxuICBFbGVtZW50UmVmLFxuICBBZnRlclZpZXdJbml0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJvb2xlYW5JbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBDb2VyY2VCb29sZWFuIH0gZnJvbSAnLi4vLi4vY29tbW9uL2NvZXJjZS1ib29sZWFuLmRlY29yYXRvcic7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXNPbkhvc3QgfSBmcm9tICcuLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcbmltcG9ydCB7XG4gIElDT05fU0laRV9QUk9WSURFUixcbiAgSWNvblNpemVQcm92aWRlcixcbn0gZnJvbSAnLi4vLi4vaWNvbi9zcmMvaWNvbi1zaXplLXByb3ZpZGVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYnV0dG9uW3NwLWljb24tYnV0dG9uXSwgYVtzcC1pY29uLWJ1dHRvbl0nLFxuICB0ZW1wbGF0ZVVybDogJy4vaWNvbi1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pY29uLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBJQ09OX1NJWkVfUFJPVklERVIsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBJY29uQnV0dG9uQ29tcG9uZW50KSxcbiAgICB9LFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDoge1xuICAgICdbYXR0ci5kaXNhYmxlZF0nOiAnZGlzYWJsZWQgfHwgbnVsbCcsXG4gICAgJ1tjbGFzcy5pcy1kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuXG4gICAgY2xhc3M6ICdzYXBwaGlyZS1pY29uLWJ1dHRvbicsXG5cbiAgICAnW2NsYXNzLnNhcHBoaXJlLWljb24tYnV0dG9uLS1sZ10nOiAnc2l6ZSA9PT0gXCJsZ1wiJyxcbiAgICAnW2NsYXNzLnNhcHBoaXJlLWljb24tYnV0dG9uLS1zbV0nOiAnc2l6ZSA9PT0gXCJzbVwiJyxcbiAgICAnW2NsYXNzLnNhcHBoaXJlLWljb24tYnV0dG9uLS14c10nOiAnc2l6ZSA9PT0gXCJ4c1wiJyxcbiAgfSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtVc2VDb21wb25lbnRTdHlsZXNPbkhvc3RdLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgSWNvblNpemVQcm92aWRlciwgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpXG4gIHZhcmlhbnQ/OlxuICAgIHwgJ3ByaW1hcnknXG4gICAgfCAnc2Vjb25kYXJ5J1xuICAgIHwgJ3NlY29uZGFyeS1naG9zdCdcbiAgICB8ICd0ZXJ0aWFyeSdcbiAgICB8ICd0ZXJ0aWFyeS1naG9zdCdcbiAgICB8ICdkYW5nZXInXG4gICAgfCAnZGFuZ2VyLWdob3N0JyA9ICd0ZXJ0aWFyeS1naG9zdCc7XG5cbiAgQElucHV0KClcbiAgc2l6ZT86ICd4cycgfCAnc20nIHwgJ21kJyB8ICdsZycgPSAnbWQnO1xuXG4gIEBJbnB1dCgpXG4gIEBDb2VyY2VCb29sZWFuXG4gIGRpc2FibGVkOiBCb29sZWFuSW5wdXQ7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByaXZhdGUgZ2V0IHZhcmlhbnRDbGFzcygpIHtcbiAgICByZXR1cm4gYHNhcHBoaXJlLWljb24tYnV0dG9uLS0ke3RoaXMudmFyaWFudH1gO1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBiZWhhdmlvciBvZiB0aGUgYnV0dG9uIHdoZW4gdXNlZCBpbiBhbiBIVE1MIGZvcm0uXG4gICAqL1xuICBASW5wdXQoKVxuICBASG9zdEJpbmRpbmcoJ3R5cGUnKVxuICB0eXBlOiAnc3VibWl0JyB8ICdidXR0b24nIHwgJ3Jlc2V0JyA9ICdidXR0b24nO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGNvbnN0IHsgYXJpYUxhYmVsLCBhcmlhSGlkZGVuIH0gPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBpZiAoIWFyaWFMYWJlbCAmJiBhcmlhSGlkZGVuICE9PSAndHJ1ZScgJiYgaXNEZXZNb2RlKCkpIHtcbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgICBjb25zb2xlLndhcm4oXG4gICAgICAgIGBMYWJlbCBpcyByZXF1aXJlZCBmb3IgYWNjZXNzaWJpbGl0eSByZWFzb25zLiBQbGVhc2UsIHByb3ZpZGUgYXR0cmlidXRlIFwiYXJpYS1sYWJlbFwiIHZhbHVlIG9yIHNldCBhcmlhLWhpZGRlbj1cInRydWVcIiBmb3Igbm9uLWludGVyYWN0aXZlIGVsZW1lbnRzLmAsXG4gICAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50XG4gICAgICApO1xuICAgIH1cbiAgfVxufVxuIiwiPHNwYW4gY2xhc3M9XCJzYXBwaGlyZS1pY29uLWJ1dHRvbl9faWNvblwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L3NwYW4+XG4iXX0=
|