@ifsworld/granite-components 3.3.0 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/ifsworld-granite-components.umd.js +123 -20
- package/bundles/ifsworld-granite-components.umd.js.map +1 -1
- package/bundles/ifsworld-granite-components.umd.min.js +3 -3
- package/bundles/ifsworld-granite-components.umd.min.js.map +1 -1
- package/esm2015/index.js +2 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/index.metadata.json +1 -1
- package/esm2015/lib/badge/badge.component.js +1 -1
- package/esm2015/lib/badge/badge.component.metadata.json +1 -1
- package/esm2015/lib/button/button.component.js +2 -2
- package/esm2015/lib/button/button.component.metadata.json +1 -1
- package/esm2015/lib/checkbox/checkbox.component.js +89 -0
- package/esm2015/lib/checkbox/checkbox.component.js.map +1 -0
- package/esm2015/lib/checkbox/checkbox.component.metadata.json +1 -0
- package/esm2015/lib/checkbox/checkbox.module.js +11 -0
- package/esm2015/lib/checkbox/checkbox.module.js.map +1 -0
- package/esm2015/lib/checkbox/checkbox.module.metadata.json +1 -0
- package/esm2015/lib/input-field/input-field.component.js +2 -2
- package/esm2015/lib/input-field/input-field.component.js.map +1 -1
- package/esm2015/lib/input-field/input-field.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-item.component.js +1 -1
- package/esm2015/lib/menu/menu-item.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-touch-close.component.js +1 -1
- package/esm2015/lib/menu/menu-touch-close.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-touch-title.component.js +1 -1
- package/esm2015/lib/menu/menu-touch-title.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu.component.js +1 -1
- package/esm2015/lib/menu/menu.component.metadata.json +1 -1
- package/esm2015/lib/radio-button/radio-button.component.js +4 -4
- package/esm2015/lib/radio-button/radio-button.component.js.map +1 -1
- package/esm2015/lib/radio-button/radio-button.component.metadata.json +1 -1
- package/esm2015/lib/table/cell/table-data-cell.component.js +4 -3
- package/esm2015/lib/table/cell/table-data-cell.component.js.map +1 -1
- package/esm2015/lib/table/cell/table-data-cell.component.metadata.json +1 -1
- package/esm2015/lib/table/cell/table-header-cell.component.js +1 -1
- package/esm2015/lib/table/cell/table-header-cell.component.metadata.json +1 -1
- package/esm2015/lib/table/table.component.js +2 -2
- package/esm2015/lib/table/table.component.js.map +1 -1
- package/esm2015/lib/table/table.component.metadata.json +1 -1
- package/esm2015/lib/toggle-switch/toggle-switch.component.js +1 -1
- package/esm2015/lib/toggle-switch/toggle-switch.component.metadata.json +1 -1
- package/fesm2015/ifsworld-granite-components.js +117 -21
- package/fesm2015/ifsworld-granite-components.js.map +1 -1
- package/ifsworld-granite-components.metadata.json +1 -1
- package/index.d.ts +2 -0
- package/lib/checkbox/checkbox.component.d.ts +26 -0
- package/lib/checkbox/checkbox.module.d.ts +2 -0
- package/lib/input-field/input-field.component.d.ts +2 -2
- package/lib/radio-button/radio-button.component.d.ts +1 -1
- package/lib/table/cell/table-data-cell.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/core/style/_mixins.scss +10 -0
- package/src/lib/core/style/_tokens.scss +7 -0
|
@@ -418,7 +418,7 @@ GraniteBadgeComponent.decorators = [
|
|
|
418
418
|
},
|
|
419
419
|
template: '<ng-content></ng-content>',
|
|
420
420
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
421
|
-
styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:
|
|
421
|
+
styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:calc(var(--granite-spacing-m) * .3125);border-radius:.3125rem;-webkit-padding-start:calc(var(--granite-spacing-m) * .625);padding-inline-start:calc(var(--granite-spacing-m) * .625);-webkit-padding-end:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}"]
|
|
422
422
|
},] }
|
|
423
423
|
];
|
|
424
424
|
GraniteBadgeComponent.ctorParameters = () => [
|
|
@@ -534,7 +534,7 @@ GraniteMenuItemComponent.decorators = [
|
|
|
534
534
|
//#endregion --- Touch device customizations ---
|
|
535
535
|
'(mouseenter)': '_hovered.next(this)',
|
|
536
536
|
},
|
|
537
|
-
styles: [":host{display:block;position:relative;line-height:
|
|
537
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
|
|
538
538
|
},] }
|
|
539
539
|
];
|
|
540
540
|
GraniteMenuItemComponent.ctorParameters = () => [
|
|
@@ -1103,7 +1103,7 @@ GraniteMenuComponent.decorators = [
|
|
|
1103
1103
|
providers: [
|
|
1104
1104
|
{ provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
|
|
1105
1105
|
],
|
|
1106
|
-
styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:
|
|
1106
|
+
styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:.25rem;-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - ($granite-base-rem * 7))}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:.25rem;-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
|
|
1107
1107
|
},] }
|
|
1108
1108
|
];
|
|
1109
1109
|
|
|
@@ -1795,7 +1795,7 @@ GraniteMenuTouchCloseComponent.decorators = [
|
|
|
1795
1795
|
host: {
|
|
1796
1796
|
'[class.granite-device-output-touch]': 'true',
|
|
1797
1797
|
},
|
|
1798
|
-
styles: [":host{display:block;position:relative;line-height:
|
|
1798
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
|
|
1799
1799
|
},] }
|
|
1800
1800
|
];
|
|
1801
1801
|
|
|
@@ -1828,7 +1828,7 @@ GraniteMenuTouchTitleItemComponent.decorators = [
|
|
|
1828
1828
|
'[class.granite-menu-item-back-trigger]': '_triggersBack',
|
|
1829
1829
|
'[class.granite-device-output-touch]': 'true',
|
|
1830
1830
|
},
|
|
1831
|
-
styles: [":host{display:block;position:relative;line-height:
|
|
1831
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
|
|
1832
1832
|
},] }
|
|
1833
1833
|
];
|
|
1834
1834
|
GraniteMenuTouchTitleItemComponent.ctorParameters = () => [
|
|
@@ -2131,7 +2131,7 @@ GraniteToggleSwitchComponent.decorators = [
|
|
|
2131
2131
|
},
|
|
2132
2132
|
template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n",
|
|
2133
2133
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2134
|
-
styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *,:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-toggle-switch-bar{width:
|
|
2134
|
+
styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb,html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *,:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}:host-context([dir=ltr]) .granite-toggle-switch-thumb,html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) .granite-toggle-switch-thumb,html[dir=rtl] .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}"]
|
|
2135
2135
|
},] }
|
|
2136
2136
|
];
|
|
2137
2137
|
GraniteToggleSwitchComponent.ctorParameters = () => [
|
|
@@ -2215,8 +2215,8 @@ class GraniteRadioButtonComponent {
|
|
|
2215
2215
|
focus(origin = 'program', options) {
|
|
2216
2216
|
this._focusMonitor.focusVia(this._getInputElement(), origin, options);
|
|
2217
2217
|
}
|
|
2218
|
-
_radioClick(
|
|
2219
|
-
this.radioChange.emit(
|
|
2218
|
+
_radioClick(element) {
|
|
2219
|
+
this.radioChange.emit(element === null || element === void 0 ? void 0 : element.value);
|
|
2220
2220
|
}
|
|
2221
2221
|
_radioChange() {
|
|
2222
2222
|
this.checked = this._getInputElement().checked;
|
|
@@ -2241,8 +2241,8 @@ GraniteRadioButtonComponent.decorators = [
|
|
|
2241
2241
|
'[class.granite-radio-button-checked]': 'checked',
|
|
2242
2242
|
'[class.granite-radio-button-readonly]': 'readonly',
|
|
2243
2243
|
},
|
|
2244
|
-
template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (click)=\"_radioClick($event.target
|
|
2245
|
-
styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border
|
|
2244
|
+
template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (click)=\"_radioClick($event.target)\"\n (change)=\"_radioChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n",
|
|
2245
|
+
styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;-webkit-animation:growAnimation .1s;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:var(--granite-spacing-xl);margin-inline-end:var(--granite-spacing-xl)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@-webkit-keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}"]
|
|
2246
2246
|
},] }
|
|
2247
2247
|
];
|
|
2248
2248
|
GraniteRadioButtonComponent.ctorParameters = () => [
|
|
@@ -2274,6 +2274,101 @@ GraniteRadioButtonModule.decorators = [
|
|
|
2274
2274
|
},] }
|
|
2275
2275
|
];
|
|
2276
2276
|
|
|
2277
|
+
class GraniteCheckboxComponent {
|
|
2278
|
+
constructor(_focusMonitor) {
|
|
2279
|
+
this._focusMonitor = _focusMonitor;
|
|
2280
|
+
this.id = null;
|
|
2281
|
+
this.checked = false;
|
|
2282
|
+
this.disabled = false;
|
|
2283
|
+
this.readonly = false;
|
|
2284
|
+
this.labelPosition = 'after';
|
|
2285
|
+
this.ariaLabel = null;
|
|
2286
|
+
this.ariaLabelledby = null;
|
|
2287
|
+
this.valueChange = new EventEmitter();
|
|
2288
|
+
this.checkboxChange = new EventEmitter();
|
|
2289
|
+
this.checkboxBlur = new EventEmitter();
|
|
2290
|
+
this._positionBefore = false;
|
|
2291
|
+
this._checkboxDisabled = false;
|
|
2292
|
+
}
|
|
2293
|
+
ngOnChanges(changes) {
|
|
2294
|
+
if (changes.checked) {
|
|
2295
|
+
this.checked = coerceBooleanProperty(changes.checked.currentValue);
|
|
2296
|
+
}
|
|
2297
|
+
if (changes.disabled) {
|
|
2298
|
+
this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
|
|
2299
|
+
}
|
|
2300
|
+
if (changes.readonly) {
|
|
2301
|
+
this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
|
|
2302
|
+
}
|
|
2303
|
+
if (changes.labelPosition != null) {
|
|
2304
|
+
this._positionBefore =
|
|
2305
|
+
changes.labelPosition.currentValue != null &&
|
|
2306
|
+
changes.labelPosition.currentValue === 'before';
|
|
2307
|
+
}
|
|
2308
|
+
if ((changes.disabled || changes.readonly) &&
|
|
2309
|
+
(this.disabled || this.readonly)) {
|
|
2310
|
+
this._checkboxDisabled = true;
|
|
2311
|
+
}
|
|
2312
|
+
}
|
|
2313
|
+
focus(origin = 'program', options) {
|
|
2314
|
+
this._focusMonitor.focusVia(this._getInputElement(), origin, options);
|
|
2315
|
+
}
|
|
2316
|
+
_onBlur() {
|
|
2317
|
+
this.checkboxBlur.emit();
|
|
2318
|
+
}
|
|
2319
|
+
_checkboxChange() {
|
|
2320
|
+
this.checked = this._getInputElement().checked;
|
|
2321
|
+
this.valueChange.emit(this.checked);
|
|
2322
|
+
}
|
|
2323
|
+
_checkboxClick() {
|
|
2324
|
+
this.checkboxChange.emit();
|
|
2325
|
+
}
|
|
2326
|
+
_getInputElement() {
|
|
2327
|
+
return this._inputElement.nativeElement;
|
|
2328
|
+
}
|
|
2329
|
+
}
|
|
2330
|
+
GraniteCheckboxComponent.decorators = [
|
|
2331
|
+
{ type: Component, args: [{
|
|
2332
|
+
selector: 'granite-checkbox',
|
|
2333
|
+
exportAs: 'graniteCheckbox',
|
|
2334
|
+
host: {
|
|
2335
|
+
class: 'granite-checkbox',
|
|
2336
|
+
'[class.granite-checkbox-checked]': 'checked',
|
|
2337
|
+
'[class.granite-checkbox-disabled]': 'disabled',
|
|
2338
|
+
'[class.granite-checkbox-readonly]': 'readonly',
|
|
2339
|
+
'[class.granite-checkbox-label-before]': '_positionBefore',
|
|
2340
|
+
},
|
|
2341
|
+
template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
|
|
2342
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2343
|
+
styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *,:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
|
|
2344
|
+
},] }
|
|
2345
|
+
];
|
|
2346
|
+
GraniteCheckboxComponent.ctorParameters = () => [
|
|
2347
|
+
{ type: FocusMonitor }
|
|
2348
|
+
];
|
|
2349
|
+
GraniteCheckboxComponent.propDecorators = {
|
|
2350
|
+
id: [{ type: Input }],
|
|
2351
|
+
checked: [{ type: Input }],
|
|
2352
|
+
disabled: [{ type: Input }],
|
|
2353
|
+
readonly: [{ type: Input }],
|
|
2354
|
+
labelPosition: [{ type: Input }],
|
|
2355
|
+
ariaLabel: [{ type: Input, args: ['aria-label',] }],
|
|
2356
|
+
ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
|
|
2357
|
+
valueChange: [{ type: Output }],
|
|
2358
|
+
checkboxChange: [{ type: Output }],
|
|
2359
|
+
checkboxBlur: [{ type: Output }],
|
|
2360
|
+
_inputElement: [{ type: ViewChild, args: ['input',] }]
|
|
2361
|
+
};
|
|
2362
|
+
|
|
2363
|
+
class GraniteCheckboxModule {
|
|
2364
|
+
}
|
|
2365
|
+
GraniteCheckboxModule.decorators = [
|
|
2366
|
+
{ type: NgModule, args: [{
|
|
2367
|
+
declarations: [GraniteCheckboxComponent],
|
|
2368
|
+
exports: [GraniteCheckboxComponent],
|
|
2369
|
+
},] }
|
|
2370
|
+
];
|
|
2371
|
+
|
|
2277
2372
|
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
|
2278
2373
|
const disabledMixin = (Base = class {
|
|
2279
2374
|
}) => {
|
|
@@ -2341,7 +2436,7 @@ GraniteButtonComponent.decorators = [
|
|
|
2341
2436
|
template: '<ng-content></ng-content>',
|
|
2342
2437
|
inputs: ['disabled'],
|
|
2343
2438
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2344
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{
|
|
2439
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
|
|
2345
2440
|
},] }
|
|
2346
2441
|
];
|
|
2347
2442
|
GraniteButtonComponent.ctorParameters = () => [
|
|
@@ -2376,7 +2471,7 @@ GraniteAnchorComponent.decorators = [
|
|
|
2376
2471
|
template: '<ng-content></ng-content>',
|
|
2377
2472
|
inputs: ['disabled'],
|
|
2378
2473
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2379
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{
|
|
2474
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
|
|
2380
2475
|
},] }
|
|
2381
2476
|
];
|
|
2382
2477
|
GraniteAnchorComponent.ctorParameters = () => [
|
|
@@ -2428,9 +2523,9 @@ class GraniteTableComponent {
|
|
|
2428
2523
|
GraniteTableComponent.decorators = [
|
|
2429
2524
|
{ type: Component, args: [{
|
|
2430
2525
|
selector: 'granite-table',
|
|
2431
|
-
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let
|
|
2526
|
+
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let row; let rowI = dataIndex\"\n [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n [value]=\"row[column.name]\"\n [rowIndex]=\"rowI\"\n [columnIndex]=\"columnI\"\n [staticType]=\"column.staticType\"\n [column]=\"column\"\n [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n [row]=\"row\"\n ></cdk-cell>\n </ng-container>\n\n <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n <cdk-row\n *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n [attr.aria-rowindex]=\"rowI + 1\"\n ></cdk-row>\n</cdk-table>\n",
|
|
2432
2527
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2433
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1}cdk-cell{
|
|
2528
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:2.5rem}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
|
|
2434
2529
|
},] }
|
|
2435
2530
|
];
|
|
2436
2531
|
GraniteTableComponent.propDecorators = {
|
|
@@ -2456,8 +2551,8 @@ GraniteTableDataCellComponent.decorators = [
|
|
|
2456
2551
|
{ type: Component, args: [{
|
|
2457
2552
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2458
2553
|
selector: 'cdk-cell[graniteTableDataCell]',
|
|
2459
|
-
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
2460
|
-
styles: [".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:
|
|
2554
|
+
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column,\n row: row\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
2555
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
|
|
2461
2556
|
},] }
|
|
2462
2557
|
];
|
|
2463
2558
|
GraniteTableDataCellComponent.propDecorators = {
|
|
@@ -2465,7 +2560,8 @@ GraniteTableDataCellComponent.propDecorators = {
|
|
|
2465
2560
|
staticType: [{ type: Input }],
|
|
2466
2561
|
rowIndex: [{ type: Input }],
|
|
2467
2562
|
columnIndex: [{ type: Input }],
|
|
2468
|
-
tableCellTemplateRef: [{ type: Input }]
|
|
2563
|
+
tableCellTemplateRef: [{ type: Input }],
|
|
2564
|
+
row: [{ type: Input }]
|
|
2469
2565
|
};
|
|
2470
2566
|
|
|
2471
2567
|
class GraniteTableHeaderCellComponent extends GraniteCell {
|
|
@@ -2475,7 +2571,7 @@ GraniteTableHeaderCellComponent.decorators = [
|
|
|
2475
2571
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2476
2572
|
selector: 'cdk-header-cell[graniteTableHeaderCell]',
|
|
2477
2573
|
template: "<span class=\"granite-table-header-cell-title\">\n <ng-content></ng-content>\n</span>\n",
|
|
2478
|
-
styles: [".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:
|
|
2574
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
|
|
2479
2575
|
},] }
|
|
2480
2576
|
];
|
|
2481
2577
|
|
|
@@ -2541,8 +2637,8 @@ class GraniteInputFieldComponent {
|
|
|
2541
2637
|
this._empty = false;
|
|
2542
2638
|
this._passwordFieldIcon = 'view';
|
|
2543
2639
|
this._passwordField = false;
|
|
2544
|
-
this._passwordToggled = false;
|
|
2545
2640
|
this._currentCharCount = 0;
|
|
2641
|
+
this._passwordToggled = false;
|
|
2546
2642
|
}
|
|
2547
2643
|
ngOnInit() {
|
|
2548
2644
|
this._validateType();
|
|
@@ -2634,7 +2730,7 @@ GraniteInputFieldComponent.decorators = [
|
|
|
2634
2730
|
class: 'granite-input-field',
|
|
2635
2731
|
},
|
|
2636
2732
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2637
|
-
styles: [":host{transition:all .2s ease-out;width:
|
|
2733
|
+
styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-s);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::-moz-placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:required:-ms-input-placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:-moz-read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base::-moz-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:-ms-input-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:hover::-moz-placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:hover:-ms-input-placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::-moz-placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:focus:-ms-input-placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-s);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-s);background-size:contain;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}"]
|
|
2638
2734
|
},] }
|
|
2639
2735
|
];
|
|
2640
2736
|
GraniteInputFieldComponent.ctorParameters = () => [
|
|
@@ -2774,5 +2870,5 @@ GraniteCoreModule.decorators = [
|
|
|
2774
2870
|
* Generated bundle index. Do not edit.
|
|
2775
2871
|
*/
|
|
2776
2872
|
|
|
2777
|
-
export { ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
|
|
2873
|
+
export { ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
|
|
2778
2874
|
//# sourceMappingURL=ifsworld-granite-components.js.map
|