@propbinder/mobile-design 0.2.57 → 0.2.62

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 (14) 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.mjs +11279 -9513
  9. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  10. package/index.d.ts +338 -29
  11. package/package.json +1 -1
  12. package/styles/ionic.css +954 -955
  13. package/styles/mobile-common.css +150 -150
  14. package/styles/mobile-page-base.css +333 -333
package/styles/mobile-common.css CHANGED
@@ -1,150 +1,150 @@
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 */
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
- }
121
-
122
- .ghost-input-clean ::ng-deep .ds-input:hover,
123
- .ghost-input-clean ::ng-deep .ds-textarea:hover,
124
- .ghost-input-clean ::ng-deep .textarea-container:hover,
125
- .ghost-input-clean ::ng-deep .ds-input:focus,
126
- .ghost-input-clean ::ng-deep .ds-textarea:focus,
127
- .ghost-input-clean ::ng-deep .textarea-container:focus,
128
- .ghost-input-clean ::ng-deep .ds-input:focus-within,
129
- .ghost-input-clean ::ng-deep .ds-textarea:focus-within,
130
- .ghost-input-clean ::ng-deep .textarea-container:focus-within {
131
- outline: none !important;
132
- border: none !important;
133
- box-shadow: none !important;
134
- }
135
-
136
- /* Target the actual textarea element inside ds-textarea */
137
- .ghost-input-clean ::ng-deep textarea {
138
- outline: none !important;
139
- border: none !important;
140
- box-shadow: none !important;
141
- resize: none !important;
142
- }
143
-
144
- .ghost-input-clean ::ng-deep textarea:hover,
145
- .ghost-input-clean ::ng-deep textarea:focus {
146
- outline: none !important;
147
- border: none !important;
148
- box-shadow: none !important;
149
- }
150
-
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 */
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
+ }
121
+
122
+ .ghost-input-clean ::ng-deep .ds-input:hover,
123
+ .ghost-input-clean ::ng-deep .ds-textarea:hover,
124
+ .ghost-input-clean ::ng-deep .textarea-container:hover,
125
+ .ghost-input-clean ::ng-deep .ds-input:focus,
126
+ .ghost-input-clean ::ng-deep .ds-textarea:focus,
127
+ .ghost-input-clean ::ng-deep .textarea-container:focus,
128
+ .ghost-input-clean ::ng-deep .ds-input:focus-within,
129
+ .ghost-input-clean ::ng-deep .ds-textarea:focus-within,
130
+ .ghost-input-clean ::ng-deep .textarea-container:focus-within {
131
+ outline: none !important;
132
+ border: none !important;
133
+ box-shadow: none !important;
134
+ }
135
+
136
+ /* Target the actual textarea element inside ds-textarea */
137
+ .ghost-input-clean ::ng-deep textarea {
138
+ outline: none !important;
139
+ border: none !important;
140
+ box-shadow: none !important;
141
+ resize: none !important;
142
+ }
143
+
144
+ .ghost-input-clean ::ng-deep textarea:hover,
145
+ .ghost-input-clean ::ng-deep textarea:focus {
146
+ outline: none !important;
147
+ border: none !important;
148
+ box-shadow: none !important;
149
+ }
150
+