@danske/sapphire-angular 1.19.2 → 1.19.4

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 (9) hide show
  1. package/esm2020/lib/button/src/icon-button.component.mjs +2 -2
  2. package/esm2020/lib/theme/src/theme-root.directive.mjs +12 -6
  3. package/esm2020/lib/theme/src/themes.mjs +4 -4
  4. package/fesm2015/danske-sapphire-angular.mjs +16 -9
  5. package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
  6. package/fesm2020/danske-sapphire-angular.mjs +14 -9
  7. package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
  8. package/lib/theme/src/theme-root.directive.d.ts +3 -2
  9. package/package.json +3 -3
package/esm2020/lib/button/src/icon-button.component.mjs CHANGED
@@ -53,7 +53,7 @@ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
53
53
  provide: ICON_SIZE_PROVIDER,
54
54
  useExisting: forwardRef(() => IconButtonComponent),
55
55
  },
56
- ], 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-icon-button-size-height-m);width:var(--sapphire-icon-button-size-width-m);flex-shrink:0;border-radius:var(--sapphire-icon-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-icon-button-time-transition);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-icon-button-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-icon-button-size-focus-ring-border) solid var(--sapphire-icon-button-color-focus-ring);outline-offset:var(--sapphire-icon-button-size-focus-ring-offset)}.sapphire-icon-button--primary-fill{background-color:var(--sapphire-icon-button-color-background-primary-default);color:var(--sapphire-icon-button-color-content-primary-default)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-primary-hover)}.sapphire-icon-button--primary-fill.is-focus,.sapphire-icon-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-primary-focus)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-primary-active)}.sapphire-icon-button--secondary-fill{background-color:var(--sapphire-icon-button-color-background-secondary-default);color:var(--sapphire-icon-button-color-content-secondary-default)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-fill.is-focus,.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-focus)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-default)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-hover)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-focus)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-secondary-ghost-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-focus)}.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-icon-button-color-background-secondary-ghost-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-icon-button--tertiary-fill{background-color:var(--sapphire-icon-button-color-background-tertiary-default);color:var(--sapphire-icon-button-color-content-tertiary-default)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-fill.is-focus,.sapphire-icon-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-focus)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-default)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-hover)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-focus)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-tertiary-ghost-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-focus)}.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-icon-button-color-background-tertiary-ghost-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-icon-button--danger-fill{background-color:var(--sapphire-icon-button-color-background-danger-default);color:var(--sapphire-icon-button-color-content-danger-default)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-fill.is-focus,.sapphire-icon-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-focus)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-default)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-hover)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-focus)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-icon-button-color-background-danger-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-danger-ghost-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-focus)}.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-icon-button-color-background-danger-ghost-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-icon-button-size-icon-m);width:var(--sapphire-icon-button-size-icon-m)}.sapphire-icon-button--large .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-l);width:var(--sapphire-icon-button-size-icon-l)}.sapphire-icon-button--small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-s);width:var(--sapphire-icon-button-size-icon-s)}.sapphire-icon-button--extra-small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-xs);width:var(--sapphire-icon-button-size-icon-xs)}.sapphire-icon-button--large{height:var(--sapphire-icon-button-size-height-l);width:var(--sapphire-icon-button-size-width-l);border-radius:var(--sapphire-icon-button-size-radius-l)}.sapphire-icon-button--small{height:var(--sapphire-icon-button-size-height-s);width:var(--sapphire-icon-button-size-width-s);border-radius:var(--sapphire-icon-button-size-radius-s)}.sapphire-icon-button--extra-small{height:var(--sapphire-icon-button-size-height-xs);width:var(--sapphire-icon-button-size-width-xs);border-radius:var(--sapphire-icon-button-size-radius-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
56
+ ], 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-icon-button-size-height-m);width:var(--sapphire-icon-button-size-width-m);flex-shrink:0;border-radius:var(--sapphire-icon-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-icon-button-time-transition);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-icon-button-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-icon-button-size-focus-ring-border) solid var(--sapphire-icon-button-color-focus-ring);outline-offset:var(--sapphire-icon-button-size-focus-ring-offset)}.sapphire-icon-button--primary-fill{background-color:var(--sapphire-icon-button-color-background-primary-default);color:var(--sapphire-icon-button-color-content-primary-default)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-primary-hover)}.sapphire-icon-button--primary-fill.is-focus,.sapphire-icon-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-primary-focus)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-primary-active)}.sapphire-icon-button--secondary-fill{background-color:var(--sapphire-icon-button-color-background-secondary-default);color:var(--sapphire-icon-button-color-content-secondary-default)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-fill.is-focus,.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-focus)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-default)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-hover)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-focus)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-secondary-ghost-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-focus)}.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-icon-button-color-background-secondary-ghost-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-icon-button--tertiary-fill{background-color:var(--sapphire-icon-button-color-background-tertiary-default);color:var(--sapphire-icon-button-color-content-tertiary-default)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-fill.is-focus,.sapphire-icon-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-focus)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-default)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-hover)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-focus)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-tertiary-ghost-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-focus)}.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-icon-button-color-background-tertiary-ghost-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-icon-button--danger-fill{background-color:var(--sapphire-icon-button-color-background-danger-default);color:var(--sapphire-icon-button-color-content-danger-default)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-fill.is-focus,.sapphire-icon-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-focus)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-default)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-hover)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-focus)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-icon-button-color-background-danger-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-danger-ghost-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-focus)}.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-icon-button-color-background-danger-ghost-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-icon-button-size-icon-m);width:var(--sapphire-icon-button-size-icon-m)}.sapphire-icon-button--large .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-l);width:var(--sapphire-icon-button-size-icon-l)}.sapphire-icon-button--small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-s);width:var(--sapphire-icon-button-size-icon-s)}.sapphire-icon-button--extra-small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-xs);width:var(--sapphire-icon-button-size-icon-xs)}.sapphire-icon-button--large{height:var(--sapphire-icon-button-size-height-l);width:var(--sapphire-icon-button-size-width-l);border-radius:var(--sapphire-icon-button-size-radius-l)}.sapphire-icon-button--small{height:var(--sapphire-icon-button-size-height-s);width:var(--sapphire-icon-button-size-width-s);border-radius:var(--sapphire-icon-button-size-radius-s)}.sapphire-icon-button--extra-small{height:var(--sapphire-icon-button-size-height-xs);width:var(--sapphire-icon-button-size-width-xs);border-radius:var(--sapphire-icon-button-size-radius-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
57
  __decorate([
58
58
  CoerceBoolean
59
59
  ], IconButtonComponent.prototype, "disabled", void 0);
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
72
72
  '[class.sapphire-icon-button--small]': 'size === "small"',
73
73
  '[class.sapphire-icon-button--extra-small]': 'size === "extraSmall"',
74
74
  '[class.sapphire-icon-button--secondary-surface]': 'surface === "secondary"',
75
- }, 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-icon-button-size-height-m);width:var(--sapphire-icon-button-size-width-m);flex-shrink:0;border-radius:var(--sapphire-icon-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-icon-button-time-transition);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-icon-button-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-icon-button-size-focus-ring-border) solid var(--sapphire-icon-button-color-focus-ring);outline-offset:var(--sapphire-icon-button-size-focus-ring-offset)}.sapphire-icon-button--primary-fill{background-color:var(--sapphire-icon-button-color-background-primary-default);color:var(--sapphire-icon-button-color-content-primary-default)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-primary-hover)}.sapphire-icon-button--primary-fill.is-focus,.sapphire-icon-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-primary-focus)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-primary-active)}.sapphire-icon-button--secondary-fill{background-color:var(--sapphire-icon-button-color-background-secondary-default);color:var(--sapphire-icon-button-color-content-secondary-default)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-fill.is-focus,.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-focus)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-default)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-hover)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-focus)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-secondary-ghost-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-focus)}.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-icon-button-color-background-secondary-ghost-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-icon-button--tertiary-fill{background-color:var(--sapphire-icon-button-color-background-tertiary-default);color:var(--sapphire-icon-button-color-content-tertiary-default)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-fill.is-focus,.sapphire-icon-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-focus)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-default)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-hover)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-focus)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-tertiary-ghost-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-focus)}.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-icon-button-color-background-tertiary-ghost-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-icon-button--danger-fill{background-color:var(--sapphire-icon-button-color-background-danger-default);color:var(--sapphire-icon-button-color-content-danger-default)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-fill.is-focus,.sapphire-icon-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-focus)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-default)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-hover)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-focus)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-icon-button-color-background-danger-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-danger-ghost-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-focus)}.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-icon-button-color-background-danger-ghost-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-icon-button-size-icon-m);width:var(--sapphire-icon-button-size-icon-m)}.sapphire-icon-button--large .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-l);width:var(--sapphire-icon-button-size-icon-l)}.sapphire-icon-button--small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-s);width:var(--sapphire-icon-button-size-icon-s)}.sapphire-icon-button--extra-small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-xs);width:var(--sapphire-icon-button-size-icon-xs)}.sapphire-icon-button--large{height:var(--sapphire-icon-button-size-height-l);width:var(--sapphire-icon-button-size-width-l);border-radius:var(--sapphire-icon-button-size-radius-l)}.sapphire-icon-button--small{height:var(--sapphire-icon-button-size-height-s);width:var(--sapphire-icon-button-size-width-s);border-radius:var(--sapphire-icon-button-size-radius-s)}.sapphire-icon-button--extra-small{height:var(--sapphire-icon-button-size-height-xs);width:var(--sapphire-icon-button-size-width-xs);border-radius:var(--sapphire-icon-button-size-radius-xs)}\n"] }]
75
+ }, 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-icon-button-size-height-m);width:var(--sapphire-icon-button-size-width-m);flex-shrink:0;border-radius:var(--sapphire-icon-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-icon-button-time-transition);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-icon-button-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-icon-button-size-focus-ring-border) solid var(--sapphire-icon-button-color-focus-ring);outline-offset:var(--sapphire-icon-button-size-focus-ring-offset)}.sapphire-icon-button--primary-fill{background-color:var(--sapphire-icon-button-color-background-primary-default);color:var(--sapphire-icon-button-color-content-primary-default)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-primary-hover)}.sapphire-icon-button--primary-fill.is-focus,.sapphire-icon-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-primary-focus)}.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-primary-active)}.sapphire-icon-button--secondary-fill{background-color:var(--sapphire-icon-button-color-background-secondary-default);color:var(--sapphire-icon-button-color-content-secondary-default)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-fill.is-focus,.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-focus)}.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-default)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-hover)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-focus)}.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-surface-secondary-active)}.sapphire-icon-button--secondary-ghost{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-secondary-ghost-hover);color:var(--sapphire-icon-button-color-content-secondary-hover)}.sapphire-icon-button--secondary-ghost.is-focus,.sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-focus)}.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-icon-button-color-background-secondary-ghost-active);color:var(--sapphire-icon-button-color-content-secondary-active)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-icon-button--tertiary-fill{background-color:var(--sapphire-icon-button-color-background-tertiary-default);color:var(--sapphire-icon-button-color-content-tertiary-default)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-fill.is-focus,.sapphire-icon-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-focus)}.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-default)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-hover)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-focus)}.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-surface-secondary-active)}.sapphire-icon-button--tertiary-ghost{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-tertiary-ghost-hover);color:var(--sapphire-icon-button-color-content-tertiary-hover)}.sapphire-icon-button--tertiary-ghost.is-focus,.sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-focus)}.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-icon-button-color-background-tertiary-ghost-active);color:var(--sapphire-icon-button-color-content-tertiary-active)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-icon-button--danger-fill{background-color:var(--sapphire-icon-button-color-background-danger-default);color:var(--sapphire-icon-button-color-content-danger-default)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-fill.is-focus,.sapphire-icon-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-focus)}.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-default)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-hover)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-focus)}.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-surface-secondary-active)}.sapphire-icon-button--danger-ghost{background-color:var(--sapphire-icon-button-color-background-danger-ghost-default);color:var(--sapphire-icon-button-color-content-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-icon-button-color-background-danger-ghost-hover);color:var(--sapphire-icon-button-color-content-danger-hover)}.sapphire-icon-button--danger-ghost.is-focus,.sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-focus)}.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-icon-button-color-background-danger-ghost-active);color:var(--sapphire-icon-button-color-content-danger-active)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-icon-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-icon-button-size-icon-m);width:var(--sapphire-icon-button-size-icon-m)}.sapphire-icon-button--large .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-l);width:var(--sapphire-icon-button-size-icon-l)}.sapphire-icon-button--small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-s);width:var(--sapphire-icon-button-size-icon-s)}.sapphire-icon-button--extra-small .sapphire-icon-button__icon{height:var(--sapphire-icon-button-size-icon-xs);width:var(--sapphire-icon-button-size-icon-xs)}.sapphire-icon-button--large{height:var(--sapphire-icon-button-size-height-l);width:var(--sapphire-icon-button-size-width-l);border-radius:var(--sapphire-icon-button-size-radius-l)}.sapphire-icon-button--small{height:var(--sapphire-icon-button-size-height-s);width:var(--sapphire-icon-button-size-width-s);border-radius:var(--sapphire-icon-button-size-radius-s)}.sapphire-icon-button--extra-small{height:var(--sapphire-icon-button-size-height-xs);width:var(--sapphire-icon-button-size-width-xs);border-radius:var(--sapphire-icon-button-size-radius-xs)}\n"] }]
76
76
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
77
77
  type: Input
