@danske/sapphire-angular 1.18.1 → 1.19.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.
Files changed (15) hide show
  1. package/esm2020/lib/button/src/button-group.component.mjs +34 -4
  2. package/esm2020/lib/modal/src/dialog/confirmation-dialog.component.mjs +1 -1
  3. package/esm2020/lib/modal/src/dialog/danger-dialog.component.mjs +1 -1
  4. package/esm2020/lib/modal/src/dialog/dialog-footer.component.mjs +43 -5
  5. package/esm2020/lib/modal/src/dialog/dialog.component.mjs +5 -3
  6. package/esm2020/lib/pagination/src/pagination.component.mjs +1 -1
  7. package/esm2020/lib/theme/src/themes.mjs +4 -4
  8. package/fesm2015/danske-sapphire-angular.mjs +85 -15
  9. package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
  10. package/fesm2020/danske-sapphire-angular.mjs +84 -15
  11. package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
  12. package/lib/button/src/button-group.component.d.ts +14 -1
  13. package/lib/modal/src/dialog/dialog-footer.component.d.ts +18 -1
  14. package/lib/modal/src/dialog/dialog.component.d.ts +1 -1
  15. package/package.json +3 -3
package/esm2020/lib/button/src/button-group.component.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Input } from '@angular/core';
1
+ import { Component, Input, ViewEncapsulation } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@angular/common";
4
4
  /**
@@ -13,11 +13,27 @@ export class ButtonGroupComponent {
13
13
  * @default "right"
14
14
  */
15
15
  this.align = 'right';
16
+ /**
17
+ * Controls stretching of the contents.
18
+ *
19
+ * `none` - the children will not stretch and will respect the alignment set with the align prop.
20
+ *
21
+ * `default` - the children will stretch to take full width. If the children overflow, they will be wrapped vertically.
22
+ *
23
+ * `autoVertical` - same behaviour as `default`, but if there is more than 3 children, they will be wrapped vertically even if they don't overflow.
24
+ *
25
+ * @default "none"
26
+ */
27
+ this.stretch = 'none';
16
28
  /**
17
29
  * Spacing between the buttons
18
30
  * @default normal
19
31
  */
20
32
  this.spacing = 'normal';
33
+ /**
34
+ * @default "horizontal"
35
+ */
36
+ this.orientation = 'horizontal';
21
37
  }
22
38
  get iconSpacing() {
23
39
  return this.spacing;
@@ -27,10 +43,10 @@ export class ButtonGroupComponent {
27
43
  }
28
44
  }
29
45
  ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", iconSpacing: "iconSpacing", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"'sapphire-button-group--align-' + align\"\n [class.sapphire-button-group--dense]=\"spacing === 'dense'\"\n [class.sapphire-button-group--large]=\"spacing === 'large'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--large{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--dense{gap:var(--sapphire-button-group-size-spacing-s)}.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"] }] });
46
+ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", iconSpacing: "iconSpacing", 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--dense]=\"spacing === 'dense'\"\n [class.sapphire-button-group--large]=\"spacing === 'large'\"\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-button-group-size-spacing-m)}.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--large{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--dense{gap:var(--sapphire-button-group-size-spacing-s)}.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 });
31
47
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
32
48
  type: Component,
33
- args: [{ selector: 'sp-button-group', template: "<div\n class=\"sapphire-button-group\"\n [ngClass]=\"'sapphire-button-group--align-' + align\"\n [class.sapphire-button-group--dense]=\"spacing === 'dense'\"\n [class.sapphire-button-group--large]=\"spacing === 'large'\"\n [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--large{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--dense{gap:var(--sapphire-button-group-size-spacing-s)}.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"] }]
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--dense]=\"spacing === 'dense'\"\n [class.sapphire-button-group--large]=\"spacing === 'large'\"\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-button-group-size-spacing-m)}.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--large{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--dense{gap:var(--sapphire-button-group-size-spacing-s)}.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"] }]
34
50
  }], propDecorators: {
35
51
  /**
36
52
  * Alignment of buttons within the group.
@@ -38,6 +54,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
38
54
  */
39
55
  align: [{
40
56
  type: Input
57
+ }],
58
+ /**
59
+ * Controls stretching of the contents.
60
+ *
61
+ * `none` - the children will not stretch and will respect the alignment set with the align prop.
62
+ *
63
+ * `default` - the children will stretch to take full width. If the children overflow, they will be wrapped vertically.
64
+ *
65
+ * `autoVertical` - same behaviour as `default`, but if there is more than 3 children, they will be wrapped vertically even if they don't overflow.
66
+ *
67
+ * @default "none"
68
+ */
69
+ stretch: [{
70
+ type: Input
41
71
  }], iconSpacing: [{
42
72
  type: Input
43
73
  }],
@@ -54,4 +84,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
54
84
  orientation: [{
55
85
  type: Input
56
86
  }] } });
