@ifsworld/granite-components 4.3.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -4
- package/esm2020/ifsworld-granite-components.mjs +5 -0
- package/esm2020/index.mjs +48 -0
- package/esm2020/lib/arrange-grid/arrange-grid-item.component.mjs +44 -0
- package/esm2020/lib/arrange-grid/arrange-grid.component.mjs +125 -0
- package/esm2020/lib/arrange-grid/arrange-grid.module.mjs +19 -0
- package/esm2020/lib/badge/badge.component.mjs +39 -0
- package/esm2020/lib/badge/badge.module.mjs +18 -0
- package/esm2020/lib/badge/testing/badge.harness.mjs +25 -0
- package/esm2020/lib/button/button.component.mjs +89 -0
- package/esm2020/lib/button/button.module.mjs +16 -0
- package/esm2020/lib/checkbox/checkbox-group.component.mjs +17 -0
- package/esm2020/lib/checkbox/checkbox.component.mjs +96 -0
- package/esm2020/lib/checkbox/checkbox.module.mjs +17 -0
- package/esm2020/lib/core/animation.mjs +34 -0
- package/esm2020/lib/core/client-environment.mjs +20 -0
- package/esm2020/lib/core/common-behaviors/disabled.mjs +27 -0
- package/esm2020/lib/core/core.module.mjs +36 -0
- package/esm2020/lib/core/devices/client-input-desktop.directive.mjs +29 -0
- package/esm2020/lib/core/devices/client-input-touch.directive.mjs +29 -0
- package/esm2020/lib/core/devices/client-output-desktop.directive.mjs +29 -0
- package/esm2020/lib/core/devices/client-output-touch.directive.mjs +29 -0
- package/esm2020/lib/core/pipes/pure-pipes.module.mjs +16 -0
- package/esm2020/lib/core/pipes/title.pipe.mjs +21 -0
- package/esm2020/lib/core/radio-checkbox-base.mjs +19 -0
- package/esm2020/lib/core/theme.library.mjs +59 -0
- package/esm2020/lib/core/types.mjs +2 -0
- package/esm2020/lib/grid/grid.component.mjs +128 -0
- package/esm2020/lib/grid/grid.module.mjs +18 -0
- package/esm2020/lib/icon/icon.component.mjs +43 -0
- package/esm2020/lib/icon/icon.module.mjs +16 -0
- package/esm2020/lib/input-field/input-field.component.mjs +160 -0
- package/esm2020/lib/input-field/input-field.module.mjs +20 -0
- package/esm2020/lib/menu/divider.directive.mjs +23 -0
- package/esm2020/lib/menu/menu-base.mjs +347 -0
- package/esm2020/lib/menu/menu-desktop-animations.mjs +23 -0
- package/esm2020/lib/menu/menu-errors.mjs +37 -0
- package/esm2020/lib/menu/menu-item.component.mjs +91 -0
- package/esm2020/lib/menu/menu-panel.mjs +7 -0
- package/esm2020/lib/menu/menu-positions.mjs +9 -0
- package/esm2020/lib/menu/menu-touch-animations.mjs +137 -0
- package/esm2020/lib/menu/menu-touch-close.component.mjs +13 -0
- package/esm2020/lib/menu/menu-touch-title.component.mjs +59 -0
- package/esm2020/lib/menu/menu-trigger-for.directive.mjs +702 -0
- package/esm2020/lib/menu/menu.component.mjs +30 -0
- package/esm2020/lib/menu/menu.module.mjs +55 -0
- package/esm2020/lib/menu/testing/menu.harness.mjs +109 -0
- package/esm2020/lib/menu/title.directive.mjs +17 -0
- package/esm2020/lib/radio-button/radio-button.component.mjs +118 -0
- package/esm2020/lib/radio-button/radio-button.module.mjs +17 -0
- package/esm2020/lib/radio-button/radio-group.component.mjs +17 -0
- package/esm2020/lib/table/cell/cell.mjs +15 -0
- package/esm2020/lib/table/cell/table-data-cell.component.mjs +26 -0
- package/esm2020/lib/table/cell/table-header-cell.component.mjs +12 -0
- package/esm2020/lib/table/column/table-column.directive.mjs +23 -0
- package/esm2020/lib/table/table-constants.library.mjs +4 -0
- package/esm2020/lib/table/table.component.mjs +36 -0
- package/esm2020/lib/table/table.module.mjs +32 -0
- package/esm2020/lib/toggle-switch/toggle-switch.component.mjs +96 -0
- package/esm2020/lib/toggle-switch/toggle-switch.module.mjs +16 -0
- package/fesm2015/ifsworld-granite-components.mjs +3145 -0
- package/fesm2015/ifsworld-granite-components.mjs.map +1 -0
- package/fesm2020/ifsworld-granite-components.mjs +3103 -0
- package/fesm2020/ifsworld-granite-components.mjs.map +1 -0
- package/ifsworld-granite-components.d.ts +1 -8
- package/lib/arrange-grid/arrange-grid-item.component.d.ts +3 -0
- package/lib/arrange-grid/arrange-grid.component.d.ts +3 -0
- package/lib/arrange-grid/arrange-grid.module.d.ts +7 -0
- package/lib/badge/badge.component.d.ts +3 -0
- package/lib/badge/badge.module.d.ts +6 -0
- package/lib/button/button.component.d.ts +5 -0
- package/lib/button/button.module.d.ts +5 -0
- package/lib/checkbox/checkbox-group.component.d.ts +3 -0
- package/lib/checkbox/checkbox.component.d.ts +3 -0
- package/lib/checkbox/checkbox.module.d.ts +6 -0
- package/lib/core/core.module.d.ts +8 -0
- package/lib/core/devices/client-input-desktop.directive.d.ts +3 -0
- package/lib/core/devices/client-input-touch.directive.d.ts +3 -0
- package/lib/core/devices/client-output-desktop.directive.d.ts +3 -0
- package/lib/core/devices/client-output-touch.directive.d.ts +3 -0
- package/lib/core/pipes/pure-pipes.module.d.ts +5 -0
- package/lib/core/pipes/title.pipe.d.ts +3 -0
- package/lib/core/radio-checkbox-base.d.ts +3 -0
- package/lib/grid/grid.component.d.ts +5 -0
- package/lib/grid/grid.module.d.ts +6 -0
- package/lib/icon/icon.component.d.ts +3 -0
- package/lib/icon/icon.module.d.ts +5 -0
- package/lib/input-field/input-field.component.d.ts +3 -0
- package/lib/input-field/input-field.module.d.ts +8 -0
- package/lib/menu/divider.directive.d.ts +3 -0
- package/lib/menu/menu-base.d.ts +190 -0
- package/lib/menu/menu-item.component.d.ts +3 -0
- package/lib/menu/menu-touch-close.component.d.ts +3 -0
- package/lib/menu/menu-touch-title.component.d.ts +4 -1
- package/lib/menu/menu-trigger-for.directive.d.ts +4 -1
- package/lib/menu/menu.component.d.ts +4 -187
- package/lib/menu/menu.module.d.ts +15 -0
- package/lib/menu/title.directive.d.ts +3 -0
- package/lib/radio-button/radio-button.component.d.ts +4 -1
- package/lib/radio-button/radio-button.module.d.ts +6 -0
- package/lib/radio-button/radio-group.component.d.ts +3 -0
- package/lib/table/cell/cell.d.ts +3 -0
- package/lib/table/cell/table-data-cell.component.d.ts +3 -0
- package/lib/table/cell/table-header-cell.component.d.ts +3 -0
- package/lib/table/column/table-column.directive.d.ts +3 -0
- package/lib/table/table.component.d.ts +3 -0
- package/lib/table/table.module.d.ts +12 -0
- package/lib/toggle-switch/toggle-switch.component.d.ts +3 -0
- package/lib/toggle-switch/toggle-switch.module.d.ts +5 -0
- package/package.json +25 -12
- package/bundles/ifsworld-granite-components.umd.js +0 -3649
- package/bundles/ifsworld-granite-components.umd.js.map +0 -1
- package/bundles/ifsworld-granite-components.umd.min.js +0 -10
- package/bundles/ifsworld-granite-components.umd.min.js.map +0 -1
- package/esm2015/ifsworld-granite-components.js +0 -13
- package/esm2015/ifsworld-granite-components.js.map +0 -1
- package/esm2015/ifsworld-granite-components.metadata.json +0 -1
- package/esm2015/index.js +0 -48
- package/esm2015/index.js.map +0 -1
- package/esm2015/index.metadata.json +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid-item.component.js +0 -48
- package/esm2015/lib/arrange-grid/arrange-grid-item.component.js.map +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid-item.component.metadata.json +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid.component.js +0 -123
- package/esm2015/lib/arrange-grid/arrange-grid.component.js.map +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid.component.metadata.json +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid.module.js +0 -14
- package/esm2015/lib/arrange-grid/arrange-grid.module.js.map +0 -1
- package/esm2015/lib/arrange-grid/arrange-grid.module.metadata.json +0 -1
- package/esm2015/lib/badge/badge.component.js +0 -44
- package/esm2015/lib/badge/badge.component.js.map +0 -1
- package/esm2015/lib/badge/badge.component.metadata.json +0 -1
- package/esm2015/lib/badge/badge.module.js +0 -13
- package/esm2015/lib/badge/badge.module.js.map +0 -1
- package/esm2015/lib/badge/badge.module.metadata.json +0 -1
- package/esm2015/lib/badge/testing/badge.harness.js +0 -30
- package/esm2015/lib/badge/testing/badge.harness.js.map +0 -1
- package/esm2015/lib/badge/testing/badge.harness.metadata.json +0 -1
- package/esm2015/lib/button/button.component.js +0 -108
- package/esm2015/lib/button/button.component.js.map +0 -1
- package/esm2015/lib/button/button.component.metadata.json +0 -1
- package/esm2015/lib/button/button.module.js +0 -11
- package/esm2015/lib/button/button.module.js.map +0 -1
- package/esm2015/lib/button/button.module.metadata.json +0 -1
- package/esm2015/lib/checkbox/checkbox-group.component.js +0 -19
- package/esm2015/lib/checkbox/checkbox-group.component.js.map +0 -1
- package/esm2015/lib/checkbox/checkbox-group.component.metadata.json +0 -1
- package/esm2015/lib/checkbox/checkbox.component.js +0 -89
- package/esm2015/lib/checkbox/checkbox.component.js.map +0 -1
- package/esm2015/lib/checkbox/checkbox.component.metadata.json +0 -1
- package/esm2015/lib/checkbox/checkbox.module.js +0 -12
- package/esm2015/lib/checkbox/checkbox.module.js.map +0 -1
- package/esm2015/lib/checkbox/checkbox.module.metadata.json +0 -1
- package/esm2015/lib/core/animation.js +0 -34
- package/esm2015/lib/core/animation.js.map +0 -1
- package/esm2015/lib/core/animation.metadata.json +0 -1
- package/esm2015/lib/core/client-environment.js +0 -20
- package/esm2015/lib/core/client-environment.js.map +0 -1
- package/esm2015/lib/core/client-environment.metadata.json +0 -1
- package/esm2015/lib/core/common-behaviors/disabled.js +0 -25
- package/esm2015/lib/core/common-behaviors/disabled.js.map +0 -1
- package/esm2015/lib/core/common-behaviors/disabled.metadata.json +0 -1
- package/esm2015/lib/core/core.module.js +0 -25
- package/esm2015/lib/core/core.module.js.map +0 -1
- package/esm2015/lib/core/core.module.metadata.json +0 -1
- package/esm2015/lib/core/devices/client-input-desktop.directive.js +0 -22
- package/esm2015/lib/core/devices/client-input-desktop.directive.js.map +0 -1
- package/esm2015/lib/core/devices/client-input-desktop.directive.metadata.json +0 -1
- package/esm2015/lib/core/devices/client-input-touch.directive.js +0 -22
- package/esm2015/lib/core/devices/client-input-touch.directive.js.map +0 -1
- package/esm2015/lib/core/devices/client-input-touch.directive.metadata.json +0 -1
- package/esm2015/lib/core/devices/client-output-desktop.directive.js +0 -22
- package/esm2015/lib/core/devices/client-output-desktop.directive.js.map +0 -1
- package/esm2015/lib/core/devices/client-output-desktop.directive.metadata.json +0 -1
- package/esm2015/lib/core/devices/client-output-touch.directive.js +0 -22
- package/esm2015/lib/core/devices/client-output-touch.directive.js.map +0 -1
- package/esm2015/lib/core/devices/client-output-touch.directive.metadata.json +0 -1
- package/esm2015/lib/core/pipes/pure-pipes.module.js +0 -11
- package/esm2015/lib/core/pipes/pure-pipes.module.js.map +0 -1
- package/esm2015/lib/core/pipes/pure-pipes.module.metadata.json +0 -1
- package/esm2015/lib/core/pipes/title.pipe.js +0 -17
- package/esm2015/lib/core/pipes/title.pipe.js.map +0 -1
- package/esm2015/lib/core/pipes/title.pipe.metadata.json +0 -1
- package/esm2015/lib/core/radio-checkbox-base.js +0 -15
- package/esm2015/lib/core/radio-checkbox-base.js.map +0 -1
- package/esm2015/lib/core/radio-checkbox-base.metadata.json +0 -1
- package/esm2015/lib/core/theme.library.js +0 -59
- package/esm2015/lib/core/theme.library.js.map +0 -1
- package/esm2015/lib/core/theme.library.metadata.json +0 -1
- package/esm2015/lib/core/types.js +0 -2
- package/esm2015/lib/core/types.js.map +0 -1
- package/esm2015/lib/core/types.metadata.json +0 -1
- package/esm2015/lib/grid/grid.component.js +0 -131
- package/esm2015/lib/grid/grid.component.js.map +0 -1
- package/esm2015/lib/grid/grid.component.metadata.json +0 -1
- package/esm2015/lib/grid/grid.module.js +0 -13
- package/esm2015/lib/grid/grid.module.js.map +0 -1
- package/esm2015/lib/grid/grid.module.metadata.json +0 -1
- package/esm2015/lib/icon/icon.component.js +0 -48
- package/esm2015/lib/icon/icon.component.js.map +0 -1
- package/esm2015/lib/icon/icon.component.metadata.json +0 -1
- package/esm2015/lib/icon/icon.module.js +0 -11
- package/esm2015/lib/icon/icon.module.js.map +0 -1
- package/esm2015/lib/icon/icon.module.metadata.json +0 -1
- package/esm2015/lib/input-field/input-field.component.js +0 -144
- package/esm2015/lib/input-field/input-field.component.js.map +0 -1
- package/esm2015/lib/input-field/input-field.component.metadata.json +0 -1
- package/esm2015/lib/input-field/input-field.module.js +0 -15
- package/esm2015/lib/input-field/input-field.module.js.map +0 -1
- package/esm2015/lib/input-field/input-field.module.metadata.json +0 -1
- package/esm2015/lib/menu/divider.directive.js +0 -20
- package/esm2015/lib/menu/divider.directive.js.map +0 -1
- package/esm2015/lib/menu/divider.directive.metadata.json +0 -1
- package/esm2015/lib/menu/menu-desktop-animations.js +0 -23
- package/esm2015/lib/menu/menu-desktop-animations.js.map +0 -1
- package/esm2015/lib/menu/menu-desktop-animations.metadata.json +0 -1
- package/esm2015/lib/menu/menu-errors.js +0 -37
- package/esm2015/lib/menu/menu-errors.js.map +0 -1
- package/esm2015/lib/menu/menu-errors.metadata.json +0 -1
- package/esm2015/lib/menu/menu-item.component.js +0 -82
- package/esm2015/lib/menu/menu-item.component.js.map +0 -1
- package/esm2015/lib/menu/menu-item.component.metadata.json +0 -1
- package/esm2015/lib/menu/menu-panel.js +0 -7
- package/esm2015/lib/menu/menu-panel.js.map +0 -1
- package/esm2015/lib/menu/menu-panel.metadata.json +0 -1
- package/esm2015/lib/menu/menu-positions.js +0 -9
- package/esm2015/lib/menu/menu-positions.js.map +0 -1
- package/esm2015/lib/menu/menu-positions.metadata.json +0 -1
- package/esm2015/lib/menu/menu-touch-animations.js +0 -137
- package/esm2015/lib/menu/menu-touch-animations.js.map +0 -1
- package/esm2015/lib/menu/menu-touch-animations.metadata.json +0 -1
- package/esm2015/lib/menu/menu-touch-close.component.js +0 -16
- package/esm2015/lib/menu/menu-touch-close.component.js.map +0 -1
- package/esm2015/lib/menu/menu-touch-close.component.metadata.json +0 -1
- package/esm2015/lib/menu/menu-touch-title.component.js +0 -45
- package/esm2015/lib/menu/menu-touch-title.component.js.map +0 -1
- package/esm2015/lib/menu/menu-touch-title.component.metadata.json +0 -1
- package/esm2015/lib/menu/menu-trigger-for.directive.js +0 -684
- package/esm2015/lib/menu/menu-trigger-for.directive.js.map +0 -1
- package/esm2015/lib/menu/menu-trigger-for.directive.metadata.json +0 -1
- package/esm2015/lib/menu/menu.component.js +0 -362
- package/esm2015/lib/menu/menu.component.js.map +0 -1
- package/esm2015/lib/menu/menu.component.metadata.json +0 -1
- package/esm2015/lib/menu/menu.module.js +0 -38
- package/esm2015/lib/menu/menu.module.js.map +0 -1
- package/esm2015/lib/menu/menu.module.metadata.json +0 -1
- package/esm2015/lib/menu/testing/menu.harness.js +0 -133
- package/esm2015/lib/menu/testing/menu.harness.js.map +0 -1
- package/esm2015/lib/menu/testing/menu.harness.metadata.json +0 -1
- package/esm2015/lib/menu/title.directive.js +0 -13
- package/esm2015/lib/menu/title.directive.js.map +0 -1
- package/esm2015/lib/menu/title.directive.metadata.json +0 -1
- package/esm2015/lib/radio-button/radio-button.component.js +0 -110
- package/esm2015/lib/radio-button/radio-button.component.js.map +0 -1
- package/esm2015/lib/radio-button/radio-button.component.metadata.json +0 -1
- package/esm2015/lib/radio-button/radio-button.module.js +0 -12
- package/esm2015/lib/radio-button/radio-button.module.js.map +0 -1
- package/esm2015/lib/radio-button/radio-button.module.metadata.json +0 -1
- package/esm2015/lib/radio-button/radio-group.component.js +0 -19
- package/esm2015/lib/radio-button/radio-group.component.js.map +0 -1
- package/esm2015/lib/radio-button/radio-group.component.metadata.json +0 -1
- package/esm2015/lib/table/cell/cell.js +0 -12
- package/esm2015/lib/table/cell/cell.js.map +0 -1
- package/esm2015/lib/table/cell/cell.metadata.json +0 -1
- package/esm2015/lib/table/cell/table-data-cell.component.js +0 -21
- package/esm2015/lib/table/cell/table-data-cell.component.js.map +0 -1
- package/esm2015/lib/table/cell/table-data-cell.component.metadata.json +0 -1
- package/esm2015/lib/table/cell/table-header-cell.component.js +0 -13
- package/esm2015/lib/table/cell/table-header-cell.component.js.map +0 -1
- package/esm2015/lib/table/cell/table-header-cell.component.metadata.json +0 -1
- package/esm2015/lib/table/column/table-column.directive.js +0 -16
- package/esm2015/lib/table/column/table-column.directive.js.map +0 -1
- package/esm2015/lib/table/column/table-column.directive.metadata.json +0 -1
- package/esm2015/lib/table/table-constants.library.js +0 -4
- package/esm2015/lib/table/table-constants.library.js.map +0 -1
- package/esm2015/lib/table/table-constants.library.metadata.json +0 -1
- package/esm2015/lib/table/table.component.js +0 -28
- package/esm2015/lib/table/table.component.js.map +0 -1
- package/esm2015/lib/table/table.component.metadata.json +0 -1
- package/esm2015/lib/table/table.module.js +0 -24
- package/esm2015/lib/table/table.module.js.map +0 -1
- package/esm2015/lib/table/table.module.metadata.json +0 -1
- package/esm2015/lib/toggle-switch/toggle-switch.component.js +0 -89
- package/esm2015/lib/toggle-switch/toggle-switch.component.js.map +0 -1
- package/esm2015/lib/toggle-switch/toggle-switch.component.metadata.json +0 -1
- package/esm2015/lib/toggle-switch/toggle-switch.module.js +0 -11
- package/esm2015/lib/toggle-switch/toggle-switch.module.js.map +0 -1
- package/esm2015/lib/toggle-switch/toggle-switch.module.metadata.json +0 -1
- package/fesm2015/ifsworld-granite-components.js +0 -2992
- package/fesm2015/ifsworld-granite-components.js.map +0 -1
- package/ifsworld-granite-components.metadata.json +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./lib/arrange-grid/arrange-grid.module"},{"from":"./lib/arrange-grid/arrange-grid.component"},{"from":"./lib/arrange-grid/arrange-grid-item.component"},{"from":"./lib/grid/grid.module"},{"from":"./lib/grid/grid.component"},{"from":"./lib/badge/badge.module"},{"from":"./lib/badge/badge.component"},{"from":"./lib/badge/testing/badge.harness"},{"from":"./lib/menu/menu.module"},{"from":"./lib/menu/menu.component"},{"from":"./lib/menu/menu-desktop-animations"},{"from":"./lib/menu/menu-touch-animations"},{"from":"./lib/menu/menu-item.component"},{"from":"./lib/menu/menu-trigger-for.directive"},{"from":"./lib/menu/testing/menu.harness"},{"from":"./lib/menu/divider.directive"},{"from":"./lib/menu/title.directive"},{"from":"./lib/menu/menu-touch-close.component"},{"from":"./lib/menu/menu-touch-title.component"},{"from":"./lib/icon/icon.module"},{"from":"./lib/icon/icon.component"},{"from":"./lib/toggle-switch/toggle-switch.module"},{"from":"./lib/toggle-switch/toggle-switch.component"},{"from":"./lib/radio-button/radio-button.module"},{"from":"./lib/radio-button/radio-button.component"},{"from":"./lib/radio-button/radio-group.component"},{"from":"./lib/checkbox/checkbox.module"},{"from":"./lib/checkbox/checkbox.component"},{"from":"./lib/checkbox/checkbox-group.component"},{"from":"./lib/button/button.module"},{"from":"./lib/button/button.component"},{"from":"./lib/table/table.module"},{"from":"./lib/table/table.component"},{"from":"./lib/table/column/table-column.directive"},{"from":"./lib/input-field/input-field.module"},{"from":"./lib/input-field/input-field.component"},{"from":"./lib/core/client-environment"},{"from":"./lib/core/core.module"},{"from":"./lib/core/devices/client-output-touch.directive"},{"from":"./lib/core/devices/client-output-desktop.directive"},{"from":"./lib/core/devices/client-input-touch.directive"},{"from":"./lib/core/devices/client-input-desktop.directive"},{"from":"./lib/core/common-behaviors/disabled"}]}]
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy, ElementRef } from '@angular/core';
|
|
2
|
-
export class GraniteArrangeGridItemComponent {
|
|
3
|
-
constructor(element) {
|
|
4
|
-
this.element = element;
|
|
5
|
-
/**
|
|
6
|
-
* Column span to render.
|
|
7
|
-
* For use in template only. Do not use outside of this component.
|
|
8
|
-
* @ignore
|
|
9
|
-
*/
|
|
10
|
-
this._columnSpan = null;
|
|
11
|
-
/* no-op */
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Number of cells the item would span. Used by arrange grid in column
|
|
15
|
-
* orientation to fill any unused space caused by wrapped items.
|
|
16
|
-
*/
|
|
17
|
-
set columnSpan(value) {
|
|
18
|
-
this._columnSpan = value;
|
|
19
|
-
this.updateStyles();
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Update element styles
|
|
23
|
-
*/
|
|
24
|
-
updateStyles() {
|
|
25
|
-
this.setCssProperty('--columnSpan', this._columnSpan ? this._columnSpan.toString() : null);
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Set CSS variable value or remove it if a null value is given.
|
|
29
|
-
* Would of course rather have used property binding but that is not
|
|
30
|
-
* supported until (perhaps) Angular 9.
|
|
31
|
-
* See: https://github.com/angular/angular/issues/9343
|
|
32
|
-
*/
|
|
33
|
-
setCssProperty(variable, value) {
|
|
34
|
-
this.element.nativeElement.style.setProperty(variable, value);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
GraniteArrangeGridItemComponent.decorators = [
|
|
38
|
-
{ type: Component, args: [{
|
|
39
|
-
selector: 'granite-arrange-grid-item',
|
|
40
|
-
template: '<ng-content></ng-content>',
|
|
41
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
42
|
-
styles: [":host{--columnSpan:$default-column-span;display:grid;grid-column:span var(--columnSpan,1)}"]
|
|
43
|
-
},] }
|
|
44
|
-
];
|
|
45
|
-
GraniteArrangeGridItemComponent.ctorParameters = () => [
|
|
46
|
-
{ type: ElementRef }
|
|
47
|
-
];
|
|
48
|
-
//# sourceMappingURL=arrange-grid-item.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"arrange-grid-item.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/arrange-grid/arrange-grid-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ/E,MAAM,OAAO,+BAA+B;IAiB1C,YAAoB,OAAgC;QAAhC,YAAO,GAAP,OAAO,CAAyB;QAPpD;;;;WAIG;QACH,gBAAW,GAAkB,IAAI,CAAC;QAGhC,WAAW;IACb,CAAC;IAlBD;;;OAGG;IACH,IAAI,UAAU,CAAC,KAAoB;QACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAaD;;OAEG;IACH,YAAY;QACV,IAAI,CAAC,cAAc,CACjB,cAAc,EACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CACtD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACO,cAAc,CAAC,QAAgB,EAAE,KAAoB;QAC7D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;;;YA7CF,SAAS,SAAC;gBACT,QAAQ,EAAE,2BAA2B;gBACrC,QAAQ,EAAE,2BAA2B;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;YAP4C,UAAU","sourcesContent":["import { Component, ChangeDetectionStrategy, ElementRef } from '@angular/core';\n\n@Component({\n selector: 'granite-arrange-grid-item',\n template: '<ng-content></ng-content>',\n styleUrls: ['arrange-grid-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteArrangeGridItemComponent {\n /**\n * Number of cells the item would span. Used by arrange grid in column\n * orientation to fill any unused space caused by wrapped items.\n */\n set columnSpan(value: number | null) {\n this._columnSpan = value;\n this.updateStyles();\n }\n\n /**\n * Column span to render.\n * For use in template only. Do not use outside of this component.\n * @ignore\n */\n _columnSpan: number | null = null;\n\n constructor(private element: ElementRef<HTMLElement>) {\n /* no-op */\n }\n\n /**\n * Update element styles\n */\n updateStyles(): void {\n this.setCssProperty(\n '--columnSpan',\n this._columnSpan ? this._columnSpan.toString() : null\n );\n }\n\n /**\n * Set CSS variable value or remove it if a null value is given.\n * Would of course rather have used property binding but that is not\n * supported until (perhaps) Angular 9.\n * See: https://github.com/angular/angular/issues/9343\n */\n protected setCssProperty(variable: string, value: string | null): void {\n this.element.nativeElement.style.setProperty(variable, value);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteArrangeGridItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"granite-arrange-grid-item","template":"<ng-content></ng-content>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":6,"character":19},"member":"OnPush"},"styles":[":host{--columnSpan:$default-column-span;display:grid;grid-column:span var(--columnSpan,1)}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":31,"arguments":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":42,"context":{"typeName":"HTMLElement"}}]}]}],"updateStyles":[{"__symbolic":"method"}],"setCssProperty":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, HostBinding, Input, QueryList, } from '@angular/core';
|
|
2
|
-
import { coerceNumberProperty } from '@angular/cdk/coercion';
|
|
3
|
-
import { Subject } from 'rxjs';
|
|
4
|
-
import { takeUntil } from 'rxjs/operators';
|
|
5
|
-
import { GraniteArrangeGridItemComponent } from './arrange-grid-item.component';
|
|
6
|
-
export var GraniteArrangeGridOrientation;
|
|
7
|
-
(function (GraniteArrangeGridOrientation) {
|
|
8
|
-
GraniteArrangeGridOrientation["columns"] = "columns";
|
|
9
|
-
GraniteArrangeGridOrientation["rows"] = "rows";
|
|
10
|
-
})(GraniteArrangeGridOrientation || (GraniteArrangeGridOrientation = {}));
|
|
11
|
-
export class GraniteArrangeGridComponent {
|
|
12
|
-
constructor(element) {
|
|
13
|
-
this.element = element;
|
|
14
|
-
/** How to present grid items; `columns` (default) or `rows` */
|
|
15
|
-
this.orientation = GraniteArrangeGridOrientation.columns;
|
|
16
|
-
/** Exposes column orientation to template */
|
|
17
|
-
this.classColumnOrientation = false;
|
|
18
|
-
/** Exposes row orientation to template */
|
|
19
|
-
this.classRowOrientation = false;
|
|
20
|
-
/** Number of columns to render */
|
|
21
|
-
this._cols = GraniteArrangeGridComponent.defaultCols;
|
|
22
|
-
/** Nexted on component destruction to complete other observables. */
|
|
23
|
-
this.destroy$ = new Subject();
|
|
24
|
-
/* no-op */
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Number of grid columns to use when orientation is set to `column`. The
|
|
28
|
-
* default is two columns.
|
|
29
|
-
*/
|
|
30
|
-
set cols(value) {
|
|
31
|
-
this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
|
|
32
|
-
}
|
|
33
|
-
get cols() {
|
|
34
|
-
return this._cols;
|
|
35
|
-
}
|
|
36
|
-
set rows(value) {
|
|
37
|
-
// Prevent pointless usage
|
|
38
|
-
throw Error('Explicitly setting rows value for arrange grid is unsupported');
|
|
39
|
-
}
|
|
40
|
-
get rows() {
|
|
41
|
-
return this._rows;
|
|
42
|
-
}
|
|
43
|
-
ngAfterContentInit() {
|
|
44
|
-
// Update style whenever grid item components change in content
|
|
45
|
-
this.arrangeGridItemComponents.changes
|
|
46
|
-
.pipe(takeUntil(this.destroy$))
|
|
47
|
-
.subscribe(() => this.updateStyles());
|
|
48
|
-
this.updateStyles();
|
|
49
|
-
}
|
|
50
|
-
ngOnChanges(changes) {
|
|
51
|
-
if ((changes.orientation && !changes.orientation.isFirstChange()) ||
|
|
52
|
-
(changes.cols && !changes.cols.isFirstChange())) {
|
|
53
|
-
this.updateStyles();
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
ngOnDestroy() {
|
|
57
|
-
this.destroy$.next();
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Update grid row template style.
|
|
61
|
-
*
|
|
62
|
-
* Use content height of all but last row and let the last grow
|
|
63
|
-
* to take up any remaining space.
|
|
64
|
-
*/
|
|
65
|
-
updateStyles() {
|
|
66
|
-
const children = (this.arrangeGridItemComponents || []).length;
|
|
67
|
-
if (this.orientation === GraniteArrangeGridOrientation.columns) {
|
|
68
|
-
// If too many items was placed into too few colums, there would
|
|
69
|
-
// be some wrapping. Take that into account when calculating the
|
|
70
|
-
// number of rows.
|
|
71
|
-
this._rows = Math.trunc((children - 1) / (this._cols || 1)) + 1;
|
|
72
|
-
this.classColumnOrientation = true;
|
|
73
|
-
this.classRowOrientation = false;
|
|
74
|
-
if (children > 0) {
|
|
75
|
-
// Fill any unused space caused by wrapped items by making the
|
|
76
|
-
// last item also span over remaining cells.
|
|
77
|
-
this.arrangeGridItemComponents.forEach((c) => (c.columnSpan = null));
|
|
78
|
-
this.arrangeGridItemComponents.last.columnSpan =
|
|
79
|
-
this._rows * this._cols - children + 1;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
this._cols = 1; // In row orientation, there is just a single column
|
|
84
|
-
this._rows = children;
|
|
85
|
-
this.classColumnOrientation = false;
|
|
86
|
-
this.classRowOrientation = true;
|
|
87
|
-
}
|
|
88
|
-
this.setCssProperty('--cols', this._cols.toString());
|
|
89
|
-
this.setCssProperty('--rows', this._rows.toString());
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* Set CSS variable value or remove it if a null value is given.
|
|
93
|
-
* Would of course rather have used property binding but that is not
|
|
94
|
-
* supported until (perhaps) Angular 9.
|
|
95
|
-
* See: https://github.com/angular/angular/issues/9343
|
|
96
|
-
*
|
|
97
|
-
* TODO: Replace with property binding with Angular 9 upgrade
|
|
98
|
-
*/
|
|
99
|
-
setCssProperty(variable, value) {
|
|
100
|
-
this.element.nativeElement.style.setProperty(variable, value);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
/** Default number of columns to use in column orientation */
|
|
104
|
-
GraniteArrangeGridComponent.defaultCols = 2;
|
|
105
|
-
GraniteArrangeGridComponent.decorators = [
|
|
106
|
-
{ type: Component, args: [{
|
|
107
|
-
selector: 'granite-arrange-grid',
|
|
108
|
-
template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n",
|
|
109
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
110
|
-
styles: ["@media only screen and (min-width:960px){:host{--cols:1;--rows:1;display:grid;grid-template-columns:repeat(var(--cols,1),1fr);-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),-webkit-max-content);grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}"]
|
|
111
|
-
},] }
|
|
112
|
-
];
|
|
113
|
-
GraniteArrangeGridComponent.ctorParameters = () => [
|
|
114
|
-
{ type: ElementRef }
|
|
115
|
-
];
|
|
116
|
-
GraniteArrangeGridComponent.propDecorators = {
|
|
117
|
-
orientation: [{ type: Input }],
|
|
118
|
-
classColumnOrientation: [{ type: HostBinding, args: ['class.column-orientation',] }],
|
|
119
|
-
classRowOrientation: [{ type: HostBinding, args: ['class.row-orientation',] }],
|
|
120
|
-
arrangeGridItemComponents: [{ type: ContentChildren, args: [GraniteArrangeGridItemComponent,] }],
|
|
121
|
-
cols: [{ type: Input }]
|
|
122
|
-
};
|
|
123
|
-
//# sourceMappingURL=arrange-grid.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"arrange-grid.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/arrange-grid/arrange-grid.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n OnDestroy,\n QueryList,\n SimpleChanges,\n} from '@angular/core';\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { GraniteArrangeGridItemComponent } from './arrange-grid-item.component';\n\nexport enum GraniteArrangeGridOrientation {\n columns = 'columns',\n rows = 'rows',\n}\n\n@Component({\n selector: 'granite-arrange-grid',\n templateUrl: 'arrange-grid.component.html',\n styleUrls: ['arrange-grid.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteArrangeGridComponent\n implements OnChanges, AfterContentInit, OnDestroy {\n /** Default number of columns to use in column orientation */\n static readonly defaultCols: number = 2;\n\n /** How to present grid items; `columns` (default) or `rows` */\n @Input()\n orientation: GraniteArrangeGridOrientation =\n GraniteArrangeGridOrientation.columns;\n\n /** Exposes column orientation to template */\n @HostBinding('class.column-orientation')\n classColumnOrientation = false;\n\n /** Exposes row orientation to template */\n @HostBinding('class.row-orientation')\n classRowOrientation = false;\n\n @ContentChildren(GraniteArrangeGridItemComponent)\n arrangeGridItemComponents: QueryList<GraniteArrangeGridItemComponent>;\n\n /**\n * Number of grid columns to use when orientation is set to `column`. The\n * default is two columns.\n */\n @Input()\n set cols(value: number) {\n this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));\n }\n\n get cols(): number {\n return this._cols;\n }\n\n /** Number of columns to render */\n protected _cols: number = GraniteArrangeGridComponent.defaultCols;\n\n /**\n * Number of rows to render. Will be set internally taking column count,\n * the number of items and any cell wrapping into consideration.\n */\n protected _rows: number;\n\n set rows(value: number) {\n // Prevent pointless usage\n throw Error(\n 'Explicitly setting rows value for arrange grid is unsupported'\n );\n }\n\n get rows(): number {\n return this._rows;\n }\n\n /** Nexted on component destruction to complete other observables. */\n private destroy$: Subject<void> = new Subject();\n\n constructor(private element: ElementRef<HTMLElement>) {\n /* no-op */\n }\n\n ngAfterContentInit(): void {\n // Update style whenever grid item components change in content\n this.arrangeGridItemComponents.changes\n .pipe(takeUntil(this.destroy$))\n .subscribe(() => this.updateStyles());\n\n this.updateStyles();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (\n (changes.orientation && !changes.orientation.isFirstChange()) ||\n (changes.cols && !changes.cols.isFirstChange())\n ) {\n this.updateStyles();\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n }\n\n /**\n * Update grid row template style.\n *\n * Use content height of all but last row and let the last grow\n * to take up any remaining space.\n */\n updateStyles(): void {\n const children: number = (this.arrangeGridItemComponents || []).length;\n\n if (this.orientation === GraniteArrangeGridOrientation.columns) {\n // If too many items was placed into too few colums, there would\n // be some wrapping. Take that into account when calculating the\n // number of rows.\n this._rows = Math.trunc((children - 1) / (this._cols || 1)) + 1;\n this.classColumnOrientation = true;\n this.classRowOrientation = false;\n\n if (children > 0) {\n // Fill any unused space caused by wrapped items by making the\n // last item also span over remaining cells.\n this.arrangeGridItemComponents.forEach((c) => (c.columnSpan = null));\n this.arrangeGridItemComponents.last.columnSpan =\n this._rows * this._cols - children + 1;\n }\n } else {\n this._cols = 1; // In row orientation, there is just a single column\n this._rows = children;\n this.classColumnOrientation = false;\n this.classRowOrientation = true;\n }\n\n this.setCssProperty('--cols', this._cols.toString());\n this.setCssProperty('--rows', this._rows.toString());\n }\n\n /**\n * Set CSS variable value or remove it if a null value is given.\n * Would of course rather have used property binding but that is not\n * supported until (perhaps) Angular 9.\n * See: https://github.com/angular/angular/issues/9343\n *\n * TODO: Replace with property binding with Angular 9 upgrade\n */\n protected setCssProperty(variable: string, value: string | null): void {\n this.element.nativeElement.style.setProperty(variable, value);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteArrangeGridOrientation":{"columns":"columns","rows":"rows"},"GraniteArrangeGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"granite-arrange-grid","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":30,"character":19},"member":"OnPush"},"template":"<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n","styles":["@media only screen and (min-width:960px){:host{--cols:1;--rows:1;display:grid;grid-template-columns:repeat(var(--cols,1),1fr);-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),-webkit-max-content);grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}"]}]}],"members":{"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"classColumnOrientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":43,"character":3},"arguments":["class.column-orientation"]}]}],"classRowOrientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":47,"character":3},"arguments":["class.row-orientation"]}]}],"arrangeGridItemComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":50,"character":3},"arguments":[{"__symbolic":"reference","module":"./arrange-grid-item.component","name":"GraniteArrangeGridItemComponent","line":50,"character":19}]}]}],"cols":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":89,"character":31,"arguments":[{"__symbolic":"error","message":"Could not resolve type","line":89,"character":42,"context":{"typeName":"HTMLElement"}}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateStyles":[{"__symbolic":"method"}],"setCssProperty":[{"__symbolic":"method"}]},"statics":{"defaultCols":2}}}}]
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { NgModule } from '@angular/core';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import { GraniteArrangeGridComponent } from './arrange-grid.component';
|
|
4
|
-
import { GraniteArrangeGridItemComponent } from './arrange-grid-item.component';
|
|
5
|
-
export class GraniteArrangeGridModule {
|
|
6
|
-
}
|
|
7
|
-
GraniteArrangeGridModule.decorators = [
|
|
8
|
-
{ type: NgModule, args: [{
|
|
9
|
-
declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
|
|
10
|
-
imports: [CommonModule],
|
|
11
|
-
exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
|
|
12
|
-
},] }
|
|
13
|
-
];
|
|
14
|
-
//# sourceMappingURL=arrange-grid.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"arrange-grid.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/arrange-grid/arrange-grid.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,+BAA+B,EAAE,MAAM,+BAA+B,CAAC;AAOhF,MAAM,OAAO,wBAAwB;;;YALpC,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,2BAA2B,EAAE,+BAA+B,CAAC;gBAC5E,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,2BAA2B,EAAE,+BAA+B,CAAC;aACxE","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { GraniteArrangeGridComponent } from './arrange-grid.component';\nimport { GraniteArrangeGridItemComponent } from './arrange-grid-item.component';\n\n@NgModule({\n declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],\n imports: [CommonModule],\n exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],\n})\nexport class GraniteArrangeGridModule {}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteArrangeGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./arrange-grid.component","name":"GraniteArrangeGridComponent","line":7,"character":17},{"__symbolic":"reference","module":"./arrange-grid-item.component","name":"GraniteArrangeGridItemComponent","line":7,"character":46}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","module":"./arrange-grid.component","name":"GraniteArrangeGridComponent","line":9,"character":12},{"__symbolic":"reference","module":"./arrange-grid-item.component","name":"GraniteArrangeGridItemComponent","line":9,"character":41}]}]}]}}}]
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, Input, ElementRef, } from '@angular/core';
|
|
2
|
-
import { setPropertyValue } from '../core/theme.library';
|
|
3
|
-
export class GraniteBadgeComponent {
|
|
4
|
-
constructor(elementRef) {
|
|
5
|
-
this.elementRef = elementRef;
|
|
6
|
-
/** Pill style badge */
|
|
7
|
-
this.pill = false;
|
|
8
|
-
}
|
|
9
|
-
ngOnChanges(changes) {
|
|
10
|
-
if (changes.backgroundColor) {
|
|
11
|
-
if (changes.backgroundColor.previousValue !==
|
|
12
|
-
changes.backgroundColor.currentValue) {
|
|
13
|
-
setPropertyValue('background-color', changes.backgroundColor.currentValue, this.elementRef.nativeElement);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
if (changes.color) {
|
|
17
|
-
if (changes.color.previousValue !== changes.color.currentValue) {
|
|
18
|
-
setPropertyValue('color', changes.color.currentValue, this.elementRef.nativeElement);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
GraniteBadgeComponent.decorators = [
|
|
24
|
-
{ type: Component, args: [{
|
|
25
|
-
selector: 'granite-badge',
|
|
26
|
-
exportAs: 'graniteBadge',
|
|
27
|
-
host: {
|
|
28
|
-
class: 'granite-badge',
|
|
29
|
-
'[class.granite-badge-pill]': 'pill',
|
|
30
|
-
},
|
|
31
|
-
template: '<ng-content></ng-content>',
|
|
32
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
33
|
-
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}"]
|
|
34
|
-
},] }
|
|
35
|
-
];
|
|
36
|
-
GraniteBadgeComponent.ctorParameters = () => [
|
|
37
|
-
{ type: ElementRef }
|
|
38
|
-
];
|
|
39
|
-
GraniteBadgeComponent.propDecorators = {
|
|
40
|
-
backgroundColor: [{ type: Input }],
|
|
41
|
-
color: [{ type: Input }],
|
|
42
|
-
pill: [{ type: Input }]
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=badge.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/badge/badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EAGL,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAazD,MAAM,OAAO,qBAAqB;IAiBhC,YAAoB,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;QAJ1C,uBAAuB;QAEvB,SAAI,GAAY,KAAK,CAAC;IAEuB,CAAC;IAE9C,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,eAAe,EAAE;YAC3B,IACE,OAAO,CAAC,eAAe,CAAC,aAAa;gBACrC,OAAO,CAAC,eAAe,CAAC,YAAY,EACpC;gBACA,gBAAgB,CACd,kBAAkB,EAClB,OAAO,CAAC,eAAe,CAAC,YAAY,EACpC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9B,CAAC;aACH;SACF;QACD,IAAI,OAAO,CAAC,KAAK,EAAE;YACjB,IAAI,OAAO,CAAC,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE;gBAC9D,gBAAgB,CACd,OAAO,EACP,OAAO,CAAC,KAAK,CAAC,YAAY,EAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9B,CAAC;aACH;SACF;IACH,CAAC;;;YApDF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,QAAQ,EAAE,cAAc;gBACxB,IAAI,EAAE;oBACJ,KAAK,EAAE,eAAe;oBACtB,4BAA4B,EAAE,MAAM;iBACrC;gBACD,QAAQ,EAAE,2BAA2B;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;YAdC,UAAU;;;8BAmBT,KAAK;oBAML,KAAK;mBAIL,KAAK","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnChanges,\n SimpleChanges,\n ElementRef,\n} from '@angular/core';\nimport { setPropertyValue } from '../core/theme.library';\n\n@Component({\n selector: 'granite-badge',\n exportAs: 'graniteBadge',\n host: {\n class: 'granite-badge',\n '[class.granite-badge-pill]': 'pill',\n },\n template: '<ng-content></ng-content>',\n styleUrls: ['./badge.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteBadgeComponent implements OnChanges {\n /**\n * Design token name to get the value for the Background color\n */\n @Input()\n backgroundColor: string;\n\n /**\n * Design token name to get the value for the Font color\n */\n @Input()\n color: string;\n\n /** Pill style badge */\n @Input()\n pill: boolean = false;\n\n constructor(private elementRef: ElementRef) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.backgroundColor) {\n if (\n changes.backgroundColor.previousValue !==\n changes.backgroundColor.currentValue\n ) {\n setPropertyValue(\n 'background-color',\n changes.backgroundColor.currentValue,\n this.elementRef.nativeElement\n );\n }\n }\n if (changes.color) {\n if (changes.color.previousValue !== changes.color.currentValue) {\n setPropertyValue(\n 'color',\n changes.color.currentValue,\n this.elementRef.nativeElement\n );\n }\n }\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteBadgeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"granite-badge","exportAs":"graniteBadge","host":{"class":"granite-badge","[class.granite-badge-pill]":"pill","$quoted$":["[class.granite-badge-pill]"]},"template":"<ng-content></ng-content>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"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}"]}]}],"members":{"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"pill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":38,"character":34}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { NgModule } from '@angular/core';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import { GraniteBadgeComponent } from './badge.component';
|
|
4
|
-
export class GraniteBadgeModule {
|
|
5
|
-
}
|
|
6
|
-
GraniteBadgeModule.decorators = [
|
|
7
|
-
{ type: NgModule, args: [{
|
|
8
|
-
declarations: [GraniteBadgeComponent],
|
|
9
|
-
imports: [CommonModule],
|
|
10
|
-
exports: [GraniteBadgeComponent],
|
|
11
|
-
},] }
|
|
12
|
-
];
|
|
13
|
-
//# sourceMappingURL=badge.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"badge.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/badge/badge.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAO1D,MAAM,OAAO,kBAAkB;;;YAL9B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;gBACrC,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;aACjC","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GraniteBadgeComponent } from './badge.component';\n\n@NgModule({\n declarations: [GraniteBadgeComponent],\n imports: [CommonModule],\n exports: [GraniteBadgeComponent],\n})\nexport class GraniteBadgeModule {}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteBadgeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./badge.component","name":"GraniteBadgeComponent","line":5,"character":17}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","module":"./badge.component","name":"GraniteBadgeComponent","line":7,"character":12}]}]}]}}}]
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { __awaiter } from "tslib";
|
|
2
|
-
import { ComponentHarness, HarnessPredicate, } from '@angular/cdk/testing';
|
|
3
|
-
export class GraniteBadgeHarness extends ComponentHarness {
|
|
4
|
-
/**
|
|
5
|
-
* Gets a `HarnessPredicate` that can be used to search for a `GraniteBadgeHarness` that meets
|
|
6
|
-
* certain criteria.
|
|
7
|
-
* @param options Options for filtering which badge instances are considered a match.
|
|
8
|
-
* @return a `HarnessPredicate` configured with the given options.
|
|
9
|
-
*/
|
|
10
|
-
static with(options = {}) {
|
|
11
|
-
const predicate = new HarnessPredicate(GraniteBadgeHarness, options);
|
|
12
|
-
predicate.addOption('text', options.text, (harness, label) => HarnessPredicate.stringMatches(harness.getText(), label));
|
|
13
|
-
predicate.addOption('pill', options.pill, (harness, pill) => __awaiter(this, void 0, void 0, function* () { return (yield harness.isPill()) === pill; }));
|
|
14
|
-
return predicate;
|
|
15
|
-
}
|
|
16
|
-
/** Gets the Badge text. */
|
|
17
|
-
getText() {
|
|
18
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
19
|
-
return (yield this.host()).text();
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
/** Whether it's a Pill type badge. */
|
|
23
|
-
isPill() {
|
|
24
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
25
|
-
return (yield this.host()).hasClass('granite-badge-pill');
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
GraniteBadgeHarness.hostSelector = 'granite-badge';
|
|
30
|
-
//# sourceMappingURL=badge.harness.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"badge.harness.js","sourceRoot":"","sources":["../../../../../../../libs/granite-components/src/lib/badge/testing/badge.harness.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,gBAAgB,EAEhB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,OAAO,mBAAoB,SAAQ,gBAAgB;IAGvD;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CACT,UAAsC,EAAE;QAExC,MAAM,SAAS,GAA0C,IAAI,gBAAgB,CAC3E,mBAAmB,EACnB,OAAO,CACR,CAAC;QACF,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAC3D,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CACzD,CAAC;QACF,SAAS,CAAC,SAAS,CACjB,MAAM,EACN,OAAO,CAAC,IAAI,EACZ,CAAO,OAAO,EAAE,IAAI,EAAE,EAAE,gDAAC,OAAA,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA,GAAA,CAC3D,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,2BAA2B;IACrB,OAAO;;YACX,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QACpC,CAAC;KAAA;IAED,sCAAsC;IAChC,MAAM;;YACV,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QAC5D,CAAC;KAAA;;AAlCM,gCAAY,GAAG,eAAe,CAAC","sourcesContent":["import {\n ComponentHarness,\n BaseHarnessFilters,\n HarnessPredicate,\n} from '@angular/cdk/testing';\n\nexport class GraniteBadgeHarness extends ComponentHarness {\n static hostSelector = 'granite-badge';\n\n /**\n * Gets a `HarnessPredicate` that can be used to search for a `GraniteBadgeHarness` that meets\n * certain criteria.\n * @param options Options for filtering which badge instances are considered a match.\n * @return a `HarnessPredicate` configured with the given options.\n */\n static with(\n options: GraniteBadgeHarnessFilters = {}\n ): HarnessPredicate<GraniteBadgeHarness> {\n const predicate: HarnessPredicate<GraniteBadgeHarness> = new HarnessPredicate(\n GraniteBadgeHarness,\n options\n );\n predicate.addOption('text', options.text, (harness, label) =>\n HarnessPredicate.stringMatches(harness.getText(), label)\n );\n predicate.addOption(\n 'pill',\n options.pill,\n async (harness, pill) => (await harness.isPill()) === pill\n );\n return predicate;\n }\n\n /** Gets the Badge text. */\n async getText(): Promise<string> {\n return (await this.host()).text();\n }\n\n /** Whether it's a Pill type badge. */\n async isPill(): Promise<boolean> {\n return (await this.host()).hasClass('granite-badge-pill');\n }\n}\n\n/** A set of criteria that can be used to filter a list of `GraniteBadgeHarness` instances. */\nexport interface GraniteBadgeHarnessFilters extends BaseHarnessFilters {\n /** Only find instances whose text matches the given value. */\n text?: string | RegExp;\n pill?: boolean;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteBadgeHarness":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/testing","name":"ComponentHarness","line":6,"character":41},"members":{"getText":[{"__symbolic":"method"}],"isPill":[{"__symbolic":"method"}]},"statics":{"hostSelector":"granite-badge"}},"GraniteBadgeHarnessFilters":{"__symbolic":"interface"}}}]
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
2
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
3
|
-
import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, } from '@angular/core';
|
|
4
|
-
import { disabledMixin } from '../core/common-behaviors/disabled';
|
|
5
|
-
export var ButtonSelectors;
|
|
6
|
-
(function (ButtonSelectors) {
|
|
7
|
-
ButtonSelectors["graniteButton"] = "granite-button";
|
|
8
|
-
ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
|
|
9
|
-
ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
|
|
10
|
-
ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
|
|
11
|
-
})(ButtonSelectors || (ButtonSelectors = {}));
|
|
12
|
-
const ButtonComponentMixin = disabledMixin();
|
|
13
|
-
export class GraniteButtonComponent extends ButtonComponentMixin {
|
|
14
|
-
constructor(_focusMonitor, _elementRef) {
|
|
15
|
-
super();
|
|
16
|
-
this._focusMonitor = _focusMonitor;
|
|
17
|
-
this._elementRef = _elementRef;
|
|
18
|
-
this.toggled = false;
|
|
19
|
-
this._buttonToggled = false;
|
|
20
|
-
for (const selector of Object.keys(ButtonSelectors)) {
|
|
21
|
-
if (this._getHostElement().hasAttribute(selector)) {
|
|
22
|
-
this._getHostElement().classList.add(ButtonSelectors[selector]);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
ngOnChanges(changes) {
|
|
27
|
-
super.ngOnChanges(changes);
|
|
28
|
-
if (changes.toggled &&
|
|
29
|
-
(this._getHostElement().classList.contains(ButtonSelectors.graniteFlatButton) ||
|
|
30
|
-
this._getHostElement().classList.contains(ButtonSelectors.graniteToolbarButton))) {
|
|
31
|
-
this._buttonToggled = coerceBooleanProperty(changes.toggled.currentValue);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
focus(origin = 'program', options) {
|
|
35
|
-
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
|
|
36
|
-
}
|
|
37
|
-
_getHostElement() {
|
|
38
|
-
return this._elementRef.nativeElement;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
GraniteButtonComponent.decorators = [
|
|
42
|
-
{ type: Component, args: [{
|
|
43
|
-
// eslint-disable-next-line @angular-eslint/component-selector
|
|
44
|
-
selector: `button[graniteButton],
|
|
45
|
-
button[granitePrimaryButton],
|
|
46
|
-
button[graniteFlatButton],
|
|
47
|
-
button[graniteToolbarButton]
|
|
48
|
-
`,
|
|
49
|
-
host: {
|
|
50
|
-
class: 'granite-button-base',
|
|
51
|
-
'[class.granite-button-disabled]': 'disabled',
|
|
52
|
-
'[class.granite-button-toggled]': '_buttonToggled',
|
|
53
|
-
'[attr.disabled]': 'disabled || null',
|
|
54
|
-
},
|
|
55
|
-
exportAs: 'graniteButton',
|
|
56
|
-
template: '<ng-content></ng-content>',
|
|
57
|
-
inputs: ['disabled'],
|
|
58
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
59
|
-
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);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){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}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;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
|
|
60
|
-
},] }
|
|
61
|
-
];
|
|
62
|
-
GraniteButtonComponent.ctorParameters = () => [
|
|
63
|
-
{ type: FocusMonitor },
|
|
64
|
-
{ type: ElementRef }
|
|
65
|
-
];
|
|
66
|
-
GraniteButtonComponent.propDecorators = {
|
|
67
|
-
toggled: [{ type: Input }]
|
|
68
|
-
};
|
|
69
|
-
export class GraniteAnchorComponent extends GraniteButtonComponent {
|
|
70
|
-
constructor(_focusMonitor, _elementRef) {
|
|
71
|
-
super(_focusMonitor, _elementRef);
|
|
72
|
-
this._focusMonitor = _focusMonitor;
|
|
73
|
-
this._elementRef = _elementRef;
|
|
74
|
-
}
|
|
75
|
-
_anchorClick(event) {
|
|
76
|
-
if (this.disabled) {
|
|
77
|
-
event.preventDefault();
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
ngOnChanges(changes) {
|
|
81
|
-
super.ngOnChanges(changes);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
GraniteAnchorComponent.decorators = [
|
|
85
|
-
{ type: Component, args: [{
|
|
86
|
-
// eslint-disable-next-line @angular-eslint/component-selector
|
|
87
|
-
selector: `a[graniteButton],
|
|
88
|
-
a[graniteFlatButton]`,
|
|
89
|
-
host: {
|
|
90
|
-
class: 'granite-button-base',
|
|
91
|
-
'[attr.tabindex]': 'disabled ? -1 : 0',
|
|
92
|
-
'[class.granite-button-disabled]': 'disabled',
|
|
93
|
-
},
|
|
94
|
-
exportAs: 'graniteAnchor',
|
|
95
|
-
template: '<ng-content></ng-content>',
|
|
96
|
-
inputs: ['disabled'],
|
|
97
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
98
|
-
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);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){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}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;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]
|
|
99
|
-
},] }
|
|
100
|
-
];
|
|
101
|
-
GraniteAnchorComponent.ctorParameters = () => [
|
|
102
|
-
{ type: FocusMonitor },
|
|
103
|
-
{ type: ElementRef }
|
|
104
|
-
];
|
|
105
|
-
GraniteAnchorComponent.propDecorators = {
|
|
106
|
-
_anchorClick: [{ type: HostListener, args: ['click', ['$event'],] }]
|
|
107
|
-
};
|
|
108
|
-
//# sourceMappingURL=button.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n Input,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\n\nimport { disabledMixin } from '../core/common-behaviors/disabled';\n\nexport enum ButtonSelectors {\n graniteButton = 'granite-button',\n granitePrimaryButton = 'granite-primary-button',\n graniteFlatButton = 'granite-flat-button',\n graniteToolbarButton = 'granite-toolbar-button',\n}\n\nconst ButtonComponentMixin = disabledMixin();\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: `button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n `,\n host: {\n class: 'granite-button-base',\n '[class.granite-button-disabled]': 'disabled',\n '[class.granite-button-toggled]': '_buttonToggled',\n '[attr.disabled]': 'disabled || null',\n },\n exportAs: 'graniteButton',\n template: '<ng-content></ng-content>',\n styleUrls: ['./button.component.scss'],\n inputs: ['disabled'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteButtonComponent\n extends ButtonComponentMixin\n implements OnChanges {\n @Input()\n toggled: boolean = false;\n\n _buttonToggled: boolean = false;\n\n constructor(\n protected _focusMonitor: FocusMonitor,\n protected _elementRef: ElementRef\n ) {\n super();\n\n for (const selector of Object.keys(ButtonSelectors)) {\n if (this._getHostElement().hasAttribute(selector)) {\n this._getHostElement().classList.add(ButtonSelectors[selector]);\n }\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n super.ngOnChanges(changes);\n\n if (\n changes.toggled &&\n (this._getHostElement().classList.contains(\n ButtonSelectors.graniteFlatButton\n ) ||\n this._getHostElement().classList.contains(\n ButtonSelectors.graniteToolbarButton\n ))\n ) {\n this._buttonToggled = coerceBooleanProperty(changes.toggled.currentValue);\n }\n }\n\n focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n this._focusMonitor.focusVia(this._getHostElement(), origin, options);\n }\n\n private _getHostElement(): HTMLButtonElement | HTMLAnchorElement {\n return this._elementRef.nativeElement;\n }\n}\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: `a[graniteButton],\n a[graniteFlatButton]`,\n host: {\n class: 'granite-button-base',\n '[attr.tabindex]': 'disabled ? -1 : 0',\n '[class.granite-button-disabled]': 'disabled',\n },\n exportAs: 'graniteAnchor',\n template: '<ng-content></ng-content>',\n styleUrls: ['./button.component.scss'],\n inputs: ['disabled'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteAnchorComponent\n extends GraniteButtonComponent\n implements OnChanges {\n constructor(\n protected _focusMonitor: FocusMonitor,\n protected _elementRef: ElementRef\n ) {\n super(_focusMonitor, _elementRef);\n }\n\n @HostListener('click', ['$event'])\n _anchorClick(event: Event): void {\n if (this.disabled) {\n event.preventDefault();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n super.ngOnChanges(changes);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"ButtonSelectors":{"graniteButton":"granite-button","granitePrimaryButton":"granite-primary-button","graniteFlatButton":"granite-flat-button","graniteToolbarButton":"granite-toolbar-button"},"GraniteButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Symbol reference expected","line":43,"character":10},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ","host":{"class":"granite-button-base","[class.granite-button-disabled]":"disabled","[class.granite-button-toggled]":"_buttonToggled","[attr.disabled]":"disabled || null","$quoted$":["[class.granite-button-disabled]","[class.granite-button-toggled]","[attr.disabled]"]},"exportAs":"graniteButton","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":19},"member":"OnPush"},"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);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){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}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;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]}]}],"members":{"toggled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":51,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":27}]}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_getHostElement":[{"__symbolic":"method"}]}},"GraniteAnchorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"GraniteButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":88,"character":1},"arguments":[{"selector":"a[graniteButton],\n a[graniteFlatButton]","host":{"class":"granite-button-base","[attr.tabindex]":"disabled ? -1 : 0","[class.granite-button-disabled]":"disabled","$quoted$":["[attr.tabindex]","[class.granite-button-disabled]"]},"exportAs":"graniteAnchor","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":101,"character":19},"member":"OnPush"},"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);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){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}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);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}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;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":51,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":27}]}],"_anchorClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":113,"character":3},"arguments":["click",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { NgModule } from '@angular/core';
|
|
2
|
-
import { GraniteAnchorComponent, GraniteButtonComponent, } from './button.component';
|
|
3
|
-
export class GraniteButtonModule {
|
|
4
|
-
}
|
|
5
|
-
GraniteButtonModule.decorators = [
|
|
6
|
-
{ type: NgModule, args: [{
|
|
7
|
-
declarations: [GraniteButtonComponent, GraniteAnchorComponent],
|
|
8
|
-
exports: [GraniteButtonComponent, GraniteAnchorComponent],
|
|
9
|
-
},] }
|
|
10
|
-
];
|
|
11
|
-
//# sourceMappingURL=button.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/button/button.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAM5B,MAAM,OAAO,mBAAmB;;;YAJ/B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;gBAC9D,OAAO,EAAE,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;aAC1D","sourcesContent":["import { NgModule } from '@angular/core';\nimport {\n GraniteAnchorComponent,\n GraniteButtonComponent,\n} from './button.component';\n\n@NgModule({\n declarations: [GraniteButtonComponent, GraniteAnchorComponent],\n exports: [GraniteButtonComponent, GraniteAnchorComponent],\n})\nexport class GraniteButtonModule {}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./button.component","name":"GraniteButtonComponent","line":7,"character":17},{"__symbolic":"reference","module":"./button.component","name":"GraniteAnchorComponent","line":7,"character":41}],"exports":[{"__symbolic":"reference","module":"./button.component","name":"GraniteButtonComponent","line":8,"character":12},{"__symbolic":"reference","module":"./button.component","name":"GraniteAnchorComponent","line":8,"character":36}]}]}]}}}]
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { GraniteRadioCheckboxBase } from '../core/radio-checkbox-base';
|
|
3
|
-
export class GraniteCheckboxGroupComponent extends GraniteRadioCheckboxBase {
|
|
4
|
-
}
|
|
5
|
-
GraniteCheckboxGroupComponent.decorators = [
|
|
6
|
-
{ type: Component, args: [{
|
|
7
|
-
selector: 'granite-checkbox-group',
|
|
8
|
-
host: {
|
|
9
|
-
class: 'granite-checkbox-group',
|
|
10
|
-
'[attr.role]': '"group"',
|
|
11
|
-
'[attr.aria-labelledby]': 'ariaLabelledby',
|
|
12
|
-
'[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
|
|
13
|
-
},
|
|
14
|
-
template: "<ng-content></ng-content>\n",
|
|
15
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
16
|
-
styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
|
|
17
|
-
},] }
|
|
18
|
-
];
|
|
19
|
-
//# sourceMappingURL=checkbox-group.component.js.map
|