78
78
  }], appearance: [{
package/esm2020/lib/theme/src/theme-root.directive.mjs CHANGED
@@ -1,17 +1,19 @@
1
- import { Directive } from '@angular/core';
1
+ import { Directive, Optional, SkipSelf } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
- import * as i1 from "./theme-base.directive";
3
+ import * as i1 from "./top-level-theme-ref.service";
4
+ import * as i2 from "./theme-base.directive";
4
5
  /**
5
6
  * Applies the current theme style on an element which is not under the rendered
6
7
  * sp-theme, in DOM tree. Useful for non-Sapphire portal components that render things in body.
7
8
  *
8
9
  */
9
10
  export class ThemeRootDirective {
10
- constructor(elementRef, theme) {
11
+ constructor(elementRef, themeRef, parentTheme) {
12
+ const theme = parentTheme || themeRef.theme;
11
13
  theme.applyOnDomNode(elementRef.nativeElement);
12
14
  }
13
15
  }
14
- ThemeRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, deps: [{ token: i0.ElementRef }, { token: i1.ThemeBaseDirective }], target: i0.ɵɵFactoryTarget.Directive });
16
+ ThemeRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, deps: [{ token: i0.ElementRef }, { token: i1.TopLevelThemeRef }, { token: i2.ThemeBaseDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
15
17
  ThemeRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeRootDirective, isStandalone: true, selector: "[sp-theme-root]", ngImport: i0 });
16
18
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, decorators: [{
17
19
  type: Directive,
@@ -19,5 +21,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
19
21
  selector: '[sp-theme-root]',
20
22
  standalone: true,
21
23
  }]
22
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ThemeBaseDirective }]; } });
23
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtcm9vdC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3RoZW1lL3NyYy90aGVtZS1yb290LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLE1BQU0sZUFBZSxDQUFDOzs7QUFHdEQ7Ozs7R0FJRztBQUtILE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsWUFBWSxVQUFzQixFQUFFLEtBQXlCO1FBQzNELEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ2pELENBQUM7OytHQUhVLGtCQUFrQjttR0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBSjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZUJhc2VEaXJlY3RpdmUgfSBmcm9tICcuL3RoZW1lLWJhc2UuZGlyZWN0aXZlJztcblxuLyoqXG4gKiBBcHBsaWVzIHRoZSBjdXJyZW50IHRoZW1lIHN0eWxlIG9uIGFuIGVsZW1lbnQgd2hpY2ggaXMgbm90IHVuZGVyIHRoZSByZW5kZXJlZFxuICogc3AtdGhlbWUsIGluIERPTSB0cmVlLiBVc2VmdWwgZm9yIG5vbi1TYXBwaGlyZSBwb3J0YWwgY29tcG9uZW50cyB0aGF0IHJlbmRlciB0aGluZ3MgaW4gYm9keS5cbiAqXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzcC10aGVtZS1yb290XScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFRoZW1lUm9vdERpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsIHRoZW1lOiBUaGVtZUJhc2VEaXJlY3RpdmUpIHtcbiAgICB0aGVtZS5hcHBseU9uRG9tTm9kZShlbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICB9XG59XG4iXX0=
24
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TopLevelThemeRef }, { type: i2.ThemeBaseDirective, decorators: [{
25
+ type: Optional
26
+ }, {
27
+ type: SkipSelf
28
+ }] }]; } });
29
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtcm9vdC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3RoZW1lL3NyYy90aGVtZS1yb290LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFJMUU7Ozs7R0FJRztBQUtILE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsWUFDRSxVQUFzQixFQUN0QixRQUEwQixFQUNGLFdBQStCO1FBRXZELE1BQU0sS0FBSyxHQUFHLFdBQVcsSUFBSSxRQUFRLENBQUMsS0FBSyxDQUFDO1FBQzVDLEtBQUssQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ2pELENBQUM7OytHQVJVLGtCQUFrQjttR0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBSjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzswQkFLSSxRQUFROzswQkFBSSxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBPcHRpb25hbCwgU2tpcFNlbGYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRoZW1lQmFzZURpcmVjdGl2ZSB9IGZyb20gJy4vdGhlbWUtYmFzZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgVG9wTGV2ZWxUaGVtZVJlZiB9IGZyb20gJy4vdG9wLWxldmVsLXRoZW1lLXJlZi5zZXJ2aWNlJztcblxuLyoqXG4gKiBBcHBsaWVzIHRoZSBjdXJyZW50IHRoZW1lIHN0eWxlIG9uIGFuIGVsZW1lbnQgd2hpY2ggaXMgbm90IHVuZGVyIHRoZSByZW5kZXJlZFxuICogc3AtdGhlbWUsIGluIERPTSB0cmVlLiBVc2VmdWwgZm9yIG5vbi1TYXBwaGlyZSBwb3J0YWwgY29tcG9uZW50cyB0aGF0IHJlbmRlciB0aGluZ3MgaW4gYm9keS5cbiAqXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzcC10aGVtZS1yb290XScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFRoZW1lUm9vdERpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgdGhlbWVSZWY6IFRvcExldmVsVGhlbWVSZWYsXG4gICAgQE9wdGlvbmFsKCkgQFNraXBTZWxmKCkgcGFyZW50VGhlbWU6IFRoZW1lQmFzZURpcmVjdGl2ZVxuICApIHtcbiAgICBjb25zdCB0aGVtZSA9IHBhcmVudFRoZW1lIHx8IHRoZW1lUmVmLnRoZW1lO1xuICAgIHRoZW1lLmFwcGx5T25Eb21Ob2RlKGVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gIH1cbn1cbiJdfQ==