57
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL3NyYy9idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9idXR0b24vc3JjL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBRWpEOzs7O0dBSUc7QUFNSCxNQUFNLE9BQU8sb0JBQW9CO0lBTGpDO1FBT0U7OztXQUdHO1FBQ0gsVUFBSyxHQUFnQyxPQUFPLENBQUM7UUFpQjdDOzs7V0FHRztRQUNILFlBQU8sR0FBaUMsUUFBUSxDQUFDO0tBT2xEO0lBMUJDLElBT0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN0QixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsS0FBc0I7UUFDcEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQzs7aUhBcEJVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLCtKQ1pqQyxzVkFTQTsyRkRHYSxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsaUJBQWlCOztRQU0zQjs7O1dBR0c7UUFDSCxLQUFLO3NCQUxKLEtBQUs7Z0JBY0YsV0FBVztzQkFQZCxLQUFLOztRQWVOOzs7V0FHRztRQUNILE9BQU87c0JBTE4sS0FBSzs7UUFRTjs7V0FFRztRQUNILFdBQVc7c0JBSlYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBCdXR0b25Hcm91cCBpcyBhIHV0aWxpdHkgY29tcG9uZW50IHdoaWNoIGVuc3VyZXMgY29uc2lzdGVudCBzcGFjaW5nIGJldHdlZW5cbiAqIGJ1dHRvbnMgQWxsIGNoaWxkcmVuIG11c3QgYmUgb2YgdHlwZSBCdXR0b24uIEljb24gYnV0dG9ucyBjYW5ub3QgYmUgbWl4ZWRcbiAqIHdpdGggc3RhbmRhcmQgYnV0dG9ucy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtYnV0dG9uLWdyb3VwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi1ncm91cC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Hcm91cENvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBBbGlnbm1lbnQgb2YgYnV0dG9ucyB3aXRoaW4gdGhlIGdyb3VwLlxuICAgKiBAZGVmYXVsdCBcInJpZ2h0XCJcbiAgICovXG4gIGFsaWduOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCcgPSAncmlnaHQnO1xuXG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBAZGVwcmVjYXRlZCBVc2UgYHNwYWNpbmdgIGluc3RlYWQuXG4gICAqXG4gICAqIFNwYWNpbmcgYmV0d2VlbiB0aGUgYnV0dG9ucy5cbiAgICogQGRlZmF1bHQgbm9ybWFsXG4gICAqL1xuICBnZXQgaWNvblNwYWNpbmcoKTogdGhpc1snc3BhY2luZyddIHtcbiAgICByZXR1cm4gdGhpcy5zcGFjaW5nO1xuICB9XG4gIHNldCBpY29uU3BhY2luZyh2YWx1ZTogdGhpc1snc3BhY2luZyddKSB7XG4gICAgdGhpcy5zcGFjaW5nID0gdmFsdWU7XG4gIH1cblxuICBASW5wdXQoKVxuICAvKipcbiAgICogU3BhY2luZyBiZXR3ZWVuIHRoZSBidXR0b25zXG4gICAqIEBkZWZhdWx0IG5vcm1hbFxuICAgKi9cbiAgc3BhY2luZzogJ25vcm1hbCcgfCAnZGVuc2UnIHwgJ2xhcmdlJyA9ICdub3JtYWwnO1xuXG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBAZGVmYXVsdCBcImhvcml6b250YWxcIlxuICAgKi9cbiAgb3JpZW50YXRpb24/OiAndmVydGljYWwnIHwgJ2hvcml6b250YWwnO1xufVxuIiwiPGRpdlxuICBjbGFzcz1cInNhcHBoaXJlLWJ1dHRvbi1ncm91cFwiXG4gIFtuZ0NsYXNzXT1cIidzYXBwaGlyZS1idXR0b24tZ3JvdXAtLWFsaWduLScgKyBhbGlnblwiXG4gIFtjbGFzcy5zYXBwaGlyZS1idXR0b24tZ3JvdXAtLWRlbnNlXT1cInNwYWNpbmcgPT09ICdkZW5zZSdcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS1sYXJnZV09XCJzcGFjaW5nID09PSAnbGFyZ2UnXCJcbiAgW2NsYXNzLnNhcHBoaXJlLWJ1dHRvbi1ncm91cC0tdmVydGljYWxdPVwib3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCdcIlxuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
87
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL3NyYy9idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9idXR0b24vc3JjL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBSXBFOzs7O0dBSUc7QUFPSCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBUUU7OztXQUdHO1FBQ0gsVUFBSyxHQUFnQyxPQUFPLENBQUM7UUFHN0M7Ozs7Ozs7Ozs7V0FVRztRQUNILFlBQU8sR0FBNEIsTUFBTSxDQUFDO1FBaUIxQzs7O1dBR0c7UUFDSCxZQUFPLEdBQWlDLFFBQVEsQ0FBQztRQUdqRDs7V0FFRztRQUNILGdCQUFXLEdBQStCLFlBQVksQ0FBQztLQUN4RDtJQTFCQyxJQU9JLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUNELElBQUksV0FBVyxDQUFDLEtBQXNCO1FBQ3BDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7O2lIQWxDVSxvQkFBb0I7cUdBQXBCLG9CQUFvQixtTENmakMsdWdCQWdCQTsyRkREYSxvQkFBb0I7a0JBTmhDLFNBQVM7K0JBQ0UsaUJBQWlCLGlCQUdaLGlCQUFpQixDQUFDLElBQUk7O1FBSXJDOzs7V0FHRztRQUNILEtBQUs7c0JBTEosS0FBSzs7UUFRTjs7Ozs7Ozs7OztXQVVHO1FBQ0gsT0FBTztzQkFaTixLQUFLO2dCQXFCRixXQUFXO3NCQVBkLEtBQUs7O1FBZU47OztXQUdHO1FBQ0gsT0FBTztzQkFMTixLQUFLOztRQVFOOztXQUVHO1FBQ0gsV0FBVztzQkFKVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IHR5cGUgQnV0dG9uR3JvdXBTdHJldGNoVHlwZSA9ICdub25lJyB8ICdkZWZhdWx0JyB8ICdhdXRvVmVydGljYWwnO1xuXG4vKipcbiAqIEJ1dHRvbkdyb3VwIGlzIGEgdXRpbGl0eSBjb21wb25lbnQgd2hpY2ggZW5zdXJlcyBjb25zaXN0ZW50IHNwYWNpbmcgYmV0d2VlblxuICogYnV0dG9ucyBBbGwgY2hpbGRyZW4gbXVzdCBiZSBvZiB0eXBlIEJ1dHRvbi4gSWNvbiBidXR0b25zIGNhbm5vdCBiZSBtaXhlZFxuICogd2l0aCBzdGFuZGFyZCBidXR0b25zLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1idXR0b24tZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsIC8vIFRPRE86IGNyZWF0ZSBhbm90aGVyIGhvc3REaXJlY3RpdmUgZm9yIHRoaXM/XG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkdyb3VwQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgLyoqXG4gICAqIEFsaWdubWVudCBvZiBidXR0b25zIHdpdGhpbiB0aGUgZ3JvdXAuXG4gICAqIEBkZWZhdWx0IFwicmlnaHRcIlxuICAgKi9cbiAgYWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0JyA9ICdyaWdodCc7XG5cbiAgQElucHV0KClcbiAgLyoqXG4gICAqIENvbnRyb2xzIHN0cmV0Y2hpbmcgb2YgdGhlIGNvbnRlbnRzLlxuICAgKlxuICAgKiBgbm9uZWAgLSB0aGUgY2hpbGRyZW4gd2lsbCBub3Qgc3RyZXRjaCBhbmQgd2lsbCByZXNwZWN0IHRoZSBhbGlnbm1lbnQgc2V0IHdpdGggdGhlIGFsaWduIHByb3AuXG4gICAqXG4gICAqIGBkZWZhdWx0YCAtIHRoZSBjaGlsZHJlbiB3aWxsIHN0cmV0Y2ggdG8gdGFrZSBmdWxsIHdpZHRoLiBJZiB0aGUgY2hpbGRyZW4gb3ZlcmZsb3csIHRoZXkgd2lsbCBiZSB3cmFwcGVkIHZlcnRpY2FsbHkuXG4gICAqXG4gICAqIGBhdXRvVmVydGljYWxgIC0gc2FtZSBiZWhhdmlvdXIgYXMgYGRlZmF1bHRgLCBidXQgaWYgdGhlcmUgaXMgbW9yZSB0aGFuIDMgY2hpbGRyZW4sIHRoZXkgd2lsbCBiZSB3cmFwcGVkIHZlcnRpY2FsbHkgZXZlbiBpZiB0aGV5IGRvbid0IG92ZXJmbG93LlxuICAgKlxuICAgKiBAZGVmYXVsdCBcIm5vbmVcIlxuICAgKi9cbiAgc3RyZXRjaD86IEJ1dHRvbkdyb3VwU3RyZXRjaFR5cGUgPSAnbm9uZSc7XG5cbiAgQElucHV0KClcbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkIFVzZSBgc3BhY2luZ2AgaW5zdGVhZC5cbiAgICpcbiAgICogU3BhY2luZyBiZXR3ZWVuIHRoZSBidXR0b25zLlxuICAgKiBAZGVmYXVsdCBub3JtYWxcbiAgICovXG4gIGdldCBpY29uU3BhY2luZygpOiB0aGlzWydzcGFjaW5nJ10ge1xuICAgIHJldHVybiB0aGlzLnNwYWNpbmc7XG4gIH1cbiAgc2V0IGljb25TcGFjaW5nKHZhbHVlOiB0aGlzWydzcGFjaW5nJ10pIHtcbiAgICB0aGlzLnNwYWNpbmcgPSB2YWx1ZTtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBTcGFjaW5nIGJldHdlZW4gdGhlIGJ1dHRvbnNcbiAgICogQGRlZmF1bHQgbm9ybWFsXG4gICAqL1xuICBzcGFjaW5nOiAnbm9ybWFsJyB8ICdkZW5zZScgfCAnbGFyZ2UnID0gJ25vcm1hbCc7XG5cbiAgQElucHV0KClcbiAgLyoqXG4gICAqIEBkZWZhdWx0IFwiaG9yaXpvbnRhbFwiXG4gICAqL1xuICBvcmllbnRhdGlvbj86ICd2ZXJ0aWNhbCcgfCAnaG9yaXpvbnRhbCcgPSAnaG9yaXpvbnRhbCc7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic2FwcGhpcmUtYnV0dG9uLWdyb3VwXCJcbiAgW25nQ2xhc3NdPVwiXG4gICAgc3RyZXRjaCAhPT0gJ25vbmUnXG4gICAgICA/ICdzYXBwaGlyZS1idXR0b24tZ3JvdXAtLXN0cmV0Y2gnXG4gICAgICA6ICdzYXBwaGlyZS1idXR0b24tZ3JvdXAtLWFsaWduLScgKyBhbGlnblxuICBcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS1zdHJldGNoLWF1dG8tdmVydGljYWxdPVwiXG4gICAgc3RyZXRjaCA9PT0gJ2F1dG9WZXJ0aWNhbCdcbiAgXCJcbiAgW2NsYXNzLnNhcHBoaXJlLWJ1dHRvbi1ncm91cC0tZGVuc2VdPVwic3BhY2luZyA9PT0gJ2RlbnNlJ1wiXG4gIFtjbGFzcy5zYXBwaGlyZS1idXR0b24tZ3JvdXAtLWxhcmdlXT1cInNwYWNpbmcgPT09ICdsYXJnZSdcIlxuICBbY2xhc3Muc2FwcGhpcmUtYnV0dG9uLWdyb3VwLS12ZXJ0aWNhbF09XCJvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1wiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19
package/esm2020/lib/modal/src/dialog/confirmation-dialog.component.mjs CHANGED
@@ -40,7 +40,7 @@ export class ConfirmationDialogComponent {
40
40
  }
