@blockquote-web-components/blockquote-dialog 1.3.4 → 1.3.6
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-dialog",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.6",
|
|
4
4
|
"description": "Webcomponent blockquote-dialog following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -42,30 +42,26 @@
|
|
|
42
42
|
"dev:vite": "vite build",
|
|
43
43
|
"format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
|
|
44
44
|
"format:eslint": "eslint . --fix",
|
|
45
|
-
"format:prettier": "prettier \"**/*.{js,ts,
|
|
46
|
-
"format:stylelint": "stylelint \"
|
|
45
|
+
"format:prettier": "prettier \"**/*.{js,ts,css,scss,html,json}\" --write --ignore-path .prettierignore",
|
|
46
|
+
"format:stylelint": "stylelint \"{demo,src}/**/*.{js,ts,css,scss,html}\" --fix --ignore-path .prettierignore",
|
|
47
47
|
"postinstall": "npm run sort:package",
|
|
48
|
-
"lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
|
|
49
|
-
"lint:eslint": "eslint .",
|
|
50
|
-
"lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .prettierignore",
|
|
51
|
-
"lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .prettierignore",
|
|
52
|
-
"prepare": "husky",
|
|
53
48
|
"preview:vite": "vite preview",
|
|
54
49
|
"sass:watch": "sass-style-template",
|
|
55
50
|
"sort:package": "npx sort-package-json",
|
|
56
|
-
"start": "concurrently -k -r \"npm:
|
|
51
|
+
"start": "concurrently -k -r \"npm:vite\" \"npm:sass:watch\"",
|
|
57
52
|
"test": "vitest --run --browser.headless",
|
|
58
53
|
"test:watch": "vitest",
|
|
59
54
|
"vite": "vite"
|
|
60
55
|
},
|
|
61
56
|
"lint-staged": {
|
|
62
57
|
"**/*.{js,ts,html}": [
|
|
63
|
-
"npm run format
|
|
58
|
+
"npm run format"
|
|
64
59
|
],
|
|
65
|
-
"**/*.
|
|
60
|
+
"**/*.json": [
|
|
66
61
|
"npm run format:prettier"
|
|
67
62
|
],
|
|
68
63
|
"**/*.{scss,css}": [
|
|
64
|
+
"npm run format:prettier",
|
|
69
65
|
"npm run format:stylelint"
|
|
70
66
|
]
|
|
71
67
|
},
|
|
@@ -80,34 +76,60 @@
|
|
|
80
76
|
{
|
|
81
77
|
"files": "*.{scss,css}",
|
|
82
78
|
"options": {
|
|
83
|
-
"printWidth": 280,
|
|
84
79
|
"singleQuote": false
|
|
85
80
|
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"files": "*.json",
|
|
84
|
+
"options": {
|
|
85
|
+
"parser": "json-stringify"
|
|
86
|
+
}
|
|
86
87
|
}
|
|
87
88
|
]
|
|
88
89
|
},
|
|
89
90
|
"stylelint": {
|
|
90
91
|
"extends": "stylelint-config-standard-scss",
|
|
92
|
+
"allowEmptyInput": true,
|
|
91
93
|
"rules": {
|
|
92
94
|
"custom-property-pattern": null,
|
|
93
95
|
"no-duplicate-selectors": null,
|
|
94
96
|
"color-function-notation": null,
|
|
95
|
-
"alpha-value-notation": null
|
|
96
|
-
|
|
97
|
+
"alpha-value-notation": null,
|
|
98
|
+
"media-feature-name-no-unknown": null,
|
|
99
|
+
"comment-empty-line-before": null,
|
|
100
|
+
"declaration-empty-line-before": null,
|
|
101
|
+
"property-no-vendor-prefix": null,
|
|
102
|
+
"selector-attribute-quotes": null,
|
|
103
|
+
"value-no-vendor-prefix": null
|
|
104
|
+
},
|
|
105
|
+
"overrides": [
|
|
106
|
+
{
|
|
107
|
+
"files": [
|
|
108
|
+
"**/*.html"
|
|
109
|
+
],
|
|
110
|
+
"customSyntax": "postcss-html"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"files": [
|
|
114
|
+
"**/*.{ts,js}"
|
|
115
|
+
],
|
|
116
|
+
"customSyntax": "postcss-lit"
|
|
117
|
+
}
|
|
118
|
+
]
|
|
97
119
|
},
|
|
98
120
|
"dependencies": {
|
|
99
|
-
"@blockquote-web-components/blockquote-directive-ariaidref-slot": "^1.2.
|
|
121
|
+
"@blockquote-web-components/blockquote-directive-ariaidref-slot": "^1.2.8",
|
|
100
122
|
"@blockquote/frontend-utilities": "^1.0.2",
|
|
101
123
|
"lit": "^3.2.1"
|
|
102
124
|
},
|
|
103
125
|
"devDependencies": {
|
|
104
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.
|
|
105
|
-
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.
|
|
106
|
-
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.
|
|
126
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.1",
|
|
127
|
+
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.8",
|
|
128
|
+
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.6"
|
|
107
129
|
},
|
|
108
130
|
"publishConfig": {
|
|
109
131
|
"access": "public"
|
|
110
132
|
},
|
|
111
133
|
"customElements": "custom-elements.json",
|
|
112
|
-
"gitHead": "
|
|
134
|
+
"gitHead": "6be5182ac44e3e4c3b924f6b5ef5533e7b80790c"
|
|
113
135
|
}
|
|
@@ -1,45 +1,55 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {css} from 'lit';
|
|
2
2
|
|
|
3
|
-
export const styles = css
|
|
4
|
-
dialog
|
|
5
|
-
|
|
6
|
-
transform: translateY(16%);
|
|
7
|
-
transition: opacity 200ms ease-out, transform 200ms ease-out, overlay 200ms ease-out allow-discrete, display 200ms ease-out allow-discrete;
|
|
8
|
-
/* Equivalent to
|
|
9
|
-
transition: all 200ms allow-discrete; */
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* Open state of the dialog */
|
|
13
|
-
dialog[open] {
|
|
14
|
-
opacity: 1;
|
|
15
|
-
transform: translateY(0);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* Before-open state */
|
|
19
|
-
/* Needs to be after the previous dialog[open] rule to take effect,
|
|
20
|
-
as the specificity is the same */
|
|
21
|
-
@starting-style {
|
|
22
|
-
dialog[open] {
|
|
3
|
+
export const styles = css`
|
|
4
|
+
/* Closed state of the dialog */
|
|
5
|
+
dialog {
|
|
23
6
|
opacity: 0;
|
|
24
7
|
transform: translateY(16%);
|
|
8
|
+
transition:
|
|
9
|
+
opacity 200ms ease-out,
|
|
10
|
+
transform 200ms ease-out,
|
|
11
|
+
overlay 200ms ease-out allow-discrete,
|
|
12
|
+
display 200ms ease-out allow-discrete;
|
|
13
|
+
/* Equivalent to
|
|
14
|
+
transition: all 200ms allow-discrete; */
|
|
25
15
|
}
|
|
26
|
-
}
|
|
27
|
-
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
|
|
28
|
-
dialog::backdrop {
|
|
29
|
-
background-color: rgba(120, 120, 120, 0);
|
|
30
|
-
transition: display 190ms ease-in allow-discrete, overlay 190ms ease-in allow-discrete, background-color 190ms;
|
|
31
|
-
/* Equivalent to
|
|
32
|
-
transition: all 190ms allow-discrete; */
|
|
33
|
-
}
|
|
34
16
|
|
|
35
|
-
dialog
|
|
36
|
-
|
|
37
|
-
|
|
17
|
+
/* Open state of the dialog */
|
|
18
|
+
dialog[open] {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
transform: translateY(0);
|
|
21
|
+
}
|
|
38
22
|
|
|
39
|
-
/*
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
23
|
+
/* Before-open state
|
|
24
|
+
Needs to be after the previous dialog[open] rule to take effect,
|
|
25
|
+
as the specificity is the same */
|
|
26
|
+
@starting-style {
|
|
27
|
+
dialog[open] {
|
|
28
|
+
opacity: 0;
|
|
29
|
+
transform: translateY(16%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
|
|
34
|
+
dialog::backdrop {
|
|
43
35
|
background-color: rgba(120, 120, 120, 0);
|
|
36
|
+
transition:
|
|
37
|
+
display 190ms ease-in allow-discrete,
|
|
38
|
+
overlay 190ms ease-in allow-discrete,
|
|
39
|
+
background-color 190ms;
|
|
40
|
+
/* Equivalent to
|
|
41
|
+
transition: all 190ms allow-discrete; */
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
dialog[open]::backdrop {
|
|
45
|
+
background-color: rgba(120, 120, 120, 0.25);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* This starting-style rule cannot be nested inside the above selector
|
|
49
|
+
because the nesting selector cannot represent pseudo-elements. */
|
|
50
|
+
@starting-style {
|
|
51
|
+
dialog[open]::backdrop {
|
|
52
|
+
background-color: rgba(120, 120, 120, 0);
|
|
53
|
+
}
|
|
44
54
|
}
|
|
45
|
-
|
|
55
|
+
`;
|
|
@@ -1,66 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
import { css } from 'lit';
|
|
1
|
+
import {css} from 'lit';
|
|
3
2
|
|
|
4
|
-
export const styles = css
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
3
|
+
export const styles = css`
|
|
4
|
+
:host {
|
|
5
|
+
--_background-color: var(--blockquote-dialog-background-color, rgb(255, 255, 255));
|
|
6
|
+
--_max-height: var(--blockquote-dialog-max-height, min(35rem, calc(100% - 3rem)));
|
|
7
|
+
--_max-width: var(--blockquote-dialog-max-width, min(35rem, calc(100% - 3rem)));
|
|
8
|
+
--_min-height: var(--blockquote-dialog-min-height, 8.75rem);
|
|
9
|
+
--_min-width: var(--blockquote-dialog-min-width, 17.5rem);
|
|
10
|
+
--_padding: var(--blockquote-padding, 1rem);
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
display: contents;
|
|
13
|
+
background-color: var(--_background-color);
|
|
14
|
+
margin: auto;
|
|
15
|
+
max-height: var(--_max-height);
|
|
16
|
+
max-width: var(--_max-width);
|
|
17
|
+
min-height: var(--_min-height);
|
|
18
|
+
min-width: var(--_min-width);
|
|
19
|
+
position: fixed;
|
|
20
|
+
height: -moz-fit-content;
|
|
21
|
+
height: fit-content;
|
|
22
|
+
width: -moz-fit-content;
|
|
23
|
+
width: fit-content;
|
|
24
|
+
}
|
|
25
25
|
|
|
26
|
-
:host([hidden]),
|
|
27
|
-
[hidden] {
|
|
28
|
-
|
|
29
|
-
}
|
|
26
|
+
:host([hidden]),
|
|
27
|
+
[hidden] {
|
|
28
|
+
display: none !important;
|
|
29
|
+
}
|
|
30
30
|
|
|
31
|
-
*,
|
|
32
|
-
*::before,
|
|
33
|
-
*::after {
|
|
34
|
-
|
|
35
|
-
}
|
|
31
|
+
*,
|
|
32
|
+
*::before,
|
|
33
|
+
*::after {
|
|
34
|
+
box-sizing: inherit;
|
|
35
|
+
}
|
|
36
36
|
|
|
37
|
-
dialog {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
37
|
+
dialog {
|
|
38
|
+
background: inherit;
|
|
39
|
+
border: none;
|
|
40
|
+
border-radius: inherit;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
margin: inherit;
|
|
43
|
+
height: inherit;
|
|
44
|
+
width: inherit;
|
|
45
|
+
max-height: inherit;
|
|
46
|
+
max-width: inherit;
|
|
47
|
+
min-height: inherit;
|
|
48
|
+
min-width: inherit;
|
|
49
|
+
outline: none;
|
|
50
|
+
overflow: visible;
|
|
51
|
+
padding: 0;
|
|
52
|
+
}
|
|
53
53
|
|
|
54
|
-
:host([open]) dialog {
|
|
55
|
-
|
|
56
|
-
}
|
|
54
|
+
:host([open]) dialog {
|
|
55
|
+
display: flex;
|
|
56
|
+
}
|
|
57
57
|
|
|
58
|
-
.scroller {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
58
|
+
.scroller {
|
|
59
|
+
overflow-y: auto;
|
|
60
|
+
min-height: var(--_min-height);
|
|
61
|
+
}
|
|
62
62
|
|
|
63
|
-
.content {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
63
|
+
.content {
|
|
64
|
+
padding: var(--_padding);
|
|
65
|
+
min-height: inherit;
|
|
66
|
+
}
|
|
67
|
+
`;
|