@propbinder/mobile-design 0.3.43 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +63 -63
  2. package/assets/fonts/brockmann-medium-webfont.woff2 +0 -0
  3. package/assets/fonts/brockmann-mediumitalic-webfont.woff2 +0 -0
  4. package/assets/fonts/brockmann-regular-webfont.woff2 +0 -0
  5. package/assets/fonts/brockmann-regularitalic-webfont.woff2 +0 -0
  6. package/assets/fonts/brockmann-semibold-webfont.woff2 +0 -0
  7. package/assets/fonts/brockmann-semibolditalic-webfont.woff2 +0 -0
  8. package/fesm2022/{propbinder-mobile-design-ds-mobile-days-sheet-CExYUoSe.mjs → propbinder-mobile-design-ds-mobile-days-sheet-Bf7hxhB6.mjs} +53 -53
  9. package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-Bf7hxhB6.mjs.map +1 -0
  10. package/fesm2022/{propbinder-mobile-design-ds-mobile-duration-sheet-CjoEvphw.mjs → propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs} +175 -175
  11. package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-BHTlCfU7.mjs.map +1 -0
  12. package/fesm2022/{propbinder-mobile-design-ds-mobile-time-sheet-BEO6vuN0.mjs → propbinder-mobile-design-ds-mobile-time-sheet-CrUB7zl-.mjs} +71 -71
  13. package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-CrUB7zl-.mjs.map +1 -0
  14. package/fesm2022/propbinder-mobile-design.mjs +15478 -15199
  15. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  16. package/index.d.ts +144 -42
  17. package/package.json +1 -1
  18. package/styles/ionic.css +989 -989
  19. package/styles/mobile-common.css +155 -155
  20. package/styles/mobile-page-base.css +338 -338
  21. package/fesm2022/propbinder-mobile-design-ds-mobile-days-sheet-CExYUoSe.mjs.map +0 -1
  22. package/fesm2022/propbinder-mobile-design-ds-mobile-duration-sheet-CjoEvphw.mjs.map +0 -1
  23. package/fesm2022/propbinder-mobile-design-ds-mobile-time-sheet-BEO6vuN0.mjs.map +0 -1