41
41
  }
42
42
  ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
- ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: i3.DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: i4.DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: i5.DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: i6.DialogFooterComponent, selector: "sp-dialog-footer" }] });
43
+ ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: i3.DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: i4.DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: i5.DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: i6.DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
44
44
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
45
45
  type: Component,
46
46
  args: [{ selector: 'sp-confirmation-dialog', exportAs: 'spConfirmationDialog', template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n" }]
package/esm2020/lib/modal/src/dialog/danger-dialog.component.mjs CHANGED
@@ -41,7 +41,7 @@ export class DangerDialogComponent {
41
41
  }
42
42
  }
43
43
  DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
44
- DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: i3.DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: i4.DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: i5.DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: i6.DialogFooterComponent, selector: "sp-dialog-footer" }] });
44
+ DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: i3.DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: i4.DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: i5.DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: i6.DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
45
45
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
46
46
  type: Component,
47
47
  args: [{ selector: 'sp-danger-dialog', exportAs: 'spDangerDialog', template: "<sp-dialog role=\"alertdialog\">\n <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n <sp-dialog-footer>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"dangerSecondary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-dialog-footer>\n</sp-dialog>\n" }]
package/esm2020/lib/modal/src/dialog/dialog-footer.component.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Directive } from '@angular/core';
1
+ import { Component, Directive, Input } from '@angular/core';
2
2
  import { UseComponentStyles } from '../../../common/sapphire-view-encapsulation';
3
3
  import * as i0 from "@angular/core";
4
4
  import * as i1 from "../../../common/sapphire-view-encapsulation";
@@ -29,15 +29,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
29
29
  * For a custom footer, use {@link DialogFooterDirective spDialogFooter attribute directive}.
30
30
  */
31
31
  export class DialogFooterComponent {
32
+ constructor() {
33
+ /**
34
+ * Controls stretching of the contents.
35
+ *
36
+ * `none` - the children will not stretch and will respect the alignment set with the align prop.
37
+ *
38
+ * `default` - the children will stretch to take full width. If the children overflow, they will be wrapped vertically.
39
+ *
40
+ * `autoVertical` - same behaviour as `default`, but if there is more than 3 children, they will be wrapped vertically even if they don't overflow.
41
+ *
42
+ * @default "none"
43
+ */
44
+ this.stretch = 'none';
45
+ /**
46
+ * @default "horizontal"
47
+ */
48
+ this.orientation = 'horizontal';
49
+ }
32
50
  }
33
51
  DialogFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
34
- DialogFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogFooterComponent, selector: "sp-dialog-footer", hostDirectives: [{ directive: DialogFooterDirective }], ngImport: i0, template: '<sp-button-group align="right"><ng-content></ng-content></sp-button-group>', isInline: true, dependencies: [{ kind: "component", type: i2.ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "iconSpacing", "spacing", "orientation"] }] });
52
+ DialogFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: { stretch: "stretch", orientation: "orientation" }, hostDirectives: [{ directive: DialogFooterDirective }], ngImport: i0, template: '<sp-button-group [stretch]="stretch" [orientation]="orientation"><ng-content></ng-content></sp-button-group>', isInline: true, dependencies: [{ kind: "component", type: i2.ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "iconSpacing", "spacing", "orientation"] }] });
35
53
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogFooterComponent, decorators: [{
36
54
  type: Component,
37
55
  args: [{
38
56
  selector: 'sp-dialog-footer',
39
- template: '<sp-button-group align="right"><ng-content></ng-content></sp-button-group>',
57
+ template: '<sp-button-group [stretch]="stretch" [orientation]="orientation"><ng-content></ng-content></sp-button-group>',
40
58
  hostDirectives: [DialogFooterDirective],
41
59
  }]
42
- }] });
43
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWZvb3Rlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL21vZGFsL3NyYy9kaWFsb2cvZGlhbG9nLWZvb3Rlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7Ozs7QUFFakY7Ozs7R0FJRztBQVNILE1BQU0sT0FBTyxxQkFBcUI7O2tIQUFyQixxQkFBcUI7c0dBQXJCLHFCQUFxQjsyRkFBckIscUJBQXFCO2tCQVJqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLElBQUksRUFBRTt3QkFDSixLQUFLLEVBQUUsd0JBQXdCO3FCQUNoQztvQkFDRCxjQUFjLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztvQkFDcEMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOztBQUdEOzs7O0dBSUc7QUFPSCxNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO3NHQUFyQixxQkFBcUIsOERBYnJCLHFCQUFxQiw2QkFVOUIsNEVBQTRFOzJGQUduRSxxQkFBcUI7a0JBTmpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUNOLDRFQUE0RTtvQkFDOUUsY0FBYyxFQUFFLENBQUMscUJBQXFCLENBQUM7aUJBQ3hDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBEaXJlY3RpdmUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVzZUNvbXBvbmVudFN0eWxlcyB9IGZyb20gJy4uLy4uLy4uL2NvbW1vbi9zYXBwaGlyZS12aWV3LWVuY2Fwc3VsYXRpb24nO1xuXG4vKipcbiAqIE1hcmtzIGEgcGllY2Ugb2YgVUkgYXMgZGlhbG9nIGZvb3Rlci4gVXNlIG9ubHkgZm9yICoqY3VzdG9tKiogZm9vdGVyLlxuICogRm9yIHN0YW5kYXJkIGRpYWxvZyBmb290ZXIgKGEgbGlzdCBvZiByaWdodCBhbGlnbmVkIGJ1dHRvbnMpLFxuICogdXNlIHtAbGluayBEaWFsb2dGb290ZXJDb21wb25lbnQgc3AtZGlhbG9nLWZvb3Rlcn0gaW5zdGVhZC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3NwRGlhbG9nRm9vdGVyXScsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3NhcHBoaXJlLWRpYWxvZy1mb290ZXInLFxuICB9LFxuICBob3N0RGlyZWN0aXZlczogW1VzZUNvbXBvbmVudFN0eWxlc10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0Zvb3RlckRpcmVjdGl2ZSB7fVxuXG4vKipcbiAqIFN0YW5kYXJkIGRpYWxvZyBmb290ZXIgY29tcG9uZW50LiBUaGUgY29udGVudCBpcyBzdXBwb3NlZCB0byBiZSBhIGxpc3Qgb2ZcbiAqIGJ1dHRvbnMsIHdoaWNoIHdpbGwgYmUgYWxpZ25lZCB0byB0aGUgcmlnaHQgb2YgdGhlIGZvb3Rlci5cbiAqIEZvciBhIGN1c3RvbSBmb290ZXIsIHVzZSB7QGxpbmsgRGlhbG9nRm9vdGVyRGlyZWN0aXZlIHNwRGlhbG9nRm9vdGVyIGF0dHJpYnV0ZSBkaXJlY3RpdmV9LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1kaWFsb2ctZm9vdGVyJyxcbiAgdGVtcGxhdGU6XG4gICAgJzxzcC1idXR0b24tZ3JvdXAgYWxpZ249XCJyaWdodFwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwLWJ1dHRvbi1ncm91cD4nLFxuICBob3N0RGlyZWN0aXZlczogW0RpYWxvZ0Zvb3RlckRpcmVjdGl2ZV0sXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0Zvb3RlckNvbXBvbmVudCB7fVxuIl19
60
+ }], propDecorators: {
61
+ /**
62
+ * Controls stretching of the contents.
63
+ *
64
+ * `none` - the children will not stretch and will respect the alignment set with the align prop.
65
+ *
66
+ * `default` - the children will stretch to take full width. If the children overflow, they will be wrapped vertically.
67
+ *
68
+ * `autoVertical` - same behaviour as `default`, but if there is more than 3 children, they will be wrapped vertically even if they don't overflow.
69
+ *
70
+ * @default "none"
71
+ */
72
+ stretch: [{
73
+ type: Input
74
+ }],
75
+ /**
76
+ * @default "horizontal"
77
+ */
78
+ orientation: [{
79
+ type: Input
80
+ }] } });
81
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWZvb3Rlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL21vZGFsL3NyYy9kaWFsb2cvZGlhbG9nLWZvb3Rlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7O0FBR2pGOzs7O0dBSUc7QUFTSCxNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO3NHQUFyQixxQkFBcUI7MkZBQXJCLHFCQUFxQjtrQkFSakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsa0JBQWtCO29CQUM1QixJQUFJLEVBQUU7d0JBQ0osS0FBSyxFQUFFLHdCQUF3QjtxQkFDaEM7b0JBQ0QsY0FBYyxFQUFFLENBQUMsa0JBQWtCLENBQUM7b0JBQ3BDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs7QUFHRDs7OztHQUlHO0FBT0gsTUFBTSxPQUFPLHFCQUFxQjtJQU5sQztRQVFFOzs7Ozs7Ozs7O1dBVUc7UUFDSCxZQUFPLEdBQTRCLE1BQU0sQ0FBQztRQUcxQzs7V0FFRztRQUNILGdCQUFXLEdBQStCLFlBQVksQ0FBQztLQUN4RDs7a0hBcEJZLHFCQUFxQjtzR0FBckIscUJBQXFCLDBIQWJyQixxQkFBcUIsNkJBVTlCLDhHQUE4RzsyRkFHckcscUJBQXFCO2tCQU5qQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFFBQVEsRUFDTiw4R0FBOEc7b0JBQ2hILGNBQWMsRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUN4Qzs7UUFHQzs7Ozs7Ozs7OztXQVVHO1FBQ0gsT0FBTztzQkFaTixLQUFLOztRQWVOOztXQUVHO1FBQ0gsV0FBVztzQkFKVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBEaXJlY3RpdmUsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXMgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwU3RyZXRjaFR5cGUgfSBmcm9tICcuLi8uLi8uLi9idXR0b24vc3JjL2J1dHRvbi1ncm91cC5jb21wb25lbnQnO1xuXG4vKipcbiAqIE1hcmtzIGEgcGllY2Ugb2YgVUkgYXMgZGlhbG9nIGZvb3Rlci4gVXNlIG9ubHkgZm9yICoqY3VzdG9tKiogZm9vdGVyLlxuICogRm9yIHN0YW5kYXJkIGRpYWxvZyBmb290ZXIgKGEgbGlzdCBvZiByaWdodCBhbGlnbmVkIGJ1dHRvbnMpLFxuICogdXNlIHtAbGluayBEaWFsb2dGb290ZXJDb21wb25lbnQgc3AtZGlhbG9nLWZvb3Rlcn0gaW5zdGVhZC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3NwRGlhbG9nRm9vdGVyXScsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3NhcHBoaXJlLWRpYWxvZy1mb290ZXInLFxuICB9LFxuICBob3N0RGlyZWN0aXZlczogW1VzZUNvbXBvbmVudFN0eWxlc10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0Zvb3RlckRpcmVjdGl2ZSB7fVxuXG4vKipcbiAqIFN0YW5kYXJkIGRpYWxvZyBmb290ZXIgY29tcG9uZW50LiBUaGUgY29udGVudCBpcyBzdXBwb3NlZCB0byBiZSBhIGxpc3Qgb2ZcbiAqIGJ1dHRvbnMsIHdoaWNoIHdpbGwgYmUgYWxpZ25lZCB0byB0aGUgcmlnaHQgb2YgdGhlIGZvb3Rlci5cbiAqIEZvciBhIGN1c3RvbSBmb290ZXIsIHVzZSB7QGxpbmsgRGlhbG9nRm9vdGVyRGlyZWN0aXZlIHNwRGlhbG9nRm9vdGVyIGF0dHJpYnV0ZSBkaXJlY3RpdmV9LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcC1kaWFsb2ctZm9vdGVyJyxcbiAgdGVtcGxhdGU6XG4gICAgJzxzcC1idXR0b24tZ3JvdXAgW3N0cmV0Y2hdPVwic3RyZXRjaFwiIFtvcmllbnRhdGlvbl09XCJvcmllbnRhdGlvblwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwLWJ1dHRvbi1ncm91cD4nLFxuICBob3N0RGlyZWN0aXZlczogW0RpYWxvZ0Zvb3RlckRpcmVjdGl2ZV0sXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0Zvb3RlckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBDb250cm9scyBzdHJldGNoaW5nIG9mIHRoZSBjb250ZW50cy5cbiAgICpcbiAgICogYG5vbmVgIC0gdGhlIGNoaWxkcmVuIHdpbGwgbm90IHN0cmV0Y2ggYW5kIHdpbGwgcmVzcGVjdCB0aGUgYWxpZ25tZW50IHNldCB3aXRoIHRoZSBhbGlnbiBwcm9wLlxuICAgKlxuICAgKiBgZGVmYXVsdGAgLSB0aGUgY2hpbGRyZW4gd2lsbCBzdHJldGNoIHRvIHRha2UgZnVsbCB3aWR0aC4gSWYgdGhlIGNoaWxkcmVuIG92ZXJmbG93LCB0aGV5IHdpbGwgYmUgd3JhcHBlZCB2ZXJ0aWNhbGx5LlxuICAgKlxuICAgKiBgYXV0b1ZlcnRpY2FsYCAtIHNhbWUgYmVoYXZpb3VyIGFzIGBkZWZhdWx0YCwgYnV0IGlmIHRoZXJlIGlzIG1vcmUgdGhhbiAzIGNoaWxkcmVuLCB0aGV5IHdpbGwgYmUgd3JhcHBlZCB2ZXJ0aWNhbGx5IGV2ZW4gaWYgdGhleSBkb24ndCBvdmVyZmxvdy5cbiAgICpcbiAgICogQGRlZmF1bHQgXCJub25lXCJcbiAgICovXG4gIHN0cmV0Y2g/OiBCdXR0b25Hcm91cFN0cmV0Y2hUeXBlID0gJ25vbmUnO1xuXG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBAZGVmYXVsdCBcImhvcml6b250YWxcIlxuICAgKi9cbiAgb3JpZW50YXRpb24/OiAndmVydGljYWwnIHwgJ2hvcml6b250YWwnID0gJ2hvcml6b250YWwnO1xufVxuIl19
package/esm2020/lib/modal/src/dialog/dialog.component.mjs CHANGED
@@ -7,6 +7,7 @@ import { UseComponentStylesOnHost } from '../../../common/sapphire-view-encapsul
7
7
  import * as i0 from "@angular/core";
