@progressive-development/pd-forms 0.1.4 → 0.1.5

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 (4) hide show
  1. package/package.json +3 -2
  2. package/src/PdBaseUi.js +2 -2
  3. package/src/PdButton.js +180 -179
  4. package/src/shared-global-styles.js +0 -43
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent pd-forms following open-wc recommendations",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "PD Progressive Development",
6
- "version": "0.1.4",
6
+ "version": "0.1.5",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
@@ -21,7 +21,8 @@
21
21
  "dependencies": {
22
22
  "@lit-labs/motion": "^1.0.2",
23
23
  "@lit/localize": "^0.11.2",
24
- "@progressive-development/pd-icon": "^0.1.8",
24
+ "@progressive-development/pd-icon": "^0.1.9",
25
+ "@progressive-development/pd-shared-styles": "0.1.1",
25
26
  "lit": "^2.2.0"
26
27
  },
27
28
  "devDependencies": {
package/src/PdBaseUi.js CHANGED
@@ -20,12 +20,12 @@
20
20
  import { LitElement } from 'lit';
21
21
  import { updateWhenLocaleChanges } from '@lit/localize';
22
22
 
23
- import { SharedGlobalStyles } from './shared-global-styles.js';
23
+ import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
24
24
 
25
25
  export class PdBaseUI extends LitElement {
26
26
 
27
27
  static get styles() {
28
- return [SharedGlobalStyles];
28
+ return [PDColorStyles, PDFontStyles];
29
29
  }
30
30
 
31
31
  constructor() {
package/src/PdButton.js CHANGED
@@ -5,182 +5,183 @@
5
5
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
6
6
  */
7
7
 
8
- import { html, css } from 'lit';
9
- import { PdBaseUI } from './PdBaseUi.js';
10
-
11
- export class PdButton extends PdBaseUI {
12
-
13
- /**
14
- * @event button-clicked
15
- */
16
-
17
- static get styles() {
18
- return [
19
- PdBaseUI.styles,
20
- css`
21
- :host {
22
-
23
- display: flex;
24
- justify-content: center;
25
-
26
- width: var(--pd-button-width, 140px);
27
- height: var(--pd-button-height, 2rem);
28
-
29
-
30
- border-radius: var(--pd-border-radius, 1px);
31
-
32
- background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
33
- color: var(--pd-button-font-col, var(--pd-default-bg-col));
34
-
35
- font-family: var(--pd-default-font-title-family);
36
- font-size: var(--pd-button-font-size, var(--pd-default-font-content-size));
37
- font-weight: var(--pd-button-font-weight, normal);
38
-
39
- cursor: pointer;
40
-
41
- box-shadow: var(--pd-button-box-shadow, -1px 1px 2px var(--pd-default-dark-col));
42
-
43
- margin: 0.5rem;
44
- margin-left: 0; /* Um gleich zum input field zu sein */
45
-
46
- /*
47
- height: 100%;
48
- width: 100%; => Ohne diese Angabe eht die % Angaben icht
49
- */
50
- }
51
-
52
- :host(:not([disabled]):hover) {
53
- background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
54
- color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
55
- transition: background-color 0.4s ease 0s;
56
- }
57
-
58
- :host([primary]) {
59
- background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
60
- color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
61
- }
62
-
63
- :host([gradient]) {
64
- background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);
65
- }
66
-
67
- :host([disabled]) {
68
- cursor: auto;
69
- border-color: var(--pd-default-disabled-col);
70
- background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
71
- color: var(--pd-button-font-col-disabled, black);
72
- }
73
-
74
- /* Style for Button */
75
- a {
76
- display: inline-block;
77
- text-decoration: none;
78
- border: none;
79
- white-space: nowrap;
80
- margin: 0.5rem;
81
-
82
- /*box-shadow: -2px 2px 4px #999;/* TODO: From var */
83
- /*border-bottom: 1px solid var(--my-border-color);*/
84
- /*will-change: transform; Dann über Menu bei Scroll...*/
85
-
86
- /*
87
- transition-property: box-shadow, background;
88
- transition: .2s ease-in;
89
- box-sizing: border-box;
90
- */
91
-
92
- /*overflow: hidden;
93
- text-overflow: ellipsis;*/
94
-
95
- /*padding: var(--squi-input-padding, .5rem);*/
96
- }
97
-
98
- a *{
99
- pointer-events: none;
100
- }
101
-
102
-
103
- /* button icon not integrated at the moment */
104
- .button-icon {
105
- display: flex;
106
- align-items: center;
107
- justify-content: center;
108
- white-space: nowrap;
109
- --pd-icon-fill: var(--icon-fill-light);
110
- --pd-icon-fill-hover: var(--icon-fill-light);
111
- }
112
-
113
- .button-icon:not([disabled]) {
114
- --pd-icon-fill: var(--app-primary-color);
115
- --pd-icon-fill-hover: var(--app-primary-color-dark);
116
- }
117
-
118
- .button-icon pd-icon {
119
- max-width: 1.25rem;
120
- height: 1.25rem;
121
- width: 1.25rem;
122
- margin: 0 .15rem;
123
- }
124
-
125
- .button-icon.small pd-icon {
126
- max-width: 1.25rem;
127
- height: 1.25rem;
128
- width: 1.25rem;
129
- padding-right: .15rem;
130
- }
131
-
132
- .button-icon svg {
133
- max-width: 1rem;
134
- height: 1rem;
135
- width: 1rem;
136
- padding-right: .5rem;
137
- fill: var(--app-primary-color);
138
- }
139
-
140
- .button-icon:hover pd-icon,
141
- .button-icon:hover svg {
142
- fill: var(--app-primary-color);
143
- }
144
-
145
- @media (min-width: 580px) {
146
- .button-icon pd-icon {
147
- margin: 0 .5rem;
148
- }
149
- .button-icon.small pd-icon {
150
- padding-right: .5rem;
151
- }
152
- }
153
-
154
- `];
155
- }
156
-
157
- static get properties() {
158
- return {
159
- primary: {type: Boolean},
160
- gradient: {type: Boolean},
161
- disabled: {type: Boolean},
162
- text: {type: String}
163
- };
164
- }
165
-
166
- constructor() {
167
- super();
168
- this.primary = false;
169
- this.gradient = false;
170
- this.disabled = false;
171
- this.text = 'Ok';
172
- }
173
-
174
- render() {
175
- return html`
176
- <div @click="${this._handleClick}">
177
- <a ?disabled="${this.disabled}">${this.text}</a>
178
- </div>`;
179
- }
180
-
181
- _handleClick() {
182
- if (!this.disabled) {
183
- this.dispatchEvent(new CustomEvent("button-clicked"));
184
- }
185
- }
186
- }
8
+ import { html, css } from 'lit';
9
+ import { PdBaseUI } from './PdBaseUi.js';
10
+
11
+ export class PdButton extends PdBaseUI {
12
+
13
+ /**
14
+ * @event button-clicked
15
+ */
16
+
17
+ static get styles() {
18
+ return [
19
+ PdBaseUI.styles,
20
+ css`
21
+ :host {
22
+
23
+ font-family: var(--pd-default-font-title-family);
24
+ font-size: var(--pd-button-font-size, var(--pd-default-font-content-size));
25
+ font-weight: var(--pd-button-font-weight, normal);
26
+
27
+ /*
28
+ height: 100%;
29
+ width: 100%; => Ohne diese Angabe eht die % Angaben icht
30
+ */
31
+ margin: 0.5rem;
32
+ margin-left: 0; /* Um gleich zum input field zu sein */
33
+
34
+ pointer-events: none;
35
+ }
36
+
37
+ .button-div {
38
+
39
+ display: flex;
40
+ justify-content: center;
41
+ width: var(--pd-button-width, 140px);
42
+ height: var(--pd-button-height, 2rem);
43
+
44
+ border-radius: var(--pd-border-radius, 1px);
45
+
46
+ background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
47
+ color: var(--pd-button-font-col, var(--pd-default-bg-col));
48
+
49
+ cursor: pointer;
50
+
51
+ box-shadow: var(--pd-button-box-shadow, -1px 1px 2px var(--pd-default-dark-col));
52
+
53
+ pointer-events: all;
54
+ }
55
+
56
+ :host(:not([disabled]):hover) .button-div {
57
+ background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
58
+ color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
59
+ transition: background-color 0.4s ease 0s;
60
+ }
61
+
62
+ :host([primary]) .button-div {
63
+ background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
64
+ color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
65
+ }
66
+
67
+ :host([gradient]) .button-div {
68
+ background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);
69
+ }
70
+
71
+ :host([disabled]) .button-div {
72
+ cursor: auto;
73
+ border-color: var(--pd-default-disabled-col);
74
+ background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
75
+ color: var(--pd-button-font-col-disabled, black);
76
+ }
77
+
78
+ /* Style for Button */
79
+ a {
80
+ display: inline-block;
81
+ text-decoration: none;
82
+ border: none;
83
+ white-space: nowrap;
84
+ margin: 0.5rem;
85
+ pointer-events: none;
86
+
87
+ /*box-shadow: -2px 2px 4px #999;/* TODO: From var */
88
+ /*border-bottom: 1px solid var(--my-border-color);*/
89
+ /*will-change: transform; Dann über Menu bei Scroll...*/
90
+
91
+ /*
92
+ transition-property: box-shadow, background;
93
+ transition: .2s ease-in;
94
+ box-sizing: border-box;
95
+ */
96
+
97
+ /*overflow: hidden;
98
+ text-overflow: ellipsis;*/
99
+
100
+ /*padding: var(--squi-input-padding, .5rem);*/
101
+ }
102
+
103
+
104
+ /* button icon not integrated at the moment */
105
+ .button-icon {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ white-space: nowrap;
110
+ --pd-icon-fill: var(--icon-fill-light);
111
+ --pd-icon-fill-hover: var(--icon-fill-light);
112
+ }
113
+
114
+ .button-icon:not([disabled]) {
115
+ --pd-icon-fill: var(--app-primary-color);
116
+ --pd-icon-fill-hover: var(--app-primary-color-dark);
117
+ }
118
+
119
+ .button-icon pd-icon {
120
+ max-width: 1.25rem;
121
+ height: 1.25rem;
122
+ width: 1.25rem;
123
+ margin: 0 .15rem;
124
+ }
125
+
126
+ .button-icon.small pd-icon {
127
+ max-width: 1.25rem;
128
+ height: 1.25rem;
129
+ width: 1.25rem;
130
+ padding-right: .15rem;
131
+ }
132
+
133
+ .button-icon svg {
134
+ max-width: 1rem;
135
+ height: 1rem;
136
+ width: 1rem;
137
+ padding-right: .5rem;
138
+ fill: var(--app-primary-color);
139
+ }
140
+
141
+ .button-icon:hover pd-icon,
142
+ .button-icon:hover svg {
143
+ fill: var(--app-primary-color);
144
+ }
145
+
146
+ @media (min-width: 580px) {
147
+ .button-icon pd-icon {
148
+ margin: 0 .5rem;
149
+ }
150
+ .button-icon.small pd-icon {
151
+ padding-right: .5rem;
152
+ }
153
+ }
154
+
155
+ `];
156
+ }
157
+
158
+ static get properties() {
159
+ return {
160
+ primary: {type: Boolean},
161
+ gradient: {type: Boolean},
162
+ disabled: {type: Boolean},
163
+ text: {type: String}
164
+ };
165
+ }
166
+
167
+ constructor() {
168
+ super();
169
+ this.primary = false;
170
+ this.gradient = false;
171
+ this.disabled = false;
172
+ this.text = 'Ok';
173
+ }
174
+
175
+ render() {
176
+ return html`
177
+ <div @click="${this._handleClick}" class="button-div">
178
+ <a ?disabled="${this.disabled}">${this.text}</a>
179
+ </div>`;
180
+ }
181
+
182
+ _handleClick() {
183
+ if (!this.disabled) {
184
+ this.dispatchEvent(new CustomEvent("button-clicked"));
185
+ }
186
+ }
187
+ }
package/src/shared-global-styles.js DELETED
@@ -1,43 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
4
- */
5
-
6
- import { css } from 'lit';
7
-
8
- export const SharedGlobalStyles = css`
9
-
10
- :host {
11
- /**
12
- * Set default fonts for all pd-components.
13
- * Use content, title and input categories for fonts.
14
- */
15
- --pd-default-font-title-family: var(--app-font-title-family);
16
- --pd-default-font-content-family: var(--app-font-content-family);
17
- --pd-default-font-input-family: var(--app-font-input-family);
18
-
19
- --pd-default-font-title-col: var(--app-font-title-col, #0A3A48);
20
- --pd-default-font-content-col: var(--app-font-content-col, #353738);
21
- --pd-default-font-input-col: var(--app-font-input-col, #353738);
22
-
23
- --pd-default-font-content-size: var(--app-font-content-size, 1em);
24
- --pd-default-font-input-size: var(--app-font-input-size, 1em);
25
-
26
- /**
27
- * Set default colors for all pd-components
28
- */
29
- --pd-default-col: var(--app-primary-col, #067394);
30
- --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
31
- --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
32
- --pd-default-bg-col: var(--app-primary-bg-col, #fefefe);
33
-
34
- --pd-default-hover-col: var(--app-hover-col, #ffc857);
35
- --pd-default-error-col: var(--app-error-col, #cc2029);
36
- --pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
37
- --pd-default-success-col: var(--app-success-col, #42a01c);
38
- --pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);
39
- --pd-default-disabled-col: var(--app-disabled-col, #888585);
40
- --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);
41
- }
42
-
43
- `;