package/styles/mobile-common.css CHANGED
@@ -1,155 +1,155 @@
1
- /**
2
- * Mobile Common Styles
3
- * Shared CSS classes used across multiple mobile components
4
- *
5
- * USAGE IN DOWNSTREAM APPS:
6
- * Import via styleUrls in your component:
7
- *
8
- * @Component({
9
- * styleUrls: [
10
- * '@propbinder/mobile-design/styles/mobile-common.css',
11
- * './your-component.scss'
12
- * ],
13
- * })
14
- *
15
- * Or import in angular.json styles array for global availability:
16
- *
17
- * "styles": [
18
- * "@propbinder/mobile-design/styles/mobile-common.css",
19
- * "src/styles.scss"
20
- * ]
21
- */
22
-
23
- /* Author Details Container */
24
- .author-details {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 2px;
28
- min-width: 0;
29
- flex: 1;
30
- }
31
-
32
- /* Author Name */
33
- .author-name {
34
- font-family: 'Brockmann', sans-serif;
35
- font-size: var(--font-size-sm);
36
- font-weight: 600;
37
- line-height: 20px;
38
- letter-spacing: -0.3px;
39
- color: var(--color-text-primary, #1a1a1a);
40
- white-space: nowrap;
41
- overflow: hidden;
42
- text-overflow: ellipsis;
43
- }
44
-
45
- /* Author Meta (role, timestamp, etc.) */
46
- .author-meta {
47
- font-family: 'Brockmann', sans-serif;
48
- font-size: var(--font-size-xs);
49
- font-weight: 400;
50
- line-height: 1.2;
51
- letter-spacing: -0.26px;
52
- color: var(--color-text-tertiary, #737373);
53
- display: flex;
54
- align-items: center;
55
- gap: 6px;
56
- }
57
-
58
- .author-meta .separator {
59
- color: var(--color-text-tertiary, #a0a0a0);
60
- }
61
-
62
- /* Variants for lightbox/overlay contexts (white text on dark bg) */
63
- .lightbox-context .author-name,
64
- .overlay-context .author-name {
65
- color: rgba(255, 255, 255, 0.95);
66
- }
67
-
68
- .lightbox-context .author-meta,
69
- .overlay-context .author-meta {
70
- color: rgba(255, 255, 255, 0.7);
71
- }
72
-
73
- .lightbox-context .author-meta .separator,
74
- .overlay-context .author-meta .separator {
75
- color: rgba(255, 255, 255, 0.5);
76
- }
77
-
78
- /* Section Headlines */
79
- .section-headline {
80
- font-size: var(--font-size-base);
81
- font-weight: 600;
82
- color: var(--text-color-default-primary);
83
- padding: 16px 0;
84
- margin: 0;
85
- letter-spacing: -0.2px;
86
- display: flex;
87
- align-items: center;
88
- gap: 6px;
89
- }
90
-
91
- /* Empty State Text */
92
- .empty-state-title {
93
- font-family: 'Brockmann', sans-serif;
94
- font-size: var(--font-size-base);
95
- font-weight: 600;
96
- line-height: 1.3;
97
- color: var(--text-color-default-primary, #202227);
98
- margin: 0 0 8px 0;
99
- }
100
-
101
- .empty-state-description {
102
- font-family: 'Brockmann', sans-serif;
103
- font-size: var(--font-size-sm);
104
- font-weight: 400;
105
- line-height: 1.4;
106
- color: var(--text-color-default-secondary, #545B66);
107
- margin: 0;
108
- }
109
-
110
- /* ============================================
111
- FORM UTILITIES
112
- ============================================ */
113
-
114
- /* Ghost Input/Textarea - No focus/hover outlines, no padding */
115
- .ghost-input-clean ::ng-deep .ds-input,
116
- .ghost-input-clean ::ng-deep .ds-textarea,
117
- .ghost-input-clean ::ng-deep .textarea-container {
118
- outline: none !important;
119
- border: none !important;
120
- padding: 0 !important;
121
- }
122
-
123
- :host ::ng-deep ds-textarea.ghost-input-clean .textarea-container {
124
- padding: 0 !important;
125
- }
126
-
127
- .ghost-input-clean ::ng-deep .ds-input:hover,
128
- .ghost-input-clean ::ng-deep .ds-textarea:hover,
129
- .ghost-input-clean ::ng-deep .textarea-container:hover,
130
- .ghost-input-clean ::ng-deep .ds-input:focus,
131
- .ghost-input-clean ::ng-deep .ds-textarea:focus,
132
- .ghost-input-clean ::ng-deep .textarea-container:focus,
133
- .ghost-input-clean ::ng-deep .ds-input:focus-within,
134
- .ghost-input-clean ::ng-deep .ds-textarea:focus-within,
135
- .ghost-input-clean ::ng-deep .textarea-container:focus-within {
136
- outline: none !important;
137
- border: none !important;
138
- box-shadow: none !important;
139
- }
140
-
141
- /* Target the actual textarea element inside ds-textarea */
142
- .ghost-input-clean ::ng-deep textarea {
143
- outline: none !important;
144
- border: none !important;
145
- box-shadow: none !important;
146
- resize: none !important;
147
- }
148
-
149
- .ghost-input-clean ::ng-deep textarea:hover,
150
- .ghost-input-clean ::ng-deep textarea:focus {
151
- outline: none !important;
152
- border: none !important;
153
- box-shadow: none !important;
154
- }
155
-
1
+ /**
2
+ * Mobile Common Styles
3
+ * Shared CSS classes used across multiple mobile components
4
+ *
5
+ * USAGE IN DOWNSTREAM APPS:
6
+ * Import via styleUrls in your component:
7
+ *
8
+ * @Component({
9
+ * styleUrls: [
10
+ * '@propbinder/mobile-design/styles/mobile-common.css',
11
+ * './your-component.scss'
12
+ * ],
13
+ * })
14
+ *
15
+ * Or import in angular.json styles array for global availability:
16
+ *
17
+ * "styles": [
18
+ * "@propbinder/mobile-design/styles/mobile-common.css",
19
+ * "src/styles.scss"
20
+ * ]
21
+ */
22
+
23
+ /* Author Details Container */
24
+ .author-details {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 2px;
28
+ min-width: 0;
29
+ flex: 1;
30
+ }
31
+
32
+ /* Author Name */
33
+ .author-name {
34
+ font-family: 'Brockmann', sans-serif;
35
+ font-size: var(--font-size-sm);
36
+ font-weight: 600;
37
+ line-height: 20px;
38
+ letter-spacing: -0.3px;
39
+ color: var(--color-text-primary, #1a1a1a);
40
+ white-space: nowrap;
41
+ overflow: hidden;
42
+ text-overflow: ellipsis;
43
+ }
44
+
45
+ /* Author Meta (role, timestamp, etc.) */
46
+ .author-meta {
47
+ font-family: 'Brockmann', sans-serif;
48
+ font-size: var(--font-size-xs);
49
+ font-weight: 400;
50
+ line-height: 1.2;
51
+ letter-spacing: -0.26px;
52
+ color: var(--color-text-tertiary, #737373);
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 6px;
56
+ }
57
+
58
+ .author-meta .separator {
59
+ color: var(--color-text-tertiary, #a0a0a0);
60
+ }
61
+
62
+ /* Variants for lightbox/overlay contexts (white text on dark bg) */
63
+ .lightbox-context .author-name,
64
+ .overlay-context .author-name {
65
+ color: rgba(255, 255, 255, 0.95);
66
+ }
67
+
68
+ .lightbox-context .author-meta,
69
+ .overlay-context .author-meta {
70
+ color: rgba(255, 255, 255, 0.7);
71
+ }
72
+
73
+ .lightbox-context .author-meta .separator,
74
+ .overlay-context .author-meta .separator {
75
+ color: rgba(255, 255, 255, 0.5);
76
+ }
77
+
78
+ /* Section Headlines */
79
+ .section-headline {
80
+ font-size: var(--font-size-base);
81
+ font-weight: 600;
82
+ color: var(--text-color-default-primary);
83
+ padding: 16px 0;
84
+ margin: 0;
85
+ letter-spacing: -0.2px;
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 6px;
89
+ }
90
+
91
+ /* Empty State Text */
92
+ .empty-state-title {
93
+ font-family: 'Brockmann', sans-serif;
94
+ font-size: var(--font-size-base);
95
+ font-weight: 600;
96
+ line-height: 1.3;
97
+ color: var(--text-color-default-primary, #202227);
98
+ margin: 0 0 8px 0;
99
+ }
100
+
101
+ .empty-state-description {
102
+ font-family: 'Brockmann', sans-serif;
103
+ font-size: var(--font-size-sm);
104
+ font-weight: 400;
105
+ line-height: 1.4;
106
+ color: var(--text-color-default-secondary, #545B66);
107
+ margin: 0;
108
+ }
109
+
110
+ /* ============================================
111
+ FORM UTILITIES
112
+ ============================================ */
113
+
114
+ /* Ghost Input/Textarea - No focus/hover outlines, no padding */
115
+ .ghost-input-clean ::ng-deep .ds-input,
116
+ .ghost-input-clean ::ng-deep .ds-textarea,
117
+ .ghost-input-clean ::ng-deep .textarea-container {
118
+ outline: none !important;
119
+ border: none !important;
120
+ padding: 0 !important;
121
+ }
122
+
123
+ :host ::ng-deep ds-textarea.ghost-input-clean .textarea-container {
124
+ padding: 0 !important;
125
+ }
126
+
127
+ .ghost-input-clean ::ng-deep .ds-input:hover,
128
+ .ghost-input-clean ::ng-deep .ds-textarea:hover,
129
+ .ghost-input-clean ::ng-deep .textarea-container:hover,
130
+ .ghost-input-clean ::ng-deep .ds-input:focus,
131
+ .ghost-input-clean ::ng-deep .ds-textarea:focus,
132
+ .ghost-input-clean ::ng-deep .textarea-container:focus,
133
+ .ghost-input-clean ::ng-deep .ds-input:focus-within,
134
+ .ghost-input-clean ::ng-deep .ds-textarea:focus-within,
135
+ .ghost-input-clean ::ng-deep .textarea-container:focus-within {
136
+ outline: none !important;
137
+ border: none !important;
138
+ box-shadow: none !important;
139
+ }
140
+
141
+ /* Target the actual textarea element inside ds-textarea */
142
+ .ghost-input-clean ::ng-deep textarea {
143
+ outline: none !important;
144
+ border: none !important;
145
+ box-shadow: none !important;
146
+ resize: none !important;
147
+ }
148
+
149
+ .ghost-input-clean ::ng-deep textarea:hover,
150
+ .ghost-input-clean ::ng-deep textarea:focus {
151
+ outline: none !important;
152
+ border: none !important;
153
+ box-shadow: none !important;
154
+ }
155
+