8
8
  import * as i1 from "@angular/cdk/dialog";
9
9
  import * as i2 from "../../../common/sapphire-view-encapsulation";
10
+ import * as i3 from "@angular/common";
10
11
  /**
11
12
  * Dialogs focus the user's attention exclusively on one task or piece of
12
13
  * information via a dialog box that sits on top of the page content.
@@ -35,17 +36,18 @@ export class DialogComponent extends ModalBaseComponent {
35
36
  }
36
37
  }
37
38
  DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
38
- DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"] });
39
+ DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--extra-small": "size === 'extra-small'", "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.UseComponentStylesOnHost }], ngImport: i0, template: "<div #headerTemplate>\n <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!-- we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
39
40
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
40
41
  type: Component,
41
42
  args: [{ selector: 'sp-dialog', host: {
42
43
  class: 'sapphire-dialog',
44
+ '[class.sapphire-dialog--extra-small]': "size === 'extra-small'",
43
45
  '[class.sapphire-dialog--small]': "size === 'small'",
44
46
  '[class.sapphire-dialog--medium]': "size === 'medium'",
45
47
  '[class.sapphire-dialog--large]': "size === 'large'",
46
48
  '[class.sapphire-dialog--passive]': "type === 'passive'",
47
49
  '[class.sapphire-dialog--exiting]': 'dialogRef.closing',
48
- }, hostDirectives: [UseComponentStylesOnHost], template: "<ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"] }]
50
+ }, hostDirectives: [UseComponentStylesOnHost], template: "<div #headerTemplate>\n <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!-- we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"] }]
49
51
  }], ctorParameters: function () { return [{ type: i1.DialogRef }]; }, propDecorators: { size: [{
50
52
  type: Input
51
53
  }], footer: [{
@@ -58,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
58
60
  type: ContentChild,
59
61
  args: [DialogContentDirective]
60
62
  }] } });
61
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbW9kYWwvc3JjL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9tb2RhbC9zcmMvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDcEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDN0QsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7Ozs7QUFFdkY7OztHQUdHO0FBZUgsTUFBTSxPQUFPLGVBQWdCLFNBQVEsa0JBQWtCO0lBT3JEOzs7Ozs7O09BT0c7SUFDSCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxrQkFBa0IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1lBQ3JELENBQUMsQ0FBQyxTQUFTO1lBQ1gsQ0FBQyxDQUFDLFFBQVEsQ0FBQztJQUNmLENBQUM7SUFXRCxZQUFzQixTQUFvQjtRQUN4QyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7UUFERyxjQUFTLEdBQVQsU0FBUyxDQUFXO1FBN0IxQzs7V0FFRztRQUVILFNBQUksR0FBaUMsT0FBTyxDQUFDO0lBMkI3QyxDQUFDOzs0R0FoQ1UsZUFBZTtnR0FBZixlQUFlLHliQXFCWixxQkFBcUIseUVBR3JCLHFCQUFxQiwwRUFHckIsc0JBQXNCLHFJQ3JEdEMsaU9BR0E7MkZEdUJhLGVBQWU7a0JBZDNCLFNBQVM7K0JBQ0UsV0FBVyxRQUVmO3dCQUNKLEtBQUssRUFBRSxpQkFBaUI7d0JBQ3hCLGdDQUFnQyxFQUFFLGtCQUFrQjt3QkFDcEQsaUNBQWlDLEVBQUUsbUJBQW1CO3dCQUN0RCxnQ0FBZ0MsRUFBRSxrQkFBa0I7d0JBQ3BELGtDQUFrQyxFQUFFLG9CQUFvQjt3QkFDeEQsa0NBQWtDLEVBQUUsbUJBQW1CO3FCQUN4RCxrQkFDZSxDQUFDLHdCQUF3QixDQUFDO2dHQVExQyxJQUFJO3NCQURILEtBQUs7Z0JBa0JOLE1BQU07c0JBREwsWUFBWTt1QkFBQyxxQkFBcUI7Z0JBSW5DLE1BQU07c0JBREwsWUFBWTt1QkFBQyxxQkFBcUI7Z0JBSW5DLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kaWFsb2cnO1xuaW1wb3J0IHsgRGlhbG9nRm9vdGVyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaWFsb2ctZm9vdGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEaWFsb2dDb250ZW50RGlyZWN0aXZlIH0gZnJvbSAnLi9kaWFsb2ctY29udGVudC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRGlhbG9nSGVhZGVyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaWFsb2ctaGVhZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNb2RhbEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi9tb2RhbC1iYXNlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXNPbkhvc3QgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcblxuLyoqXG4gKiBEaWFsb2dzIGZvY3VzIHRoZSB1c2VyJ3MgYXR0ZW50aW9uIGV4Y2x1c2l2ZWx5IG9uIG9uZSB0YXNrIG9yIHBpZWNlIG9mXG4gKiBpbmZvcm1hdGlvbiB2aWEgYSBkaWFsb2cgYm94IHRoYXQgc2l0cyBvbiB0b3Agb2YgdGhlIHBhZ2UgY29udGVudC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtZGlhbG9nJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RpYWxvZy5jb21wb25lbnQuaHRtbCcsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3NhcHBoaXJlLWRpYWxvZycsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1kaWFsb2ctLXNtYWxsXSc6IFwic2l6ZSA9PT0gJ3NtYWxsJ1wiLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtZGlhbG9nLS1tZWRpdW1dJzogXCJzaXplID09PSAnbWVkaXVtJ1wiLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtZGlhbG9nLS1sYXJnZV0nOiBcInNpemUgPT09ICdsYXJnZSdcIixcbiAgICAnW2NsYXNzLnNhcHBoaXJlLWRpYWxvZy0tcGFzc2l2ZV0nOiBcInR5cGUgPT09ICdwYXNzaXZlJ1wiLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtZGlhbG9nLS1leGl0aW5nXSc6ICdkaWFsb2dSZWYuY2xvc2luZycsXG4gIH0sXG4gIGhvc3REaXJlY3RpdmVzOiBbVXNlQ29tcG9uZW50U3R5bGVzT25Ib3N0XSxcbiAgc3R5bGVVcmxzOiBbJy4vZGlhbG9nLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0NvbXBvbmVudCBleHRlbmRzIE1vZGFsQmFzZUNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBEaWFsb2cgc2l6ZSwgY29uc3RyYWluaW5nIHRoZSB3aWR0aCBvZiB0aGUgZGlhbG9nLlxuICAgKi9cbiAgQElucHV0KClcbiAgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdzbWFsbCc7XG5cbiAgLyoqXG4gICAqIFR5cGUgb2YgdGhlIGRpYWxvZzpcbiAgICogIC0gJ3Bhc3NpdmUnOiBBIGRpYWxvZyB3aXRob3V0IGZvb3RlciB3aXRoIGFjdGlvbnMuIFBhc3NpdmUgZGlhbG9ncyBhcmVcbiAgICogICAgIHVzZWQgdG8gZGlzcGxheSBpbmZvcm1hdGlvbiwgdGhhdCBkb2Vzbid0IHJlcXVpcmUgYW55IGZ1cnRoZXIgYWN0aW9uLlxuICAgKiAgLSAnYWN0aXZlJzogQSBkaWFsb2cgd2l0aCBhIGZvb3RlciB0aGF0IGNvbnRhaW5zIGFjdGlvbnMuIEFjdGl2ZSBkaWFsb2dzXG4gICAqICAgICBhcmUgdXNlZCB0byBkaXNwbGF5IGluZm9ybWF0aW9uIGJhc2VkIG9uIHdoaWNoIHRoZSB1c2VyIGlzIHN1cHBvc2VkIHRvXG4gICAqICAgICBkZWNpZGUgb24gYW4gYWN0aW9uXG4gICAqL1xuICBnZXQgdHlwZSgpOiAncGFzc2l2ZScgfCAnYWN0aXZlJyB7XG4gICAgcmV0dXJuIHRoaXMuY29udGVudEluaXRpYWxpemVkICYmICFCb29sZWFuKHRoaXMuZm9vdGVyKVxuICAgICAgPyAncGFzc2l2ZSdcbiAgICAgIDogJ2FjdGl2ZSc7XG4gIH1cblxuICBAQ29udGVudENoaWxkKERpYWxvZ0Zvb3RlckRpcmVjdGl2ZSlcbiAgZm9vdGVyPzogRGlhbG9nRm9vdGVyRGlyZWN0aXZlO1xuXG4gIEBDb250ZW50Q2hpbGQoRGlhbG9nSGVhZGVyRGlyZWN0aXZlKVxuICBoZWFkZXI/OiBEaWFsb2dIZWFkZXJEaXJlY3RpdmU7XG5cbiAgQENvbnRlbnRDaGlsZChEaWFsb2dDb250ZW50RGlyZWN0aXZlKVxuICBjb250ZW50PzogRGlhbG9nQ29udGVudERpcmVjdGl2ZTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZGlhbG9nUmVmOiBEaWFsb2dSZWYpIHtcbiAgICBzdXBlcihkaWFsb2dSZWYpO1xuICB9XG59XG4iLCI8bmctY29udGVudCBzZWxlY3Q9XCJzcC1kaWFsb2ctaGVhZGVyLCBbc3BEaWFsb2dIZWFkZXJdXCI+PC9uZy1jb250ZW50PlxuPG5nLWNvbnRlbnQgc2VsZWN0PVwic3AtZGlhbG9nLWNvbnRlbnQsIFtzcC1kaWFsb2ctY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG48bmctY29udGVudCBzZWxlY3Q9XCJzcC1kaWFsb2ctZm9vdGVyLCBbc3BEaWFsb2dGb290ZXJdXCI+PC9uZy1jb250ZW50PlxuIl19
63
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvbW9kYWwvc3JjL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9tb2RhbC9zcmMvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDcEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDN0QsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7Ozs7O0FBRXZGOzs7R0FHRztBQWdCSCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxrQkFBa0I7SUFPckQ7Ozs7Ozs7T0FPRztJQUNILElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLGtCQUFrQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDckQsQ0FBQyxDQUFDLFNBQVM7WUFDWCxDQUFDLENBQUMsUUFBUSxDQUFDO0lBQ2YsQ0FBQztJQVdELFlBQXNCLFNBQW9CO1FBQ3hDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQztRQURHLGNBQVMsR0FBVCxTQUFTLENBQVc7UUE3QjFDOztXQUVHO1FBRUgsU0FBSSxHQUFpRCxPQUFPLENBQUM7SUEyQjdELENBQUM7OzRHQWhDVSxlQUFlO2dHQUFmLGVBQWUseWZBcUJaLHFCQUFxQix5RUFHckIscUJBQXFCLDBFQUdyQixzQkFBc0IscUlDdER0QyxvbEJBWUE7MkZEZWEsZUFBZTtrQkFmM0IsU0FBUzsrQkFDRSxXQUFXLFFBRWY7d0JBQ0osS0FBSyxFQUFFLGlCQUFpQjt3QkFDeEIsc0NBQXNDLEVBQUUsd0JBQXdCO3dCQUNoRSxnQ0FBZ0MsRUFBRSxrQkFBa0I7d0JBQ3BELGlDQUFpQyxFQUFFLG1CQUFtQjt3QkFDdEQsZ0NBQWdDLEVBQUUsa0JBQWtCO3dCQUNwRCxrQ0FBa0MsRUFBRSxvQkFBb0I7d0JBQ3hELGtDQUFrQyxFQUFFLG1CQUFtQjtxQkFDeEQsa0JBQ2UsQ0FBQyx3QkFBd0IsQ0FBQztnR0FRMUMsSUFBSTtzQkFESCxLQUFLO2dCQWtCTixNQUFNO3NCQURMLFlBQVk7dUJBQUMscUJBQXFCO2dCQUluQyxNQUFNO3NCQURMLFlBQVk7dUJBQUMscUJBQXFCO2dCQUluQyxPQUFPO3NCQUROLFlBQVk7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEaWFsb2dSZWYgfSBmcm9tICdAYW5ndWxhci9jZGsvZGlhbG9nJztcbmltcG9ydCB7IERpYWxvZ0Zvb3RlckRpcmVjdGl2ZSB9IGZyb20gJy4vZGlhbG9nLWZvb3Rlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGlhbG9nQ29udGVudERpcmVjdGl2ZSB9IGZyb20gJy4vZGlhbG9nLWNvbnRlbnQuZGlyZWN0aXZlJztcbmltcG9ydCB7IERpYWxvZ0hlYWRlckRpcmVjdGl2ZSB9IGZyb20gJy4vZGlhbG9nLWhlYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgTW9kYWxCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwtYmFzZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgVXNlQ29tcG9uZW50U3R5bGVzT25Ib3N0IH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL3NhcHBoaXJlLXZpZXctZW5jYXBzdWxhdGlvbic7XG5cbi8qKlxuICogRGlhbG9ncyBmb2N1cyB0aGUgdXNlcidzIGF0dGVudGlvbiBleGNsdXNpdmVseSBvbiBvbmUgdGFzayBvciBwaWVjZSBvZlxuICogaW5mb3JtYXRpb24gdmlhIGEgZGlhbG9nIGJveCB0aGF0IHNpdHMgb24gdG9wIG9mIHRoZSBwYWdlIGNvbnRlbnQuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NwLWRpYWxvZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdzYXBwaGlyZS1kaWFsb2cnLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtZGlhbG9nLS1leHRyYS1zbWFsbF0nOiBcInNpemUgPT09ICdleHRyYS1zbWFsbCdcIixcbiAgICAnW2NsYXNzLnNhcHBoaXJlLWRpYWxvZy0tc21hbGxdJzogXCJzaXplID09PSAnc21hbGwnXCIsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1kaWFsb2ctLW1lZGl1bV0nOiBcInNpemUgPT09ICdtZWRpdW0nXCIsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1kaWFsb2ctLWxhcmdlXSc6IFwic2l6ZSA9PT0gJ2xhcmdlJ1wiLFxuICAgICdbY2xhc3Muc2FwcGhpcmUtZGlhbG9nLS1wYXNzaXZlXSc6IFwidHlwZSA9PT0gJ3Bhc3NpdmUnXCIsXG4gICAgJ1tjbGFzcy5zYXBwaGlyZS1kaWFsb2ctLWV4aXRpbmddJzogJ2RpYWxvZ1JlZi5jbG9zaW5nJyxcbiAgfSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtVc2VDb21wb25lbnRTdHlsZXNPbkhvc3RdLFxuICBzdHlsZVVybHM6IFsnLi9kaWFsb2cuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRGlhbG9nQ29tcG9uZW50IGV4dGVuZHMgTW9kYWxCYXNlQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIERpYWxvZyBzaXplLCBjb25zdHJhaW5pbmcgdGhlIHdpZHRoIG9mIHRoZSBkaWFsb2cuXG4gICAqL1xuICBASW5wdXQoKVxuICBzaXplOiAnZXh0cmEtc21hbGwnIHwgJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdzbWFsbCc7XG5cbiAgLyoqXG4gICAqIFR5cGUgb2YgdGhlIGRpYWxvZzpcbiAgICogIC0gJ3Bhc3NpdmUnOiBBIGRpYWxvZyB3aXRob3V0IGZvb3RlciB3aXRoIGFjdGlvbnMuIFBhc3NpdmUgZGlhbG9ncyBhcmVcbiAgICogICAgIHVzZWQgdG8gZGlzcGxheSBpbmZvcm1hdGlvbiwgdGhhdCBkb2Vzbid0IHJlcXVpcmUgYW55IGZ1cnRoZXIgYWN0aW9uLlxuICAgKiAgLSAnYWN0aXZlJzogQSBkaWFsb2cgd2l0aCBhIGZvb3RlciB0aGF0IGNvbnRhaW5zIGFjdGlvbnMuIEFjdGl2ZSBkaWFsb2dzXG4gICAqICAgICBhcmUgdXNlZCB0byBkaXNwbGF5IGluZm9ybWF0aW9uIGJhc2VkIG9uIHdoaWNoIHRoZSB1c2VyIGlzIHN1cHBvc2VkIHRvXG4gICAqICAgICBkZWNpZGUgb24gYW4gYWN0aW9uXG4gICAqL1xuICBnZXQgdHlwZSgpOiAncGFzc2l2ZScgfCAnYWN0aXZlJyB7XG4gICAgcmV0dXJuIHRoaXMuY29udGVudEluaXRpYWxpemVkICYmICFCb29sZWFuKHRoaXMuZm9vdGVyKVxuICAgICAgPyAncGFzc2l2ZSdcbiAgICAgIDogJ2FjdGl2ZSc7XG4gIH1cblxuICBAQ29udGVudENoaWxkKERpYWxvZ0Zvb3RlckRpcmVjdGl2ZSlcbiAgZm9vdGVyPzogRGlhbG9nRm9vdGVyRGlyZWN0aXZlO1xuXG4gIEBDb250ZW50Q2hpbGQoRGlhbG9nSGVhZGVyRGlyZWN0aXZlKVxuICBoZWFkZXI/OiBEaWFsb2dIZWFkZXJEaXJlY3RpdmU7XG5cbiAgQENvbnRlbnRDaGlsZChEaWFsb2dDb250ZW50RGlyZWN0aXZlKVxuICBjb250ZW50PzogRGlhbG9nQ29udGVudERpcmVjdGl2ZTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZGlhbG9nUmVmOiBEaWFsb2dSZWYpIHtcbiAgICBzdXBlcihkaWFsb2dSZWYpO1xuICB9XG59XG4iLCI8ZGl2ICNoZWFkZXJUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3AtZGlhbG9nLWhlYWRlciwgW3NwRGlhbG9nSGVhZGVyXVwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuXG48IS0tSWYgaGVhZGVyIGlzIG5vdCBwcm92aWRlZCBhcyA8c3AtZGlhbG9nLWhlYWRlcj4sIGJ1dCBhcyBhbiBhbm90aGVyIGRpdiB3aXRoIHNwRGlhbG9nSGVhZGVyLC0tPlxuPCEtLSAgd2Ugc3RpbGwgbmVlZCB0aGUgc3R5bGluZyBvZiB0aGUgaGVhZGVyIHRvIGJlIHJlbmRlcmVkLCBzbyB0aGUgZGlhbG9nIGxvb2tzIGFzIGV4cGVjdGVkIGluIHRoZSBzcGVjLi0tPlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFoZWFkZXJUZW1wbGF0ZS5jaGlsZHJlbi5sZW5ndGhcIj5cbiAgPGRpdiBjbGFzcz1cInNhcHBoaXJlLWRpYWxvZy1oZWFkZXJcIj48L2Rpdj5cbjwvbmctY29udGFpbmVyPlxuXG48bmctY29udGVudCBzZWxlY3Q9XCJzcC1kaWFsb2ctY29udGVudCwgW3NwLWRpYWxvZy1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjxuZy1jb250ZW50IHNlbGVjdD1cInNwLWRpYWxvZy1mb290ZXIsIFtzcERpYWxvZ0Zvb3Rlcl1cIj48L25nLWNvbnRlbnQ+XG4iXX0=
package/esm2020/lib/pagination/src/pagination.component.mjs CHANGED
@@ -65,7 +65,7 @@ export class PaginationComponent {
65
65
  }
66
66
  }
67
67
  PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
68
- PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination-controls\">\n <span class=\"sapphire-pagination-text\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination-text-alphabetic\"> of </span>\n {{ itemCount }}\n </span>\n <sp-button-group>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </sp-button-group>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination-controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1}.sapphire-pagination-text{font-weight:var(--sapphire-pagination-font-weight-numeric-text);color:var(--sapphire-pagination-color-text);padding-right:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination-text-alphabetic{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: i3.BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: i3.BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: i4.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: i5.ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "iconSpacing", "spacing", "orientation"] }, { kind: "component", type: i6.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
68
+ PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination-controls\">\n <span class=\"sapphire-pagination-text\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination-text-alphabetic\"> of </span>\n {{ itemCount }}\n </span>\n <sp-button-group>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </sp-button-group>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination-controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1}.sapphire-pagination-text{font-weight:var(--sapphire-pagination-font-weight-numeric-text);color:var(--sapphire-pagination-color-text);padding-right:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination-text-alphabetic{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: i3.BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: i3.BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: i4.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: i5.ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "iconSpacing", "spacing", "orientation"] }, { kind: "component", type: i6.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
69
69
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
70
70
  type: Component,
71
71
  args: [{ selector: 'sp-pagination', template: "<div class=\"sapphire-pagination\">\n <sp-basic-select\n *ngIf=\"pageSizeOptions\"\n placeholder=\"Select an option\"\n (valueChange)=\"_onPageSizeChange($event)\"\n [value]=\"'' + pageSize\"\n [disabled]=\"!!disabled\"\n aria-label=\"Number of items per page\"\n >\n <sp-option\n *ngFor=\"let pageSizeOption of pageSizeOptions\"\n [value]=\"'' + pageSizeOption\"\n >{{ pageSizeOption + ' items per page' }}</sp-option\n >\n </sp-basic-select>\n <span class=\"sapphire-pagination-controls\">\n <span class=\"sapphire-pagination-text\">\n {{ startItemIndex }} -\n {{ endItemIndex }}\n <span class=\"sapphire-pagination-text-alphabetic\"> of </span>\n {{ itemCount }}\n </span>\n <sp-button-group>\n <button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('previous')\"\n [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n aria-label=\"Previous\"\n >\n <sp-icon name=\"chevronLeft\"></sp-icon></button\n ><button\n sp-icon-button\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"small\"\n (click)=\"_onPageChange('next')\"\n [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n aria-label=\"Next\"\n >\n <sp-icon name=\"chevronRight\"></sp-icon>\n </button>\n </sp-button-group>\n </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination-controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1}.sapphire-pagination-text{font-weight:var(--sapphire-pagination-font-weight-numeric-text);color:var(--sapphire-pagination-color-text);padding-right:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination-text-alphabetic{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"] }]