@skyux/ag-grid 8.0.0-alpha.1 → 8.0.0-alpha.2

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.
@@ -7014,292 +7014,6 @@ button.ag-side-button-button:focus {
7014
7014
  text-align: center;
7015
7015
  }
7016
7016
 
7017
- .ag-input-field-input {
7018
- width: 100%;
7019
- min-width: 0;
7020
- }
7021
-
7022
- .ag-checkbox-input-wrapper {
7023
- font-family: var(--ag-icon-font-family);
7024
- font-size: var(--ag-icon-size);
7025
- line-height: var(--ag-icon-size);
7026
- font-style: normal;
7027
- font-weight: normal;
7028
- font-variant: normal;
7029
- text-transform: none;
7030
- -webkit-font-smoothing: antialiased;
7031
- -moz-osx-font-smoothing: grayscale;
7032
- width: var(--ag-icon-size);
7033
- height: var(--ag-icon-size);
7034
- background-color: var(--ag-checkbox-background-color);
7035
- border-radius: var(--ag-checkbox-border-radius);
7036
- display: inline-block;
7037
- vertical-align: middle;
7038
- flex: none;
7039
- }
7040
-
7041
- .ag-checkbox-input-wrapper input, .ag-checkbox-input-wrapper input {
7042
- -webkit-appearance: none;
7043
- opacity: 0;
7044
- width: 100%;
7045
- height: 100%;
7046
- }
7047
-
7048
- .ag-checkbox-input-wrapper:focus-within, .ag-checkbox-input-wrapper:active {
7049
- outline: none;
7050
- box-shadow: var(--ag-input-focus-box-shadow);
7051
- }
7052
-
7053
- .ag-checkbox-input-wrapper.ag-disabled {
7054
- opacity: 0.5;
7055
- }
7056
-
7057
- .ag-checkbox-input-wrapper::after {
7058
- content: var(--ag-icon-font-code-checkbox-unchecked, "\f108");
7059
- color: var(--ag-checkbox-unchecked-color);
7060
- position: absolute;
7061
- top: 0;
7062
- left: 0;
7063
- pointer-events: none;
7064
- }
7065
-
7066
- .ag-checkbox-input-wrapper.ag-checked::after {
7067
- content: var(--ag-icon-font-code-checkbox-checked, "\f106");
7068
- color: var(--ag-checkbox-checked-color);
7069
- position: absolute;
7070
- top: 0;
7071
- left: 0;
7072
- pointer-events: none;
7073
- }
7074
-
7075
- .ag-checkbox-input-wrapper.ag-indeterminate::after {
7076
- content: var(--ag-icon-font-code-checkbox-indeterminate, "\f107");
7077
- color: var(--ag-checkbox-indeterminate-color);
7078
- position: absolute;
7079
- top: 0;
7080
- left: 0;
7081
- pointer-events: none;
7082
- }
7083
-
7084
- .ag-toggle-button-input-wrapper {
7085
- box-sizing: border-box;
7086
- width: var(--ag-toggle-button-width);
7087
- height: var(--ag-toggle-button-height);
7088
- background-color: var(--ag-toggle-button-off-background-color);
7089
- border-radius: calc(var(--ag-toggle-button-height) * 0.5);
7090
- position: relative;
7091
- flex: none;
7092
- border: var(--ag-toggle-button-border-width) solid;
7093
- border-color: var(--ag-toggle-button-off-border-color);
7094
- }
7095
-
7096
- .ag-toggle-button-input-wrapper input {
7097
- opacity: 0;
7098
- height: 100%;
7099
- width: 100%;
7100
- }
7101
-
7102
- .ag-toggle-button-input-wrapper:focus-within {
7103
- outline: none;
7104
- box-shadow: var(--ag-input-focus-box-shadow);
7105
- }
7106
-
7107
- .ag-toggle-button-input-wrapper.ag-disabled {
7108
- opacity: 0.5;
7109
- }
7110
-
7111
- .ag-toggle-button-input-wrapper.ag-checked {
7112
- background-color: var(--ag-toggle-button-on-background-color);
7113
- border-color: var(--ag-toggle-button-on-border-color);
7114
- }
7115
-
7116
- .ag-toggle-button-input-wrapper::before {
7117
- content: " ";
7118
- position: absolute;
7119
- top: calc(0px - var(--ag-toggle-button-border-width));
7120
- left: calc(0px - var(--ag-toggle-button-border-width));
7121
- display: block;
7122
- box-sizing: border-box;
7123
- height: var(--ag-toggle-button-height);
7124
- width: var(--ag-toggle-button-height);
7125
- background-color: var(--ag-toggle-button-switch-background-color);
7126
- border-radius: 100%;
7127
- transition: left 100ms;
7128
- border: var(--ag-toggle-button-border-width) solid;
7129
- border-color: var(--ag-toggle-button-switch-border-color);
7130
- }
7131
-
7132
- .ag-toggle-button-input-wrapper.ag-checked::before {
7133
- left: calc(100% - var(--ag-toggle-button-height));
7134
- border-color: var(--ag-toggle-button-on-border-color);
7135
- }
7136
-
7137
- .ag-radio-button-input-wrapper {
7138
- font-family: var(--ag-icon-font-family);
7139
- font-size: var(--ag-icon-size);
7140
- line-height: var(--ag-icon-size);
7141
- font-style: normal;
7142
- font-weight: normal;
7143
- font-variant: normal;
7144
- text-transform: none;
7145
- -webkit-font-smoothing: antialiased;
7146
- -moz-osx-font-smoothing: grayscale;
7147
- width: var(--ag-icon-size);
7148
- height: var(--ag-icon-size);
7149
- background-color: var(--ag-checkbox-background-color);
7150
- border-radius: var(--ag-checkbox-border-radius);
7151
- display: inline-block;
7152
- vertical-align: middle;
7153
- flex: none;
7154
- border-radius: var(--ag-icon-size);
7155
- }
7156
-
7157
- .ag-radio-button-input-wrapper input, .ag-radio-button-input-wrapper input {
7158
- -webkit-appearance: none;
7159
- opacity: 0;
7160
- width: 100%;
7161
- height: 100%;
7162
- }
7163
-
7164
- .ag-radio-button-input-wrapper:focus-within, .ag-radio-button-input-wrapper:active {
7165
- outline: none;
7166
- box-shadow: var(--ag-input-focus-box-shadow);
7167
- }
7168
-
7169
- .ag-radio-button-input-wrapper.ag-disabled {
7170
- opacity: 0.5;
7171
- }
7172
-
7173
- .ag-radio-button-input-wrapper::after {
7174
- content: var(--ag-icon-font-code-radio-button-off, "\f126");
7175
- color: var(--ag-checkbox-unchecked-color);
7176
- position: absolute;
7177
- top: 0;
7178
- left: 0;
7179
- pointer-events: none;
7180
- }
7181
-
7182
- .ag-radio-button-input-wrapper.ag-checked::after {
7183
- content: var(--ag-icon-font-code-radio-button-on, "\f127");
7184
- color: var(--ag-checkbox-checked-color);
7185
- position: absolute;
7186
- top: 0;
7187
- left: 0;
7188
- pointer-events: none;
7189
- }
7190
-
7191
- input[class^=ag-][type=range] {
7192
- -webkit-appearance: none;
7193
- width: 100%;
7194
- height: 100%;
7195
- background: none;
7196
- overflow: visible;
7197
- }
7198
-
7199
- input[class^=ag-][type=range]::-webkit-slider-runnable-track {
7200
- margin: 0;
7201
- padding: 0;
7202
- width: 100%;
7203
- height: 3px;
7204
- background-color: var(--ag-border-color);
7205
- border-radius: var(--ag-border-radius);
7206
- border-radius: var(--ag-checkbox-border-radius);
7207
- }
7208
-
7209
- input[class^=ag-][type=range]::-moz-range-track {
7210
- margin: 0;
7211
- padding: 0;
7212
- width: 100%;
7213
- height: 3px;
7214
- background-color: var(--ag-border-color);
7215
- border-radius: var(--ag-border-radius);
7216
- border-radius: var(--ag-checkbox-border-radius);
7217
- }
7218
-
7219
- input[class^=ag-][type=range]::-ms-track {
7220
- margin: 0;
7221
- padding: 0;
7222
- width: 100%;
7223
- height: 3px;
7224
- background-color: var(--ag-border-color);
7225
- border-radius: var(--ag-border-radius);
7226
- border-radius: var(--ag-checkbox-border-radius);
7227
- color: transparent;
7228
- width: calc(100% - 2px);
7229
- }
7230
-
7231
- input[class^=ag-][type=range]::-webkit-slider-thumb {
7232
- margin: 0;
7233
- padding: 0;
7234
- -webkit-appearance: none;
7235
- width: var(--ag-icon-size);
7236
- height: var(--ag-icon-size);
7237
- background-color: var(--ag-background-color);
7238
- border: 1px solid;
7239
- border-color: var(--ag-checkbox-unchecked-color);
7240
- border-radius: var(--ag-icon-size);
7241
- transform: translateY(calc(var(--ag-icon-size) * -0.5 + 1.5px));
7242
- }
7243
-
7244
- input[class^=ag-][type=range]::-ms-thumb {
7245
- margin: 0;
7246
- padding: 0;
7247
- -webkit-appearance: none;
7248
- width: var(--ag-icon-size);
7249
- height: var(--ag-icon-size);
7250
- background-color: var(--ag-background-color);
7251
- border: 1px solid;
7252
- border-color: var(--ag-checkbox-unchecked-color);
7253
- border-radius: var(--ag-icon-size);
7254
- }
7255
-
7256
- input[class^=ag-][type=range]::-moz-ag-range-thumb {
7257
- margin: 0;
7258
- padding: 0;
7259
- -webkit-appearance: none;
7260
- width: var(--ag-icon-size);
7261
- height: var(--ag-icon-size);
7262
- background-color: var(--ag-background-color);
7263
- border: 1px solid;
7264
- border-color: var(--ag-checkbox-unchecked-color);
7265
- border-radius: var(--ag-icon-size);
7266
- }
7267
-
7268
- input[class^=ag-][type=range]:focus {
7269
- outline: none;
7270
- }
7271
-
7272
- input[class^=ag-][type=range]:focus::-webkit-slider-thumb {
7273
- box-shadow: var(--ag-input-focus-box-shadow);
7274
- border-color: var(--ag-checkbox-checked-color);
7275
- }
7276
-
7277
- input[class^=ag-][type=range]:focus::-ms-thumb {
7278
- box-shadow: var(--ag-input-focus-box-shadow);
7279
- border-color: var(--ag-checkbox-checked-color);
7280
- }
7281
-
7282
- input[class^=ag-][type=range]:focus::-moz-ag-range-thumb {
7283
- box-shadow: var(--ag-input-focus-box-shadow);
7284
- border-color: var(--ag-checkbox-checked-color);
7285
- }
7286
-
7287
- input[class^=ag-][type=range]:active::-webkit-slider-runnable-track {
7288
- background-color: var(--ag-input-focus-border-color);
7289
- }
7290
-
7291
- input[class^=ag-][type=range]:active::-moz-ag-range-track {
7292
- background-color: var(--ag-input-focus-border-color);
7293
- }
7294
-
7295
- input[class^=ag-][type=range]:active::-ms-track {
7296
- background-color: var(--ag-input-focus-border-color);
7297
- }
7298
-
7299
- input[class^=ag-][type=range]:disabled {
7300
- opacity: 0.5;
7301
- }
7302
-
7303
7017
  .ag-theme-alpine, .ag-theme-alpine-dark, .ag-theme-sky-modern-dark {
7304
7018
  --ag-alpine-active-color: #2196f3;
7305
7019
  --ag-selected-row-background-color: rgba(33, 150, 243, 0.3);
@@ -7943,6 +7657,20 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
7943
7657
  font-weight: normal;
7944
7658
  }
7945
7659
 
7660
+ sky-ag-grid-wrapper.sky-ag-grid-layout-normal {
7661
+ width: 100%;
7662
+ height: 100%;
7663
+ display: flex;
7664
+ }
7665
+ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid {
7666
+ flex: 1;
7667
+ overflow: hidden;
7668
+ }
7669
+ sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
7670
+ width: 100%;
7671
+ height: 100%;
7672
+ }
7673
+
7946
7674
  .ag-theme-sky-default ag-grid-angular:not(.sky-ag-grid-editable) {
7947
7675
  border-top: 1px solid var(--sky-border-color-neutral-medium);
7948
7676
  }