@gloww/gloww 20.0.0-beta.7 → 20.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/gloww.theme.scss +186 -41
  2. package/package.json +4 -8
package/gloww.theme.scss CHANGED
@@ -1,45 +1,190 @@
1
1
  @use 'sass:map';
2
2
  @use '@angular/material' as mat;
3
- @use 'Components/menu-list-item/menu-list-item.component' as menu-list-item;
4
- @use 'Components/code-editor/code-editor.component' as code-editor;
5
- @use 'Components/auto-complete/auto-complete.component' as auto-complete;
3
+
4
+ .CodeMirror {
5
+ resize: both;
6
+ padding: 0;
7
+ margin: 0;
8
+ }
9
+
10
+ .sameSize {
11
+ padding: 0;
12
+ margin: 0;
13
+ border: 1px solid;
14
+ }
15
+
16
+ @mixin code-editor-component-theme($theme) {
17
+ $warn-color: mat.get-theme-color($theme, warn);
18
+
19
+ gloww-code-editor.ng-invalid .mainDiv {
20
+ border: 1px solid $warn-color;
21
+ }
22
+ }
23
+
24
+ .mainDiv {
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: stretch;
28
+ width: 100%;
29
+ height: 100%;
30
+ min-height: 100%;
31
+ }
32
+
33
+ .snippet-header {
34
+ display: flex;
35
+ flex-direction: row;
36
+ align-items: center;
37
+ gap: 8px;
38
+ width: 100%;
39
+ }
40
+
41
+ .snippet-select {
42
+ flex: 1 1 auto;
43
+ }
44
+
45
+ .editor-full-width {
46
+ width: 100%;
47
+ }
48
+
49
+ @mixin menu-list-item-component-theme($theme) {
50
+ $color-map: map.get($theme, color);
51
+ $primary-palette: map.get($color-map, primary);
52
+ $primary-color: map.get($primary-palette, default);
53
+ $active-bg: map.get($primary-palette, 50);
54
+ $hover-bg: map.get($primary-palette, 100);
55
+
56
+ mat-nav-list mat-icon i {
57
+ color: $primary-color;
58
+ }
59
+
60
+ .thisMenu {
61
+ .menu-list-item.active {
62
+ background-color: $active-bg;
63
+ color: $primary-color;
64
+ }
65
+
66
+ &:hover,
67
+ &:focus {
68
+ .menu-list-item:not(.expanded) {
69
+ background-color: $hover-bg !important;
70
+ }
71
+ }
72
+ }
73
+ }
74
+
75
+ .thisMenu {
76
+ display: flex;
77
+ flex-direction: row;
78
+ align-items: center;
79
+ outline: none;
80
+ width: calc(100% - 20px);
81
+ margin: 10px;
82
+ cursor: pointer;
83
+ }
84
+
85
+ .menu-list-item {
86
+ display: flex;
87
+ align-items: center;
88
+ flex: 1;
89
+ padding: 8px 0;
90
+ text-decoration: none;
91
+ color: inherit;
92
+ min-width: 0;
93
+
94
+ .routeIcon {
95
+ margin-right: 20px;
96
+ flex-shrink: 0;
97
+ }
98
+
99
+ .menu-label {
100
+ white-space: nowrap;
101
+ overflow: hidden;
102
+ text-overflow: ellipsis;
103
+ }
104
+ }
105
+
106
+ .expand-container {
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ flex-shrink: 0;
111
+ }
112
+
113
+ mat-icon {
114
+ height: 32px;
115
+ width: 40px;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ }
120
+
121
+ .expandIcon {
122
+ cursor: pointer;
123
+ }
124
+
125
+ :disabled,
126
+ .disabled {
127
+ color: lightgrey !important;
128
+ pointer-events: none;
129
+
130
+ mat-icon i {
131
+ color: lightgrey !important;
132
+ }
133
+ }
134
+
135
+ @mixin auto-complete-component-theme($theme) {
136
+ $warn-color: mat.get-theme-color($theme, warn);
137
+
138
+ gloww-auto-complete.ng-invalid .autocff .mat-form-field-underline {
139
+ background-color: $warn-color;
140
+ }
141
+
142
+ gloww-auto-complete.ng-invalid .autocff .mat-form-field-label {
143
+ color: $warn-color;
144
+ }
145
+ }
146
+
6
147
  @mixin gloww-lib-theme($theme) {
7
- @include code-editor.code-editor-component-theme($theme);
8
- @include menu-list-item.menu-list-item-component-theme($theme);
9
- @include auto-complete.auto-complete-component-theme($theme);
10
- html,
11
- body {
12
- height: 100%;
13
- }
14
- body {
15
- margin: 0;
16
- font-family: Roboto, "Helvetica Neue", sans-serif;
17
- }
18
- .cdk-overlay-pane {
19
- width: unset !important;
20
- height: unset !important;
21
- max-width: 100% !important;
22
- max-height: 90% !important;
23
- }
24
- .mat-mdc-dialog-container {
25
- max-width: 100%;
26
- max-height: 90% !important;
27
- //height: unset !important;
28
- resize: both;
29
- }
30
- .dlg {
31
- display: flex;
32
- flex-direction: column;
33
- height: 100%;
34
- }
35
- /*TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version.*/
36
- mat-dialog-content {
37
- flex-grow: 1;
38
- max-height: 80vh !important;
39
- /*max-height: unset !important;*/
40
- }
41
- td.mat-mdc-cell {
42
- padding-right: 10px !important;
43
- padding-left: 10px !important;
44
- }
148
+ @include code-editor-component-theme($theme);
149
+ @include menu-list-item-component-theme($theme);
150
+ @include auto-complete-component-theme($theme);
151
+
152
+ html,
153
+ body {
154
+ height: 100%;
155
+ }
156
+
157
+ body {
158
+ margin: 0;
159
+ font-family: Roboto, 'Helvetica Neue', sans-serif;
160
+ }
161
+
162
+ .cdk-overlay-pane {
163
+ width: unset !important;
164
+ height: unset !important;
165
+ max-width: 100% !important;
166
+ max-height: 90% !important;
167
+ }
168
+
169
+ .mat-mdc-dialog-container {
170
+ max-width: 100%;
171
+ max-height: 90% !important;
172
+ resize: both;
173
+ }
174
+
175
+ .dlg {
176
+ display: flex;
177
+ flex-direction: column;
178
+ height: 100%;
179
+ }
180
+
181
+ mat-dialog-content {
182
+ flex-grow: 1;
183
+ max-height: 80vh !important;
184
+ }
185
+
186
+ td.mat-mdc-cell {
187
+ padding-right: 10px !important;
188
+ padding-left: 10px !important;
189
+ }
45
190
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gloww/gloww",
3
- "version": "20.0.0-beta.7",
3
+ "version": "20.0.0-beta.8",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.0.0",
6
6
  "@angular/core": "^20.0.0",
@@ -10,13 +10,9 @@
10
10
  },
11
11
  "exports": {
12
12
  ".": {
13
- "default": "./fesm2022/gloww-gloww.mjs",
14
- "types": "./index.d.ts"
13
+ "default": "./fesm2022/gloww.mjs"
15
14
  },
16
- "./gloww.theme": "./gloww.theme.scss",
17
- "./package.json": {
18
- "default": "./package.json"
19
- }
15
+ "./gloww.theme": "./gloww.theme.scss"
20
16
  },
21
17
  "dependencies": {
22
18
  "tslib": "^2.8.0"
@@ -24,4 +20,4 @@
24
20
  "sideEffects": false,
25
21
  "module": "fesm2022/gloww-gloww.mjs",
26
22
  "typings": "index.d.ts"
27
- }
23
+ }