wj-elements 0.1.217 → 0.1.219
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.
- package/dist/dark.css +5 -3
- package/dist/light.css +5 -5
- package/dist/packages/wje-card/card.element.d.ts +6 -4
- package/dist/wje-card.js +1 -1
- package/dist/wje-card.js.map +1 -1
- package/package.json +1 -1
package/dist/dark.css
CHANGED
|
@@ -30,9 +30,6 @@
|
|
|
30
30
|
--wje-background: var(--wje-color-contrast-2);
|
|
31
31
|
--wje-border-color: var(--wje-color-contrast-4);
|
|
32
32
|
|
|
33
|
-
--wje-card-background: var(--wje-color-contrast-3);
|
|
34
|
-
--wje-card-color: var(--wje-color-white) !important;
|
|
35
|
-
|
|
36
33
|
--wje-color-primary: var(--wje-color-primary-1);
|
|
37
34
|
--wje-color-complete: var(--wje-color-complete-1);
|
|
38
35
|
--wje-color-success: var(--wje-color-success-1);
|
|
@@ -152,6 +149,11 @@
|
|
|
152
149
|
/* Button */
|
|
153
150
|
--wje-button-border-color: var(--wje-color-contrast-1);
|
|
154
151
|
|
|
152
|
+
/* Card */
|
|
153
|
+
--wje-card-background: var(--wje-color-contrast-0);
|
|
154
|
+
--wje-card-color: var(--wje-color-white);
|
|
155
|
+
--wje-card-border-color: transparent;
|
|
156
|
+
|
|
155
157
|
/* Divider */
|
|
156
158
|
--wje-divider-border-color: var(--wje-border-color);
|
|
157
159
|
|
package/dist/light.css
CHANGED
|
@@ -64,7 +64,8 @@
|
|
|
64
64
|
--wje-border-radius-small: 0.125rem; /* 2px */
|
|
65
65
|
--wje-border-radius-medium: 0.25rem; /* 4px */
|
|
66
66
|
--wje-border-radius-large: 0.5rem; /* 8px */
|
|
67
|
-
--wje-border-radius-x-large:
|
|
67
|
+
--wje-border-radius-x-large: 0.75rem; /* 12px */
|
|
68
|
+
--wje-border-radius-2x-large: 1rem; /* 16px */
|
|
68
69
|
--wje-border-radius-circle: 50%; /* Circle */
|
|
69
70
|
--wje-border-radius-pill: 50rem; /* Pill */
|
|
70
71
|
|
|
@@ -115,9 +116,6 @@
|
|
|
115
116
|
--wje-background: var(--wje-color-contrast-0);
|
|
116
117
|
--wje-border-color: var(--wje-color-contrast-3);
|
|
117
118
|
|
|
118
|
-
--wje-card-background: var(--wje-color-contrast-0);
|
|
119
|
-
--wje-card-color: var(--wje-color);
|
|
120
|
-
|
|
121
119
|
--wje-color-menu: hsl(220, 15%, 15%);
|
|
122
120
|
--wje-color-contrast: hsl(0, 0%, 95%);
|
|
123
121
|
|
|
@@ -268,10 +266,12 @@
|
|
|
268
266
|
--wje-button-group-border-color: var(--wje-color-contrast-3);
|
|
269
267
|
|
|
270
268
|
/* Card */
|
|
271
|
-
--wje-card-
|
|
269
|
+
--wje-card-background: var(--wje-color-contrast-0);
|
|
270
|
+
--wje-card-color: var(--wje-color-black);
|
|
272
271
|
--wje-card-border-color: transparent;
|
|
273
272
|
--wje-card-border-style: var(--wje-border-style);
|
|
274
273
|
--wje-card-border-width: var(--wje-border-width);
|
|
274
|
+
--wje-card-border-radius: var(--wje-border-radius-large);
|
|
275
275
|
--wje-card-shadow: var(--wje-shadow-x-large);
|
|
276
276
|
|
|
277
277
|
/* Card - Header */
|
|
@@ -5,11 +5,13 @@ import { default as WJElement } from '../wje-element/element.js';
|
|
|
5
5
|
* @status stable
|
|
6
6
|
* @augments WJElement
|
|
7
7
|
* @slot - The card main content.
|
|
8
|
-
* @cssproperty [--wje-card-margin-top=0] - Margin top of the component;
|
|
9
|
-
* @cssproperty [--wje-card-margin-bottom=1rem] - Margin bottom of the component;
|
|
10
|
-
* @cssproperty [--wje-card-margin-inline=0] - Margin inline of the component;
|
|
11
|
-
* @cssproperty [--wje-card-border-color=transparent] - Border color of the component;
|
|
12
8
|
* @cssproperty [--wje-card-background=#fff] - Background of the component;
|
|
9
|
+
* @cssproperty [--wje-card-color=#000] - Color of the component;
|
|
10
|
+
* @cssproperty [--wje-card-border-color=transparent] - Border color of the component;
|
|
11
|
+
* @cssproperty [--wje-card-border-style=solid] - Border style of the component;
|
|
12
|
+
* @cssproperty [--wje-card-border-width=1px] - Border width of the component;
|
|
13
|
+
* @cssproperty [--wje-card-border-radius=0.5rem] - Border radius of the component;
|
|
14
|
+
* @cssproperty [--wje-card-shadow=var(--wje-shadow-x-large)] - Shadow of the component;
|
|
13
15
|
*/
|
|
14
16
|
export default class Card extends WJElement {
|
|
15
17
|
/**
|
package/dist/wje-card.js
CHANGED
|
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
|
-
const styles = "/*\n[ WJ Card ]\n*/\n\n:host {\n width: 100%;\n}\n\n.native-card {\n background-color: var(--wje-color
|
|
5
|
+
const styles = "/*\n[ WJ Card ]\n*/\n\n:host {\n width: 100%;\n}\n\n.native-card {\n background: var(--wje-card-background);\n color: var(--wje-card-color);\n margin: 0;\n box-shadow: var(--wje-card-shadow);\n border-color: var(--wje-card-border-color);\n border-style: var(--wje-card-border-style);\n border-width: var(--wje-card-border-width);\n border-radius: var(--wje-card-border-radius);\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n line-height: var(--wje-line-height-normal);\n position: relative;\n width: 100%;\n word-wrap: normal;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n/*BG - TEXT*/\n.native-card.wje-color-primary {\n background: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-primary-9);\n}\n\n.native-card.wje-color-complete {\n background: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-complete-9);\n}\n\n.native-card.wje-color-success {\n background: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-success-9);\n}\n\n.native-card.wje-color-warning {\n background: var(--wje-color-warning-9);\n color: var(--wje-color);\n border-color: var(--wje-color-warning-9);\n}\n\n.native-card.wje-color-danger {\n background: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-danger-9);\n}\n\n.native-card.wje-color-info {\n background: var(--wje-color-info-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-info-9);\n}\n\n.native-card.wje-color-menu {\n background: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-9);\n}\n";
|
|
6
6
|
class Card extends WJElement {
|
|
7
7
|
/**
|
|
8
8
|
* Card constructor method.
|
package/dist/wje-card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-card.js","sources":["../packages/wje-card/card.element.js","../packages/wje-card/card.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Card element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card\n * @status stable\n * @augments WJElement\n * @slot - The card main content.\n * @cssproperty [--wje-card-
|
|
1
|
+
{"version":3,"file":"wje-card.js","sources":["../packages/wje-card/card.element.js","../packages/wje-card/card.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Card element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card\n * @status stable\n * @augments WJElement\n * @slot - The card main content.\n * @cssproperty [--wje-card-background=#fff] - Background of the component;\n * @cssproperty [--wje-card-color=#000] - Color of the component;\n * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;\n * @cssproperty [--wje-card-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-card-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-card-border-radius=0.5rem] - Border radius of the component;\n * @cssproperty [--wje-card-shadow=var(--wje-shadow-x-large)] - Shadow of the component;\n */\nexport default class Card extends WJElement {\n /**\n * Card constructor method.\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Class name for the Card element.\n * @type {string}\n */\n className = 'Card';\n\n /**\n * Get CSS stylesheet for the Card element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Card element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draw method for the Card element.\n * @param {object} context The context object\n * @param {object} store The store object\n * @param {object} params The parameters\n * @returns {object} fragment - The document fragment\n */\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-card');\n\n let slot = document.createElement('slot');\n\n if (params.color) native.classList.add('wje-color-' + params.color);\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Card from './card.element.js';\n\n// export * from \"./card.element.js\";\nexport default Card;\n\nWJElement.define('wje-card', Card);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,MAAO,QAAO,UAAU,IAAI,eAAe,OAAO,KAAK;AAElE,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;AClEA,UAAU,OAAO,YAAY,IAAI;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.219",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|