js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow Prettier default for trailing commas, run Prettier on repo

Browse Source 
per convo with @claviska
This commit is contained in:
Lea Verou
2024-12-14 17:08:29 -05:00
parent b5d1a71f46
commit b0c4c7263b
151 changed files with 503 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
custom-elements-manifest.js
View File

@@ -28,7 +28,7 @@ export default {
name: 'wa-package-data', name: 'wa-package-data',
packageLinkPhase({ customElementsManifest }) { packageLinkPhase({ customElementsManifest }) {
customElementsManifest.package = { name, description, version, author, homepage, license }; customElementsManifest.package = { name, description, version, author, homepage, license };
} },
}, },
// Parse custom jsDoc tags // Parse custom jsDoc tags
@@ -83,13 +83,13 @@ export default {
classDoc[t.tag].push({ classDoc[t.tag].push({
name: t.name, name: t.name,
description: t.description, description: t.description,
type: t.type || undefined type: t.type || undefined,
}); });
} }
}); });
} }
} }
} },
}, },
{ {
@@ -109,7 +109,7 @@ export default {
} }
} }
} }
} },
}, },
{ {
@@ -127,7 +127,7 @@ export default {
// //
const terms = [ const terms = [
{ from: /^src\//, to: '' }, // Strip the src/ prefix { from: /^src\//, to: '' }, // Strip the src/ prefix
{ from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
]; ];
mod.path = replace(mod.path, terms); mod.path = replace(mod.path, terms);
@@ -146,7 +146,7 @@ export default {
} }
} }
}); });
} },
}, },
// Generate custom VS Code data // Generate custom VS Code data
@@ -156,9 +156,9 @@ export default {
referencesTemplate: (_, tag) => [ referencesTemplate: (_, tag) => [
{ {
name: 'Documentation', name: 'Documentation',
url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}` url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
} },
] ],
}), }),
customElementJetBrainsPlugin({ customElementJetBrainsPlugin({
@@ -168,10 +168,10 @@ export default {
referencesTemplate: (_, tag) => { referencesTemplate: (_, tag) => {
return { return {
name: 'Documentation', name: 'Documentation',
url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}` url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
}; };
} },
}) }),
// //
// TODO - figure out why this broke when events were updated // TODO - figure out why this broke when events were updated
@@ -181,5 +181,5 @@ export default {
// fileName: 'index.d.ts', // fileName: 'index.d.ts',
// componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js` // componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
// }) // })
] ],
}; };

24
docs/.eleventy.js
View File

@@ -71,8 +71,8 @@ export default function (eleventyConfig) {
selector: 'h2, h3', selector: 'h2, h3',
ifEmpty: doc => { ifEmpty: doc => {
doc.querySelector('#outline')?.remove(); doc.querySelector('#outline')?.remove();
} },
}) }),
); );
// Add current link classes // Add current link classes
@@ -93,19 +93,19 @@ export default function (eleventyConfig) {
// Replace [issue:1234] with a link to the issue on GitHub // Replace [issue:1234] with a link to the issue on GitHub
{ {
replace: /\[pr:([0-9]+)\]/gs, replace: /\[pr:([0-9]+)\]/gs,
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>' replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
}, },
// Replace [pr:1234] with a link to the pull request on GitHub // Replace [pr:1234] with a link to the pull request on GitHub
{ {
replace: /\[issue:([0-9]+)\]/gs, replace: /\[issue:([0-9]+)\]/gs,
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>' replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
}, },
// Replace [discuss:1234] with a link to the discussion on GitHub // Replace [discuss:1234] with a link to the discussion on GitHub
{ {
replace: /\[discuss:([0-9]+)\]/gs, replace: /\[discuss:([0-9]+)\]/gs,
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>' replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
} },
]) ]),
); );
const omittedModules = []; const omittedModules = [];
@@ -124,7 +124,7 @@ export default function (eleventyConfig) {
eleventyConfig.addPlugin(litPlugin, { eleventyConfig.addPlugin(litPlugin, {
mode: 'worker', mode: 'worker',
componentModules componentModules,
}); });
// Build the search index // Build the search index
@@ -132,8 +132,8 @@ export default function (eleventyConfig) {
searchPlugin({ searchPlugin({
filename: '', filename: '',
selectorsToIgnore: ['code.example'], selectorsToIgnore: ['code.example'],
getContent: doc => doc.querySelector('#content')?.textContent ?? '' getContent: doc => doc.querySelector('#content')?.textContent ?? '',
}) }),
); );
// Production-only plugins // Production-only plugins
@@ -149,8 +149,8 @@ export default function (eleventyConfig) {
markdownTemplateEngine: 'njk', markdownTemplateEngine: 'njk',
dir: { dir: {
includes: '_includes', includes: '_includes',
layouts: '_layouts' layouts: '_layouts',
}, },
templateFormats: ['njk', 'md'] templateFormats: ['njk', 'md'],
}; };
} }

2
docs/_data/componentList.js
View File

@@ -36,7 +36,7 @@ const components = manifest.modules.flatMap(module => {
slug: declaration.tagName.replace(/^wa-/, ''), slug: declaration.tagName.replace(/^wa-/, ''),
methods, methods,
attributes, attributes,
properties properties,
}; };
}); });
}); });

2
docs/_data/componentsBy.js
View File

@@ -6,7 +6,7 @@ const by = {
event: {}, event: {},
method: {}, method: {},
cssPart: {}, cssPart: {},
cssProperty: {} cssProperty: {},
}; };
function getAll(component, type) { function getAll(component, type) {

4
docs/_utils/anchor-headings.js
View File

@@ -5,7 +5,7 @@ import { v4 as uuid } from 'uuid';
function createId(text) { function createId(text) {
let slug = slugify(String(text), { let slug = slugify(String(text), {
remove: /[^\w|\s]/g, remove: /[^\w|\s]/g,
lower: true lower: true,
}); });
// ids must start with a letter // ids must start with a letter
@@ -24,7 +24,7 @@ export function anchorHeadingsPlugin(options = {}) {
container: 'body', container: 'body',
headingSelector: 'h2, h3, h4, h5, h6', headingSelector: 'h2, h3, h4, h5, h6',
anchorLabel: 'Jump to heading', anchorLabel: 'Jump to heading',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

12
docs/_utils/code-examples.js
View File

@@ -53,7 +53,7 @@ const templates = {
attributes = { attributes = {
open, open,
include: `link[rel=stylesheet][href^='/dist/']`, include: `link[rel=stylesheet][href^='/dist/']`,
...attributes ...attributes,
}; };
const attributesString = Object.entries(attributes) const attributesString = Object.entries(attributes)
@@ -93,7 +93,7 @@ const templates = {
${pre.outerHTML} ${pre.outerHTML}
</wa-code-demo> </wa-code-demo>
`; `;
} },
}; };
/** /**
@@ -107,13 +107,13 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
outputPathIndex === 1 && // is first outputPathIndex === 1 && // is first
code.textContent.length < 500 code.textContent.length < 500
); // is short ); // is short
} },
}; };
options = { ...defaultOptions, ...options }; options = { ...defaultOptions, ...options };
const stats = { const stats = {
inputPaths: {}, inputPaths: {},
outputPaths: {} outputPaths: {},
}; };
eleventyConfig.addTransform('code-examples', function (content) { eleventyConfig.addTransform('code-examples', function (content) {
@@ -144,7 +144,7 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
edit: true, edit: true,
buttons: true, buttons: true,
new: true, // comment this line to default back to the old demos new: true, // comment this line to default back to the old demos
attributes: {} attributes: {},
}; };
for (const prop of ['new', 'open', 'buttons', 'edit']) { for (const prop of ['new', 'open', 'buttons', 'edit']) {
@@ -174,7 +174,7 @@ export function codeExamplesPlugin(eleventyConfig, options = {}) {
localOptions.open = localOptions.defaultOpen(code, { localOptions.open = localOptions.defaultOpen(code, {
pre, pre,
inputPathIndex: stats.inputPaths[inputPath], inputPathIndex: stats.inputPaths[inputPath],
outputPathIndex: stats.outputPaths[outputPath] outputPathIndex: stats.outputPaths[outputPath],
}); });
} }
} }

2
docs/_utils/copy-code.js
View File

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
export function copyCodePlugin(options = {}) { export function copyCodePlugin(options = {}) {
options = { options = {
container: 'body', container: 'body',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

2
docs/_utils/current-link.js
View File

@@ -28,7 +28,7 @@ export function currentLink(options = {}) {
options = { options = {
container: 'body', container: 'body',
className: 'current', className: 'current',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

4
docs/_utils/format-code.js
View File

@@ -11,7 +11,7 @@ import defaultOptions from '../../prettier.config.js';
export async function formatCode(string, options) { export async function formatCode(string, options) {
return await format(string, { return await format(string, {
...defaultOptions, ...defaultOptions,
...options ...options,
}); });
} }
@@ -21,7 +21,7 @@ export async function formatCode(string, options) {
export function formatCodePlugin(options = {}) { export function formatCodePlugin(options = {}) {
options = { options = {
parser: 'html', parser: 'html',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

2
docs/_utils/highlight-code.js
View File

@@ -40,7 +40,7 @@ export function highlightCode(code, language = 'plain') {
export function highlightCodePlugin(options = {}) { export function highlightCodePlugin(options = {}) {
options = { options = {
container: 'body', container: 'body',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

10
docs/_utils/markdown.js
View File

@@ -14,7 +14,7 @@ export const markdown = MarkdownIt({
breaks: false, breaks: false,
langPrefix: 'language-', langPrefix: 'language-',
linkify: false, linkify: false,
typographer: false typographer: false,
}); });
markdown.use(markdownItIns); markdown.use(markdownItIns);
@@ -34,7 +34,7 @@ markdown.use(markdownItMark);
`; `;
} }
return '</div></div>\n'; return '</div></div>\n';
} },
}); });
}); });
@@ -44,7 +44,7 @@ markdown.use(markdownItContainer, 'aside', {
return `<aside>`; return `<aside>`;
} }
return '</aside>\n'; return '</aside>\n';
} },
}); });
markdown.use(markdownItContainer, 'details', { markdown.use(markdownItContainer, 'details', {
@@ -55,9 +55,9 @@ markdown.use(markdownItContainer, 'details', {
return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`; return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
} }
return '</details>\n'; return '</details>\n';
} },
}); });
markdown.use(markdownItAttrs, { markdown.use(markdownItAttrs, {
allowedAttributes: [] allowedAttributes: [],
}); });

2
docs/_utils/outline.js
View File

@@ -15,7 +15,7 @@ export function outlinePlugin(options = {}) {
target: '.outline', target: '.outline',
selector: 'h2,h3', selector: 'h2,h3',
ifEmpty: () => null, ifEmpty: () => null,
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

2
docs/_utils/remove-data-alpha-elements.js
View File

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
export function removeDataAlphaElements(options = {}) { export function removeDataAlphaElements(options = {}) {
options = { options = {
isAlpha: false, isAlpha: false,
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {

8
docs/_utils/search.js
View File

@@ -19,7 +19,7 @@ export function searchPlugin(options = {}) {
getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '', getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''), getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
getContent: doc => doc.querySelector('body')?.textContent ?? '', getContent: doc => doc.querySelector('body')?.textContent ?? '',
...options ...options,
}; };
return function (eleventyConfig) { return function (eleventyConfig) {
@@ -32,8 +32,8 @@ export function searchPlugin(options = {}) {
noscript: false, noscript: false,
style: false, style: false,
pre: false, pre: false,
code: false code: false,
} },
}); });
// Remove content that shouldn't be searchable to reduce the index size // Remove content that shouldn't be searchable to reduce the index size
@@ -46,7 +46,7 @@ export function searchPlugin(options = {}) {
description: collapseWhitespace(options.getDescription(doc)), description: collapseWhitespace(options.getDescription(doc)),
headings: options.getHeadings(doc).map(collapseWhitespace), headings: options.getHeadings(doc).map(collapseWhitespace),
content: collapseWhitespace(options.getContent(doc)), content: collapseWhitespace(options.getContent(doc)),
url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '') url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, ''),
}); });
return content; return content;

2
docs/assets/scripts/cheatsheet.js
View File

@@ -13,7 +13,7 @@ const matchers = {
regexp(textContent, query) { regexp(textContent, query) {
query.lastIndex = 0; query.lastIndex = 0;
return query.test(textContent); return query.test(textContent);
} },
}; };
matchers.iregexp = matchers.regexp; // i is baked into the query matchers.iregexp = matchers.regexp; // i is baked into the query

2
docs/assets/scripts/code-examples.js
View File

@@ -43,7 +43,7 @@ document.addEventListener('click', event => {
js_pre_processor: 'none', js_pre_processor: 'none',
html, html,
css, css,
js js,
}; };
const input = document.createElement('input'); const input = document.createElement('input');

6
docs/assets/scripts/hydration-errors.js
View File

@@ -79,8 +79,8 @@
diffViewer.appendChild( diffViewer.appendChild(
createDiff({ createDiff({
serverHTML, serverHTML,
clientHTML clientHTML,
}) }),
); );
}); });
} }
@@ -88,7 +88,7 @@
function createDiff({ serverHTML, clientHTML }) { function createDiff({ serverHTML, clientHTML }) {
const diff = diffLines(serverHTML, clientHTML, { const diff = diffLines(serverHTML, clientHTML, {
ignoreWhitespace: false, ignoreWhitespace: false,
newLineIsToken: true newLineIsToken: true,
}); });
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
for (var i = 0; i < diff.length; i++) { for (var i = 0; i < diff.length; i++) {

4
docs/assets/scripts/preset-theme.js
View File

@@ -11,7 +11,7 @@
const newStylesheet = Object.assign(document.createElement('link'), { const newStylesheet = Object.assign(document.createElement('link'), {
href: `/dist/styles/themes/${presetTheme}.css`, href: `/dist/styles/themes/${presetTheme}.css`,
rel: 'preload', rel: 'preload',
as: 'style' as: 'style',
}); });
newStylesheet.addEventListener( newStylesheet.addEventListener(
@@ -23,7 +23,7 @@
stylesheet.remove(); stylesheet.remove();
}); });
}, },
{ once: true } { once: true },
); );
document.head.append(newStylesheet); document.head.append(newStylesheet);

2
docs/assets/scripts/scroll.js
View File

@@ -15,7 +15,7 @@ document.addEventListener('click', event => {
event.preventDefault(); event.preventDefault();
window.scroll({ window.scroll({
top: target.offsetTop - headerHeight, top: target.offsetTop - headerHeight,
behavior: 'smooth' behavior: 'smooth',
}); });
history.pushState(undefined, undefined, `#${id}`); history.pushState(undefined, undefined, `#${id}`);
} }

4
docs/assets/scripts/search.js
View File

@@ -9,7 +9,7 @@ const icons = {
component: 'puzzle-piece', component: 'puzzle-piece',
document: 'file', document: 'file',
home: 'house', home: 'house',
theme: 'palette' theme: 'palette',
}; };
let searchTimeout; let searchTimeout;
@@ -18,7 +18,7 @@ function getElements() {
return { return {
dialog: document.getElementById('site-search'), dialog: document.getElementById('site-search'),
input: document.getElementById('site-search-input'), input: document.getElementById('site-search-input'),
results: document.getElementById('site-search-listbox') results: document.getElementById('site-search-listbox'),
}; };
} }

2
docs/assets/scripts/turbo.js
View File

@@ -9,7 +9,7 @@ function saveScrollPosition() {
if (element.id) { if (element.id) {
positions[element.id] = { positions[element.id] = {
top: element.scrollTop, top: element.scrollTop,
left: element.scrollLeft left: element.scrollLeft,
}; };
} else { } else {
console.warn(`Can't save scroll position for elements without an id.`, el); console.warn(`Can't save scroll position for elements without an id.`, el);

2
lint-staged.config.js
View File

@@ -1,5 +1,5 @@
export default { export default {
'*.{js,ts,json,html,xml,css,scss,sass,md}': 'cspell --no-must-find-files', '*.{js,ts,json,html,xml,css,scss,sass,md}': 'cspell --no-must-find-files',
'src/**/*.{js,ts}': 'eslint --max-warnings 0 --fix', 'src/**/*.{js,ts}': 'eslint --max-warnings 0 --fix',
'*': 'prettier --write --ignore-unknown' '*': 'prettier --write --ignore-unknown',
}; };

3
prettier.config.js
View File

@@ -13,10 +13,9 @@ const config = {
semi: true, semi: true,
singleQuote: true, singleQuote: true,
tabWidth: 2, tabWidth: 2,
trailingComma: 'none',
useTabs: false, useTabs: false,
organizeImportsSkipDestructiveCodeActions: true, organizeImportsSkipDestructiveCodeActions: true,
plugins: ['prettier-plugin-organize-imports'] plugins: ['prettier-plugin-organize-imports'],
}; };
export default config; export default config;

30
scripts/build.js
View File

@@ -23,7 +23,7 @@ const packageData = JSON.parse(await readFile(join(rootDir, 'package.json'), 'ut
const version = JSON.stringify(packageData.version.toString()); const version = JSON.stringify(packageData.version.toString());
let buildContexts = { let buildContexts = {
bundledContext: {}, bundledContext: {},
unbundledContext: {} unbundledContext: {},
}; };
/** /**
@@ -112,15 +112,15 @@ async function generateStyles() {
'themes/default.css', 'themes/default.css',
'forms.css', 'forms.css',
'utilities', 'utilities',
'utilities.css' 'utilities.css',
]; ];
await Promise.all( await Promise.all(
alphaStyles.map(file => alphaStyles.map(file =>
copy(join(rootDir, `src/styles/${file}`), join(cdnDir, `styles/${file}.css`), { copy(join(rootDir, `src/styles/${file}`), join(cdnDir, `styles/${file}.css`), {
overwrite: true overwrite: true,
}) }),
) ),
); );
} else { } else {
await copy(join(rootDir, 'src/styles'), join(cdnDir, 'styles'), { overwrite: true }); await copy(join(rootDir, 'src/styles'), join(cdnDir, 'styles'), { overwrite: true });
@@ -172,20 +172,20 @@ async function generateBundle() {
// Translations // Translations
...(await globby('./src/translations/**/*.ts')), ...(await globby('./src/translations/**/*.ts')),
// React wrappers // React wrappers
...(await globby('./src/react/**/*.ts')) ...(await globby('./src/react/**/*.ts')),
], ],
outdir: cdnDir, outdir: cdnDir,
chunkNames: 'chunks/[name].[hash]', chunkNames: 'chunks/[name].[hash]',
define: { define: {
'process.env.NODE_ENV': '"production"' // required by Floating UI 'process.env.NODE_ENV': '"production"', // required by Floating UI
}, },
bundle: true, bundle: true,
splitting: true, splitting: true,
minify: false, minify: false,
plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()], plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()],
loader: { loader: {
'.css': 'text' '.css': 'text',
} },
}; };
const unbundledConfig = { const unbundledConfig = {
@@ -194,7 +194,7 @@ async function generateBundle() {
treeShaking: true, treeShaking: true,
// Don't inline libraries like Lit etc. // Don't inline libraries like Lit etc.
packages: 'external', packages: 'external',
outdir: distDir outdir: distDir,
}; };
try { try {
@@ -297,8 +297,8 @@ if (isDeveloping) {
server: { server: {
baseDir: siteDir, baseDir: siteDir,
routes: { routes: {
'/dist/': './dist-cdn/' '/dist/': './dist-cdn/',
} },
}, },
callbacks: { callbacks: {
ready: (_err, instance) => { ready: (_err, instance) => {
@@ -319,13 +319,13 @@ if (isDeveloping) {
res.end(); res.end();
}); });
} },
} },
}, },
() => { () => {
spinner.succeed(); spinner.succeed();
console.log(`\nThe dev server is running at ${chalk.cyan(url)}\n`); console.log(`\nThe dev server is running at ${chalk.cyan(url)}\n`);
} },
); );
// Rebuild and reload when source files change // Rebuild and reload when source files change

2
scripts/docs.js
View File

@@ -5,7 +5,7 @@ import { docsDir, siteDir } from './utils.js';
const elev = new Eleventy(docsDir, siteDir, { const elev = new Eleventy(docsDir, siteDir, {
quietMode: true, quietMode: true,
configPath: join(docsDir, '.eleventy.js') configPath: join(docsDir, '.eleventy.js'),
}); });
// Cleanup // Cleanup

4
scripts/make-react.js
View File

@@ -65,8 +65,8 @@ for await (const component of components) {
export default reactWrapper export default reactWrapper
`, `,
Object.assign(prettierConfig, { Object.assign(prettierConfig, {
parser: 'babel-ts' parser: 'babel-ts',
}) }),
); );
index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`); index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);

16
scripts/plop/plopfile.js
View File

@@ -26,30 +26,30 @@ export default function (plop) {
} }
return true; return true;
} },
} },
], ],
actions: [ actions: [
{ {
type: 'add', type: 'add',
path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts', path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts',
templateFile: 'templates/component/component.hbs' templateFile: 'templates/component/component.hbs',
}, },
{ {
type: 'add', type: 'add',
path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts', path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts',
templateFile: 'templates/component/styles.hbs' templateFile: 'templates/component/styles.hbs',
}, },
{ {
type: 'add', type: 'add',
path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.test.ts', path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.test.ts',
templateFile: 'templates/component/tests.hbs' templateFile: 'templates/component/tests.hbs',
}, },
{ {
type: 'add', type: 'add',
path: '../../docs/docs/components/{{ tagWithoutPrefix tag }}.md', path: '../../docs/docs/components/{{ tagWithoutPrefix tag }}.md',
templateFile: 'templates/component/docs.hbs' templateFile: 'templates/component/docs.hbs',
} },
] ],
}); });
} }

18
src/components/animation/animation.test.ts
View File

@@ -14,7 +14,7 @@ describe('<wa-animation>', () => {
describe(`with "${fixture.type}" rendering`, () => { describe(`with "${fixture.type}" rendering`, () => {
it('renders', async () => { it('renders', async () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>` html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`,
); );
expect(animationContainer).to.exist; expect(animationContainer).to.exist;
@@ -22,7 +22,7 @@ describe('<wa-animation>', () => {
it('is accessible', async () => { it('is accessible', async () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>` html`<wa-animation>${unsafeHTML(boxToAnimate)}</wa-animation>`,
); );
await expect(animationContainer).to.be.accessible(); await expect(animationContainer).to.be.accessible();
@@ -33,7 +33,7 @@ describe('<wa-animation>', () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation name="bounce" easing="ease-in-out" duration="10" html`<wa-animation name="bounce" easing="ease-in-out" duration="10"
>${unsafeHTML(boxToAnimate)}</wa-animation >${unsafeHTML(boxToAnimate)}</wa-animation
>` >`,
); );
await aTimeout(0); await aTimeout(0);
@@ -44,7 +44,7 @@ describe('<wa-animation>', () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation name="bounce" easing="ease-in-out" duration="10" html`<wa-animation name="bounce" easing="ease-in-out" duration="10"
>${unsafeHTML(boxToAnimate)}</wa-animation >${unsafeHTML(boxToAnimate)}</wa-animation
>` >`,
); );
const startPromise = oneEvent(animationContainer, 'wa-start'); const startPromise = oneEvent(animationContainer, 'wa-start');
@@ -56,7 +56,9 @@ describe('<wa-animation>', () => {
it('emits the correct event on animation end', async () => { it('emits the correct event on animation end', async () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation name="bounce" easing="ease-in-out" duration="1">${unsafeHTML(boxToAnimate)}</wa-animation>` html`<wa-animation name="bounce" easing="ease-in-out" duration="1"
>${unsafeHTML(boxToAnimate)}</wa-animation
>`,
); );
const endPromise = oneEvent(animationContainer, 'wa-finish'); const endPromise = oneEvent(animationContainer, 'wa-finish');
@@ -69,7 +71,7 @@ describe('<wa-animation>', () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation name="bounce" easing="ease-in-out" duration="1000" html`<wa-animation name="bounce" easing="ease-in-out" duration="1000"
>${unsafeHTML(boxToAnimate)}</wa-animation >${unsafeHTML(boxToAnimate)}</wa-animation
>` >`,
); );
const endPromise = oneEvent(animationContainer, 'wa-finish'); const endPromise = oneEvent(animationContainer, 'wa-finish');
@@ -84,7 +86,9 @@ describe('<wa-animation>', () => {
it('can be cancelled', async () => { it('can be cancelled', async () => {
const animationContainer = await fixture<WaAnimation>( const animationContainer = await fixture<WaAnimation>(
html`<wa-animation name="bounce" easing="ease-in-out" duration="1">${unsafeHTML(boxToAnimate)}</wa-animation>` html`<wa-animation name="bounce" easing="ease-in-out" duration="1"
>${unsafeHTML(boxToAnimate)}</wa-animation
>`,
); );
let animationHasFinished = false; let animationHasFinished = false;
oneEvent(animationContainer, 'wa-finish').then(() => (animationHasFinished = true)); oneEvent(animationContainer, 'wa-finish').then(() => (animationHasFinished = true));

4
src/components/animation/animation.ts
View File

@@ -136,7 +136,7 @@ export default class WaAnimation extends WebAwesomeElement {
endDelay: this.endDelay, endDelay: this.endDelay,
fill: this.fill, fill: this.fill,
iterationStart: this.iterationStart, iterationStart: this.iterationStart,
iterations: this.iterations iterations: this.iterations,
}); });
this.animation.playbackRate = this.playbackRate; this.animation.playbackRate = this.playbackRate;
this.animation.addEventListener('cancel', this.handleAnimationCancel); this.animation.addEventListener('cancel', this.handleAnimationCancel);
@@ -171,7 +171,7 @@ export default class WaAnimation extends WebAwesomeElement {
'fill', 'fill',
'iterations', 'iterations',
'iterationsStart', 'iterationsStart',
'keyframes' 'keyframes',
]) ])
handleAnimationChange() { handleAnimationChange() {
if (!this.hasUpdated) { if (!this.hasUpdated) {

4
src/components/avatar/avatar.test.ts
View File

@@ -82,7 +82,7 @@ describe('<wa-avatar>', () => {
const label = 'Small transparent square'; const label = 'Small transparent square';
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaAvatar>( el = await fixture<WaAvatar>(
html`<wa-avatar image="${image}" label="${label}" initials="${initials}"></wa-avatar>` html`<wa-avatar image="${image}" label="${label}" initials="${initials}"></wa-avatar>`,
); );
}); });
@@ -138,7 +138,7 @@ describe('<wa-avatar>', () => {
describe('when passed a <span>, on slot "icon"', () => { describe('when passed a <span>, on slot "icon"', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaAvatar>( el = await fixture<WaAvatar>(
html`<wa-avatar label="Avatar"><span slot="icon">random content</span></wa-avatar>` html`<wa-avatar label="Avatar"><span slot="icon">random content</span></wa-avatar>`,
); );
}); });

2
src/components/avatar/avatar.ts
View File

@@ -94,7 +94,7 @@ export default class WaAvatar extends WebAwesomeElement {
avatar: true, avatar: true,
'avatar--circle': this.shape === 'circle', 'avatar--circle': this.shape === 'circle',
'avatar--rounded': this.shape === 'rounded', 'avatar--rounded': this.shape === 'rounded',
'avatar--square': this.shape === 'square' 'avatar--square': this.shape === 'square',
})} })}
role="img" role="img"
aria-label=${this.label} aria-label=${this.label}

2
src/components/badge/badge.ts
View File

@@ -46,7 +46,7 @@ export default class WaBadge extends WebAwesomeElement {
'badge--warning': this.variant === 'warning', 'badge--warning': this.variant === 'warning',
'badge--danger': this.variant === 'danger', 'badge--danger': this.variant === 'danger',
'badge--pill': this.pill, 'badge--pill': this.pill,
'badge--pulse': this.pulse 'badge--pulse': this.pulse,
})} })}
role="status" role="status"
> >

2
src/components/breadcrumb/breadcrumb.ts
View File

@@ -50,7 +50,7 @@ export default class WaBreadcrumb extends WebAwesomeElement {
private handleSlotChange() { private handleSlotChange() {
const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter( const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
item => item.tagName.toLowerCase() === 'wa-breadcrumb-item' item => item.tagName.toLowerCase() === 'wa-breadcrumb-item',
) as WaBreadcrumbItem[]; ) as WaBreadcrumbItem[];
items.forEach((item, index) => { items.forEach((item, index) => {

2
src/components/button-group/button-group.test.ts
View File

@@ -41,7 +41,7 @@ describe('<wa-button-group>', () => {
const allButtons = group.querySelectorAll('wa-button'); const allButtons = group.querySelectorAll('wa-button');
const hasGroupClass = Array.from(allButtons).every(button => const hasGroupClass = Array.from(allButtons).every(button =>
button.classList.contains('wa-button-group__button') button.classList.contains('wa-button-group__button'),
); );
expect(hasGroupClass).to.be.true; expect(hasGroupClass).to.be.true;

8
src/components/button/button.test.ts
View File

@@ -14,7 +14,7 @@ describe('<wa-button>', () => {
init: (control: WaButton) => { init: (control: WaButton) => {
control.type = 'button'; control.type = 'button';
} },
}); });
runFormControlBaseTests({ runFormControlBaseTests({
tagName: 'wa-button', tagName: 'wa-button',
@@ -22,7 +22,7 @@ describe('<wa-button>', () => {
init: (control: WaButton) => { init: (control: WaButton) => {
control.type = 'submit'; control.type = 'submit';
} },
}); });
runFormControlBaseTests({ runFormControlBaseTests({
tagName: 'wa-button', tagName: 'wa-button',
@@ -30,7 +30,7 @@ describe('<wa-button>', () => {
init: (control: WaButton) => { init: (control: WaButton) => {
control.href = 'some-url'; control.href = 'some-url';
} },
}); });
for (const fixture of fixtures) { for (const fixture of fixtures) {
@@ -282,7 +282,7 @@ describe('<wa-button>', () => {
html`<form> html`<form>
<wa-button type="submit" name="btn-1" value="value-1">Button 1</wa-button> <wa-button type="submit" name="btn-1" value="value-1">Button 1</wa-button>
<wa-button type="submit" name="btn-2" value="value-2">Button 2</wa-button> <wa-button type="submit" name="btn-2" value="value-2">Button 2</wa-button>
</form>` </form>`,
); );
let formData = new FormData(form); let formData = new FormData(form);

2
src/components/button/button.ts
View File

@@ -264,7 +264,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'button--text': this.appearance === 'text', 'button--text': this.appearance === 'text',
'button--pill': this.pill, 'button--pill': this.pill,
'button--rtl': this.localize.dir() === 'rtl', 'button--rtl': this.localize.dir() === 'rtl',
'button--visually-hidden-label': this.visuallyHiddenLabel 'button--visually-hidden-label': this.visuallyHiddenLabel,
})} })}
?disabled=${ifDefined(isLink ? undefined : this.disabled)} ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : this.type)} type=${ifDefined(isLink ? undefined : this.type)}

32
src/components/card/card.test.ts
View File

@@ -12,7 +12,7 @@ describe('<wa-card>', () => {
<wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card> <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
`); `);
expect(el.innerText).to.eq( expect(el.innerText).to.eq(
'This is just a basic card. No image, no header, and no footer. Just your content.' 'This is just a basic card. No image, no header, and no footer. Just your content.',
); );
}); });
@@ -38,7 +38,7 @@ describe('<wa-card>', () => {
html`<wa-card with-header> html`<wa-card with-header>
<div slot="header">Header Title</div> <div slot="header">Header Title</div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</wa-card>` </wa-card>`,
); );
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@@ -48,7 +48,7 @@ describe('<wa-card>', () => {
html`<wa-card with-header> html`<wa-card with-header>
<div slot="header">Header Title</div> <div slot="header">Header Title</div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</wa-card>` </wa-card>`,
); );
expect(el.innerText).to.contain('This card has a header. You can put all sorts of things in it!'); expect(el.innerText).to.contain('This card has a header. You can put all sorts of things in it!');
}); });
@@ -58,7 +58,7 @@ describe('<wa-card>', () => {
html`<wa-card with-header> html`<wa-card with-header>
<div slot="header">Header Title</div> <div slot="header">Header Title</div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</wa-card>` </wa-card>`,
); );
const header = el.querySelector<HTMLElement>('div[slot=header]')!; const header = el.querySelector<HTMLElement>('div[slot=header]')!;
expect(header.innerText).eq('Header Title'); expect(header.innerText).eq('Header Title');
@@ -69,7 +69,7 @@ describe('<wa-card>', () => {
html`<wa-card with-header> html`<wa-card with-header>
<div slot="header">Header Title</div> <div slot="header">Header Title</div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</wa-card>` </wa-card>`,
); );
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=header]')!; const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=header]')!;
const childNodes = slot.assignedNodes({ flatten: true }); const childNodes = slot.assignedNodes({ flatten: true });
@@ -82,7 +82,7 @@ describe('<wa-card>', () => {
html`<wa-card with-header> html`<wa-card with-header>
<div slot="header">Header Title</div> <div slot="header">Header Title</div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</wa-card>` </wa-card>`,
); );
const card = el.shadowRoot!.querySelector('.card')!; const card = el.shadowRoot!.querySelector('.card')!;
expect(card.classList.value.trim()).to.eq('card card--has-header'); expect(card.classList.value.trim()).to.eq('card card--has-header');
@@ -96,7 +96,7 @@ describe('<wa-card>', () => {
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer">Footer Content</div> <div slot="footer">Footer Content</div>
</wa-card>` </wa-card>`,
); );
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@@ -107,7 +107,7 @@ describe('<wa-card>', () => {
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer">Footer Content</div> <div slot="footer">Footer Content</div>
</wa-card>` </wa-card>`,
); );
expect(el.innerText).to.contain('This card has a footer. You can put all sorts of things in it!'); expect(el.innerText).to.contain('This card has a footer. You can put all sorts of things in it!');
}); });
@@ -118,7 +118,7 @@ describe('<wa-card>', () => {
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer">Footer Content</div> <div slot="footer">Footer Content</div>
</wa-card>` </wa-card>`,
); );
const footer = el.querySelector<HTMLElement>('div[slot=footer]')!; const footer = el.querySelector<HTMLElement>('div[slot=footer]')!;
expect(footer.innerText).eq('Footer Content'); expect(footer.innerText).eq('Footer Content');
@@ -130,7 +130,7 @@ describe('<wa-card>', () => {
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer">Footer Content</div> <div slot="footer">Footer Content</div>
</wa-card>` </wa-card>`,
); );
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=footer]')!; const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=footer]')!;
const childNodes = slot.assignedNodes({ flatten: true }); const childNodes = slot.assignedNodes({ flatten: true });
@@ -144,7 +144,7 @@ describe('<wa-card>', () => {
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer">Footer Content</div> <div slot="footer">Footer Content</div>
</wa-card>` </wa-card>`,
); );
const card = el.shadowRoot!.querySelector('.card')!; const card = el.shadowRoot!.querySelector('.card')!;
@@ -162,7 +162,7 @@ describe('<wa-card>', () => {
alt="A kitten walks towards camera on top of pallet." alt="A kitten walks towards camera on top of pallet."
/> />
This is a kitten, but not just any kitten. This kitten likes walking along pallets. This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>` </wa-card>`,
); );
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
@@ -177,11 +177,11 @@ describe('<wa-card>', () => {
alt="A kitten walks towards camera on top of pallet." alt="A kitten walks towards camera on top of pallet."
/> />
This is a kitten, but not just any kitten. This kitten likes walking along pallets. This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>` </wa-card>`,
); );
expect(el.innerText).to.contain( expect(el.innerText).to.contain(
'This is a kitten, but not just any kitten. This kitten likes walking along pallets.' 'This is a kitten, but not just any kitten. This kitten likes walking along pallets.',
); );
}); });
@@ -194,7 +194,7 @@ describe('<wa-card>', () => {
alt="A kitten walks towards camera on top of pallet." alt="A kitten walks towards camera on top of pallet."
/> />
This is a kitten, but not just any kitten. This kitten likes walking along pallets. This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>` </wa-card>`,
); );
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=image]')!; const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=image]')!;
const childNodes = slot.assignedNodes({ flatten: true }); const childNodes = slot.assignedNodes({ flatten: true });
@@ -211,7 +211,7 @@ describe('<wa-card>', () => {
alt="A kitten walks towards camera on top of pallet." alt="A kitten walks towards camera on top of pallet."
/> />
This is a kitten, but not just any kitten. This kitten likes walking along pallets. This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</wa-card>` </wa-card>`,
); );
const card = el.shadowRoot!.querySelector('.card')!; const card = el.shadowRoot!.querySelector('.card')!;

2
src/components/card/card.ts
View File

@@ -50,7 +50,7 @@ export default class WaCard extends WebAwesomeElement {
card: true, card: true,
'card--has-footer': this.withFooter, 'card--has-footer': this.withFooter,
'card--has-image': this.withImage, 'card--has-image': this.withImage,
'card--has-header': this.withHeader 'card--has-header': this.withHeader,
})} })}
> >
<slot name="image" part="image" class="card__image"></slot> <slot name="image" part="image" class="card__image"></slot>

10
src/components/carousel/carousel.test.ts
View File

@@ -63,7 +63,7 @@ describe('<wa-carousel>', () => {
beforeEach(() => { beforeEach(() => {
clock = sandbox.useFakeTimers({ clock = sandbox.useFakeTimers({
now: new Date() now: new Date(),
}); });
}); });
@@ -262,7 +262,7 @@ describe('<wa-carousel>', () => {
[10, 2, 2, false, 5], [10, 2, 2, false, 5],
[7, 2, 1, true, 7], [7, 2, 1, true, 7],
[5, 3, 3, true, 2], [5, 3, 3, true, 2],
[10, 2, 2, true, 5] [10, 2, 2, true, 5],
].forEach( ].forEach(
([slides, slidesPerPage, slidesPerMove, loop, expected]: [number, number, number, boolean, number]) => { ([slides, slidesPerPage, slidesPerMove, loop, expected]: [number, number, number, boolean, number]) => {
it(`should display ${expected} pages for ${slides} slides grouped by ${slidesPerPage} and scrolled by ${slidesPerMove}${ it(`should display ${expected} pages for ${slides} slides grouped by ${slidesPerPage} and scrolled by ${slidesPerMove}${
@@ -285,7 +285,7 @@ describe('<wa-carousel>', () => {
const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item'); const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
expect(paginationItems.length).to.equal(expected); expect(paginationItems.length).to.equal(expected);
}); });
} },
); );
}); });
@@ -622,7 +622,7 @@ describe('<wa-carousel>', () => {
`); `);
const previousButton: HTMLElement = el.shadowRoot!.querySelector( const previousButton: HTMLElement = el.shadowRoot!.querySelector(
'.carousel__navigation-button--previous' '.carousel__navigation-button--previous',
)!; )!;
sandbox.stub(el, 'previous'); sandbox.stub(el, 'previous');
await el.updateComplete; await el.updateComplete;
@@ -648,7 +648,7 @@ describe('<wa-carousel>', () => {
`); `);
const previousButton: HTMLElement = el.shadowRoot!.querySelector( const previousButton: HTMLElement = el.shadowRoot!.querySelector(
'.carousel__navigation-button--previous' '.carousel__navigation-button--previous',
)!; )!;
await el.updateComplete; await el.updateComplete;

34
src/components/carousel/carousel.ts
View File

@@ -119,7 +119,7 @@ export default class WaCarousel extends WebAwesomeElement {
this.mutationObserver = new MutationObserver(this.handleSlotChange); this.mutationObserver = new MutationObserver(this.handleSlotChange);
this.mutationObserver.observe(this, { this.mutationObserver.observe(this, {
childList: true, childList: true,
subtree: true subtree: true,
}); });
} }
@@ -154,7 +154,7 @@ export default class WaCarousel extends WebAwesomeElement {
/** @internal Gets all carousel items. */ /** @internal Gets all carousel items. */
private getSlides({ excludeClones = true }: { excludeClones?: boolean } = {}) { private getSlides({ excludeClones = true }: { excludeClones?: boolean } = {}) {
return [...this.children].filter( return [...this.children].filter(
(el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone')) (el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone')),
) as WaCarouselItem[]; ) as WaCarouselItem[];
} }
@@ -203,7 +203,7 @@ export default class WaCarousel extends WebAwesomeElement {
if (isFocusInPagination) { if (isFocusInPagination) {
this.updateComplete.then(() => { this.updateComplete.then(() => {
const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>( const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(
'[part~="pagination-item--active"]' '[part~="pagination-item--active"]',
); );
if (activePaginationItem) { if (activePaginationItem) {
@@ -235,7 +235,7 @@ export default class WaCarousel extends WebAwesomeElement {
this.scrollContainer.scrollBy({ this.scrollContainer.scrollBy({
left: -event.movementX, left: -event.movementX,
top: -event.movementY, top: -event.movementY,
behavior: 'instant' behavior: 'instant',
}); });
}; };
@@ -269,7 +269,7 @@ export default class WaCarousel extends WebAwesomeElement {
scrollContainer.scrollTo({ scrollContainer.scrollTo({
left: finalLeft, left: finalLeft,
top: finalTop, top: finalTop,
behavior: prefersReducedMotion() ? 'auto' : 'smooth' behavior: prefersReducedMotion() ? 'auto' : 'smooth',
}); });
await waitForEvent(scrollContainer, 'scrollend'); await waitForEvent(scrollContainer, 'scrollend');
} }
@@ -333,8 +333,8 @@ export default class WaCarousel extends WebAwesomeElement {
}, },
{ {
root: this.scrollContainer, root: this.scrollContainer,
threshold: 0.6 threshold: 0.6,
} },
); );
this.getSlides({ excludeClones: false }).forEach(slide => { this.getSlides({ excludeClones: false }).forEach(slide => {
@@ -359,8 +359,8 @@ export default class WaCarousel extends WebAwesomeElement {
private handleSlotChange = (mutations: MutationRecord[]) => { private handleSlotChange = (mutations: MutationRecord[]) => {
const needsInitialization = mutations.some(mutation => const needsInitialization = mutations.some(mutation =>
[...mutation.addedNodes, ...mutation.removedNodes].some( [...mutation.addedNodes, ...mutation.removedNodes].some(
(el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone') (el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone'),
) ),
); );
// Reinitialize the carousel if a carousel item has been added or removed // Reinitialize the carousel if a carousel item has been added or removed
@@ -430,8 +430,8 @@ export default class WaCarousel extends WebAwesomeElement {
this.dispatchEvent( this.dispatchEvent(
new WaSlideChangeEvent({ new WaSlideChangeEvent({
index: this.activeSlide, index: this.activeSlide,
slide: slides[this.activeSlide] slide: slides[this.activeSlide],
}) }),
); );
} }
} }
@@ -508,7 +508,7 @@ export default class WaCarousel extends WebAwesomeElement {
const nextSlideIndex = clamp( const nextSlideIndex = clamp(
index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0), index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0),
0, 0,
slidesWithClones.length - 1 slidesWithClones.length - 1,
); );
const nextSlide = slidesWithClones[nextSlideIndex]; const nextSlide = slidesWithClones[nextSlideIndex];
@@ -541,7 +541,7 @@ export default class WaCarousel extends WebAwesomeElement {
scrollContainer.scrollTo({ scrollContainer.scrollTo({
left: nextLeft + scrollContainer.scrollLeft, left: nextLeft + scrollContainer.scrollLeft,
top: nextTop + scrollContainer.scrollTop, top: nextTop + scrollContainer.scrollTop,
behavior behavior,
}); });
} else { } else {
this.pendingSlideChange = false; this.pendingSlideChange = false;
@@ -577,7 +577,7 @@ export default class WaCarousel extends WebAwesomeElement {
carousel__slides: true, carousel__slides: true,
'carousel__slides--horizontal': this.orientation === 'horizontal', 'carousel__slides--horizontal': this.orientation === 'horizontal',
'carousel__slides--vertical': this.orientation === 'vertical', 'carousel__slides--vertical': this.orientation === 'vertical',
'carousel__slides--dragging': this.dragging 'carousel__slides--dragging': this.dragging,
})}" })}"
style="--slides-per-page: ${this.slidesPerPage};" style="--slides-per-page: ${this.slidesPerPage};"
aria-busy="${scrolling ? 'true' : 'false'}" aria-busy="${scrolling ? 'true' : 'false'}"
@@ -600,7 +600,7 @@ export default class WaCarousel extends WebAwesomeElement {
class="${classMap({ class="${classMap({
'carousel__navigation-button': true, 'carousel__navigation-button': true,
'carousel__navigation-button--previous': true, 'carousel__navigation-button--previous': true,
'carousel__navigation-button--disabled': !prevEnabled 'carousel__navigation-button--disabled': !prevEnabled,
})}" })}"
aria-label="${this.localize.term('previousSlide')}" aria-label="${this.localize.term('previousSlide')}"
aria-controls="scroll-container" aria-controls="scroll-container"
@@ -617,7 +617,7 @@ export default class WaCarousel extends WebAwesomeElement {
class=${classMap({ class=${classMap({
'carousel__navigation-button': true, 'carousel__navigation-button': true,
'carousel__navigation-button--next': true, 'carousel__navigation-button--next': true,
'carousel__navigation-button--disabled': !nextEnabled 'carousel__navigation-button--disabled': !nextEnabled,
})} })}
aria-label="${this.localize.term('nextSlide')}" aria-label="${this.localize.term('nextSlide')}"
aria-controls="scroll-container" aria-controls="scroll-container"
@@ -641,7 +641,7 @@ export default class WaCarousel extends WebAwesomeElement {
part="pagination-item ${isActive ? 'pagination-item--active' : ''}" part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
class="${classMap({ class="${classMap({
'carousel__pagination-item': true, 'carousel__pagination-item': true,
'carousel__pagination-item--active': isActive 'carousel__pagination-item--active': isActive,
})}" })}"
role="tab" role="tab"
aria-selected="${isActive ? 'true' : 'false'}" aria-selected="${isActive ? 'true' : 'false'}"

2
src/components/carousel/scroll-controller.ts
View File

@@ -104,7 +104,7 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
handleDrag(event: PointerEvent) { handleDrag(event: PointerEvent) {
this.host.scrollContainer.scrollBy({ this.host.scrollContainer.scrollBy({
left: -event.movementX, left: -event.movementX,
top: -event.movementY top: -event.movementY,
}); });
} }

2
src/components/checkbox/checkbox.test.ts
View File

@@ -122,7 +122,7 @@ describe('<wa-checkbox>', () => {
it('Should keep its form value when going from checked -> unchecked -> checked', async () => { it('Should keep its form value when going from checked -> unchecked -> checked', async () => {
const form = await fixture<HTMLFormElement>( const form = await fixture<HTMLFormElement>(
html`<form><wa-checkbox name="test" value="myvalue" checked>Checked</wa-checkbox></form>` html`<form><wa-checkbox name="test" value="myvalue" checked>Checked</wa-checkbox></form>`,
); );
const checkbox = form.querySelector('wa-checkbox')!; const checkbox = form.querySelector('wa-checkbox')!;

8
src/components/checkbox/checkbox.ts
View File

@@ -69,9 +69,9 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
// Use a checkbox so we get "free" translation strings. // Use a checkbox so we get "free" translation strings.
validationElement: Object.assign(document.createElement('input'), { validationElement: Object.assign(document.createElement('input'), {
type: 'checkbox', type: 'checkbox',
required: true required: true,
}) }),
}) }),
]; ];
return [...super.validators, ...validators]; return [...super.validators, ...validators];
} }
@@ -223,7 +223,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
<div <div
class=${classMap({ class=${classMap({
'form-control--has-hint': hasHint, 'form-control--has-hint': hasHint,
'form-control': true 'form-control': true,
})} })}
> >
<label part="base"> <label part="base">

12
src/components/code-demo/code-demo.ts
View File

@@ -68,7 +68,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
/** Renders in an iframe */ /** Renders in an iframe */
@property({ @property({
reflect: true, reflect: true,
converter: viewportPropertyConverter converter: viewportPropertyConverter,
}) })
viewport?: boolean | ViewportDimensions; viewport?: boolean | ViewportDimensions;
@@ -237,7 +237,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
const blob = new Blob([markup], { type: 'text/html' }); const blob = new Blob([markup], { type: 'text/html' });
const a = Object.assign(document.createElement('a'), { const a = Object.assign(document.createElement('a'), {
href: URL.createObjectURL(blob), href: URL.createObjectURL(blob),
target: '_blank' target: '_blank',
}); });
document.documentElement.append(a); document.documentElement.append(a);
a.click(); a.click();
@@ -255,7 +255,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
const form = Object.assign(document.createElement('form'), { const form = Object.assign(document.createElement('form'), {
action: 'https://codepen.io/pen/define', action: 'https://codepen.io/pen/define',
method: 'POST', method: 'POST',
target: '_blank' target: '_blank',
}); });
const data = { const data = {
@@ -271,13 +271,13 @@ export default class WaCodeDemo extends WebAwesomeElement {
js_pre_processor: 'none', js_pre_processor: 'none',
html: markup, html: markup,
css, css,
js js,
}; };
const input = Object.assign(document.createElement('input'), { const input = Object.assign(document.createElement('input'), {
type: 'hidden', type: 'hidden',
name: 'data', name: 'data',
value: JSON.stringify(data) value: JSON.stringify(data),
}); });
form.append(input); form.append(input);
@@ -353,7 +353,7 @@ function dedent(code: string) {
const indents = lines.map(line => line.match(/^\s*/)?.[0]).filter(Boolean) as string[]; const indents = lines.map(line => line.match(/^\s*/)?.[0]).filter(Boolean) as string[];
const minIndent = indents.reduce( const minIndent = indents.reduce(
(minIndentSoFar, indent) => (minIndentSoFar.length < indent.length ? minIndentSoFar : indent), (minIndentSoFar, indent) => (minIndentSoFar.length < indent.length ? minIndentSoFar : indent),
indents[0] indents[0],
); );
if (!minIndent || lines.some(line => !line.startsWith(minIndent))) { if (!minIndent || lines.some(line => !line.startsWith(minIndent))) {

6
src/components/color-picker/color-picker.test.ts
View File

@@ -46,7 +46,7 @@ describe('<wa-color-picker>', () => {
}, },
afterMouseMove: () => { afterMouseMove: () => {
expect(inputHandler).to.have.been.calledTwice; expect(inputHandler).to.have.been.calledTwice;
} },
}); });
expect(changeHandler).to.have.been.calledOnce; expect(changeHandler).to.have.been.calledOnce;
@@ -75,7 +75,7 @@ describe('<wa-color-picker>', () => {
afterMouseMove: () => { afterMouseMove: () => {
// It's not twice because you can't change the hue of white! // It's not twice because you can't change the hue of white!
expect(inputHandler).to.have.been.calledOnce; expect(inputHandler).to.have.been.calledOnce;
} },
}); });
await el.updateComplete; await el.updateComplete;
@@ -106,7 +106,7 @@ describe('<wa-color-picker>', () => {
}, },
afterMouseMove: () => { afterMouseMove: () => {
expect(inputHandler).to.have.been.calledTwice; expect(inputHandler).to.have.been.calledTwice;
} },
}); });
await el.updateComplete; await el.updateComplete;

54
src/components/color-picker/color-picker.ts
View File

@@ -308,7 +308,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.dispatchEvent(new WaChangeEvent()); this.dispatchEvent(new WaChangeEvent());
} }
}, },
initialEvent: event initialEvent: event,
}); });
} }
@@ -338,7 +338,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.dispatchEvent(new WaChangeEvent()); this.dispatchEvent(new WaChangeEvent());
} }
}, },
initialEvent: event initialEvent: event,
}); });
} }
@@ -372,7 +372,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.dispatchEvent(new WaChangeEvent()); this.dispatchEvent(new WaChangeEvent());
} }
}, },
initialEvent: event initialEvent: event,
}); });
} }
@@ -542,7 +542,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
h: hslColor.h, h: hslColor.h,
s: hslColor.s * 100, s: hslColor.s * 100,
l: hslColor.l * 100, l: hslColor.l * 100,
a: hslColor.a a: hslColor.a,
}; };
const rgb = color.toRgb(); const rgb = color.toRgb();
@@ -556,7 +556,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
h: hsvColor.h, h: hsvColor.h,
s: hsvColor.s * 100, s: hsvColor.s * 100,
v: hsvColor.v * 100, v: hsvColor.v * 100,
a: hsvColor.a a: hsvColor.a,
}; };
return { return {
@@ -564,7 +564,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l, l: hsl.l,
string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`) string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`),
}, },
hsla: { hsla: {
h: hsl.h, h: hsl.h,
@@ -572,14 +572,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
l: hsl.l, l: hsl.l,
a: hsl.a, a: hsl.a,
string: this.setLetterCase( string: this.setLetterCase(
`hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})` `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`,
) ),
}, },
hsv: { hsv: {
h: hsv.h, h: hsv.h,
s: hsv.s, s: hsv.s,
v: hsv.v, v: hsv.v,
string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`) string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`),
}, },
hsva: { hsva: {
h: hsv.h, h: hsv.h,
@@ -587,14 +587,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
v: hsv.v, v: hsv.v,
a: hsv.a, a: hsv.a,
string: this.setLetterCase( string: this.setLetterCase(
`hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})` `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`,
) ),
}, },
rgb: { rgb: {
r: rgb.r, r: rgb.r,
g: rgb.g, g: rgb.g,
b: rgb.b, b: rgb.b,
string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`) string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`),
}, },
rgba: { rgba: {
r: rgb.r, r: rgb.r,
@@ -602,11 +602,11 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
b: rgb.b, b: rgb.b,
a: rgb.a, a: rgb.a,
string: this.setLetterCase( string: this.setLetterCase(
`rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})` `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`,
) ),
}, },
hex: this.setLetterCase(hex), hex: this.setLetterCase(hex),
hexa: this.setLetterCase(hexa) hexa: this.setLetterCase(hexa),
}; };
} }
@@ -636,7 +636,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
private async syncValues() { private async syncValues() {
const currentColor = this.parseColor( const currentColor = this.parseColor(
`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})` `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`,
); );
if (currentColor === null) { if (currentColor === null) {
@@ -800,7 +800,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
/** Returns the current value as a string in the specified format. */ /** Returns the current value as a string in the specified format. */
getFormattedValue(format: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' = 'hex') { getFormattedValue(format: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' = 'hex') {
const currentColor = this.parseColor( const currentColor = this.parseColor(
`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})` `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`,
); );
if (currentColor === null) { if (currentColor === null) {
@@ -887,7 +887,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
class=${classMap({ class=${classMap({
'color-picker': true, 'color-picker': true,
'color-picker--disabled': this.disabled, 'color-picker--disabled': this.disabled,
'color-picker--focused': this.hasFocus 'color-picker--focused': this.hasFocus,
})} })}
aria-disabled=${this.disabled ? 'true' : 'false'} aria-disabled=${this.disabled ? 'true' : 'false'}
tabindex="-1" tabindex="-1"
@@ -903,12 +903,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
part="grid-handle" part="grid-handle"
class=${classMap({ class=${classMap({
'color-picker__grid-handle': true, 'color-picker__grid-handle': true,
'color-picker__grid-handle--dragging': this.isDraggingGridHandle 'color-picker__grid-handle--dragging': this.isDraggingGridHandle,
})} })}
style=${styleMap({ style=${styleMap({
top: `${gridHandleY}%`, top: `${gridHandleY}%`,
left: `${gridHandleX}%`, left: `${gridHandleX}%`,
backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
})} })}
role="application" role="application"
aria-label="HSV" aria-label="HSV"
@@ -930,7 +930,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
class="color-picker__slider-handle" class="color-picker__slider-handle"
style=${styleMap({ style=${styleMap({
left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`, left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`,
backgroundColor: this.getHexString(this.hue, 100, 100) backgroundColor: this.getHexString(this.hue, 100, 100),
})} })}
role="slider" role="slider"
aria-label="hue" aria-label="hue"
@@ -958,7 +958,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
to right, to right,
${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%, ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100% ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
)` )`,
})} })}
></div> ></div>
<span <span
@@ -966,7 +966,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
class="color-picker__slider-handle" class="color-picker__slider-handle"
style=${styleMap({ style=${styleMap({
left: `${this.alpha}%`, left: `${this.alpha}%`,
backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
})} })}
role="slider" role="slider"
aria-label="alpha" aria-label="alpha"
@@ -988,7 +988,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
class="color-picker__preview color-picker__transparent-bg" class="color-picker__preview color-picker__transparent-bg"
aria-label=${this.localize.term('copy')} aria-label=${this.localize.term('copy')}
style=${styleMap({ style=${styleMap({
'--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) '--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
})} })}
@click=${this.handleCopy} @click=${this.handleCopy}
></button> ></button>
@@ -1157,10 +1157,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
'color-dropdown__trigger--empty': this.isEmpty, 'color-dropdown__trigger--empty': this.isEmpty,
'color-dropdown__trigger--focused': this.hasFocus, 'color-dropdown__trigger--focused': this.hasFocus,
'color-picker__transparent-bg': true, 'color-picker__transparent-bg': true,
'form-control-input': true 'form-control-input': true,
})} })}
style=${styleMap({ style=${styleMap({
color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
})} })}
type="button" type="button"
aria-labelledby="form-control-label" aria-labelledby="form-control-label"
@@ -1171,7 +1171,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
>${this.hint}</slot >${this.hint}</slot
> >

2
src/components/copy-button/copy-button.ts
View File

@@ -215,7 +215,7 @@ export default class WaCopyButton extends WebAwesomeElement {
class=${classMap({ class=${classMap({
'copy-button': true, 'copy-button': true,
'copy-button--success': this.status === 'success', 'copy-button--success': this.status === 'success',
'copy-button--error': this.status === 'error' 'copy-button--error': this.status === 'error',
})} })}
for="copy-button" for="copy-button"
placement=${this.tooltipPlacement} placement=${this.tooltipPlacement}

12
src/components/details/details.ts
View File

@@ -150,12 +150,12 @@ export default class WaDetails extends WebAwesomeElement {
this.body, this.body,
[ [
{ height: '0', opacity: '0' }, { height: '0', opacity: '0' },
{ height: `${this.body.scrollHeight}px`, opacity: '1' } { height: `${this.body.scrollHeight}px`, opacity: '1' },
], ],
{ {
duration, duration,
easing: 'linear' easing: 'linear',
} },
); );
this.body.style.height = 'auto'; this.body.style.height = 'auto';
@@ -176,9 +176,9 @@ export default class WaDetails extends WebAwesomeElement {
this.body, this.body,
[ [
{ height: `${this.body.scrollHeight}px`, opacity: '1' }, { height: `${this.body.scrollHeight}px`, opacity: '1' },
{ height: '0', opacity: '0' } { height: '0', opacity: '0' },
], ],
{ duration, easing: 'linear' } { duration, easing: 'linear' },
); );
this.body.style.height = 'auto'; this.body.style.height = 'auto';
@@ -217,7 +217,7 @@ export default class WaDetails extends WebAwesomeElement {
details: true, details: true,
'details--open': this.open, 'details--open': this.open,
'details--disabled': this.disabled, 'details--disabled': this.disabled,
'details--rtl': isRtl 'details--rtl': isRtl,
})} })}
> >
<summary <summary

2
src/components/dialog/dialog.ts
View File

@@ -228,7 +228,7 @@ export default class WaDialog extends WebAwesomeElement {
dialog: true, dialog: true,
'dialog--open': this.open, 'dialog--open': this.open,
'dialog--with-header': this.withHeader, 'dialog--with-header': this.withHeader,
'dialog--with-footer': this.withFooter 'dialog--with-footer': this.withFooter,
})} })}
@cancel=${this.handleDialogCancel} @cancel=${this.handleDialogCancel}
@click=${this.handleDialogClick} @click=${this.handleDialogClick}

2
src/components/drawer/drawer.ts
View File

@@ -245,7 +245,7 @@ export default class WaDrawer extends WebAwesomeElement {
'drawer--start': this.placement === 'start', 'drawer--start': this.placement === 'start',
'drawer--rtl': this.localize.dir() === 'rtl', 'drawer--rtl': this.localize.dir() === 'rtl',
'drawer--with-header': this.withHeader, 'drawer--with-header': this.withHeader,
'drawer--with-footer': this.withFooter 'drawer--with-footer': this.withFooter,
})} })}
@cancel=${this.handleDialogCancel} @cancel=${this.handleDialogCancel}
@click=${this.handleDialogClick} @click=${this.handleDialogClick}

2
src/components/dropdown/dropdown.ts
View File

@@ -424,7 +424,7 @@ export default class WaDropdown extends WebAwesomeElement {
sync=${ifDefined(this.sync ? this.sync : undefined)} sync=${ifDefined(this.sync ? this.sync : undefined)}
class=${classMap({ class=${classMap({
dropdown: true, dropdown: true,
'dropdown--open': this.open 'dropdown--open': this.open,
})} })}
> >
<slot <slot

20
src/components/format-bytes/format-bytes.test.ts
View File

@@ -23,26 +23,26 @@ describe('<wa-format-bytes>', () => {
value: 12, value: 12,
short: '12 byte', short: '12 byte',
long: '12 bytes', long: '12 bytes',
narrow: '12B' narrow: '12B',
}, },
{ {
value: 1200, value: 1200,
short: '1.2 kB', short: '1.2 kB',
long: '1.2 kilobytes', long: '1.2 kilobytes',
narrow: '1.2kB' narrow: '1.2kB',
}, },
{ {
value: 1200000, value: 1200000,
short: '1.2 MB', short: '1.2 MB',
long: '1.2 megabytes', long: '1.2 megabytes',
narrow: '1.2MB' narrow: '1.2MB',
}, },
{ {
value: 1200000000, value: 1200000000,
short: '1.2 GB', short: '1.2 GB',
long: '1.2 gigabytes', long: '1.2 gigabytes',
narrow: '1.2GB' narrow: '1.2GB',
} },
]; ];
results.forEach(expected => { results.forEach(expected => {
@@ -74,26 +74,26 @@ describe('<wa-format-bytes>', () => {
value: 12, value: 12,
short: '12 bit', short: '12 bit',
long: '12 bits', long: '12 bits',
narrow: '12bit' narrow: '12bit',
}, },
{ {
value: 1200, value: 1200,
short: '1.2 kb', short: '1.2 kb',
long: '1.2 kilobits', long: '1.2 kilobits',
narrow: '1.2kb' narrow: '1.2kb',
}, },
{ {
value: 1200000, value: 1200000,
short: '1.2 Mb', short: '1.2 Mb',
long: '1.2 megabits', long: '1.2 megabits',
narrow: '1.2Mb' narrow: '1.2Mb',
}, },
{ {
value: 1200000000, value: 1200000000,
short: '1.2 Gb', short: '1.2 Gb',
long: '1.2 gigabits', long: '1.2 gigabits',
narrow: '1.2Gb' narrow: '1.2Gb',
} },
]; ];
results.forEach(expected => { results.forEach(expected => {

2
src/components/format-bytes/format-bytes.ts
View File

@@ -36,7 +36,7 @@ export default class WaFormatBytes extends WebAwesomeElement {
return this.localize.number(valueToFormat, { return this.localize.number(valueToFormat, {
style: 'unit', style: 'unit',
unit, unit,
unitDisplay: this.display unitDisplay: this.display,
}); });
} }
} }

26
src/components/format-date/format-date.test.ts
View File

@@ -13,7 +13,7 @@ describe('<wa-format-date>', () => {
beforeEach(() => { beforeEach(() => {
// fake timer so `new Date()` can be tested // fake timer so `new Date()` can be tested
clock = sinon.useFakeTimers({ clock = sinon.useFakeTimers({
now: new Date() now: new Date(),
}); });
}); });
@@ -51,7 +51,7 @@ describe('<wa-format-date>', () => {
{ lang: 'nl', result: `1-1-${new Date().getFullYear()}` }, { lang: 'nl', result: `1-1-${new Date().getFullYear()}` },
{ lang: 'pl', result: `1.01.${new Date().getFullYear()}` }, { lang: 'pl', result: `1.01.${new Date().getFullYear()}` },
{ lang: 'pt', result: `01/01/${new Date().getFullYear()}` }, { lang: 'pt', result: `01/01/${new Date().getFullYear()}` },
{ lang: 'ru', result: `01.01.${new Date().getFullYear()}` } { lang: 'ru', result: `01.01.${new Date().getFullYear()}` },
]; ];
results.forEach(setup => { results.forEach(setup => {
it(`date has correct language format: ${setup.lang}`, async () => { it(`date has correct language format: ${setup.lang}`, async () => {
@@ -75,7 +75,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -91,7 +91,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -107,7 +107,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -126,7 +126,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -142,7 +142,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -158,7 +158,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -177,7 +177,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
// @TODO: Some weird browser / Node issue only in firefox. // @TODO: Some weird browser / Node issue only in firefox.
@@ -202,7 +202,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
// @TODO: Some weird browser / Node issue only in firefox. // @TODO: Some weird browser / Node issue only in firefox.
@@ -226,7 +226,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format( const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -245,7 +245,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format( const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format(
new Date(new Date().getFullYear(), 0, 1) new Date(new Date().getFullYear(), 0, 1),
); );
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });
@@ -264,7 +264,7 @@ describe('<wa-format-date>', () => {
`); `);
const expected = new Intl.DateTimeFormat('en-US', { const expected = new Intl.DateTimeFormat('en-US', {
hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12' hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12',
}).format(new Date(new Date().getFullYear(), 0, 1)); }).format(new Date(new Date().getFullYear(), 0, 1));
expect(el.shadowRoot?.textContent?.trim()).to.equal(expected); expect(el.shadowRoot?.textContent?.trim()).to.equal(expected);
}); });

2
src/components/format-date/format-date.ts
View File

@@ -75,7 +75,7 @@ export default class WaFormatDate extends WebAwesomeElement {
second: this.second, second: this.second,
timeZoneName: this.timeZoneName, timeZoneName: this.timeZoneName,
timeZone: this.timeZone, timeZone: this.timeZone,
hour12: hour12 hour12: hour12,
})} })}
</time> </time>
`; `;

12
src/components/format-number/format-number.test.ts
View File

@@ -84,7 +84,7 @@ describe('<wa-format-number>', () => {
`); `);
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: currencyDisplay currencyDisplay: currencyDisplay,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });
@@ -100,7 +100,7 @@ describe('<wa-format-number>', () => {
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: 'symbol', currencyDisplay: 'symbol',
minimumIntegerDigits: minDigits minimumIntegerDigits: minDigits,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });
@@ -116,7 +116,7 @@ describe('<wa-format-number>', () => {
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: 'symbol', currencyDisplay: 'symbol',
minimumFractionDigits: minFractionDigits minimumFractionDigits: minFractionDigits,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });
@@ -132,7 +132,7 @@ describe('<wa-format-number>', () => {
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: 'symbol', currencyDisplay: 'symbol',
maximumFractionDigits: maxFractionDigits maximumFractionDigits: maxFractionDigits,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });
@@ -148,7 +148,7 @@ describe('<wa-format-number>', () => {
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: 'symbol', currencyDisplay: 'symbol',
minimumSignificantDigits: minSignificantDigits minimumSignificantDigits: minSignificantDigits,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });
@@ -164,7 +164,7 @@ describe('<wa-format-number>', () => {
const expected = new Intl.NumberFormat('en-US', { const expected = new Intl.NumberFormat('en-US', {
style: 'decimal', style: 'decimal',
currencyDisplay: 'symbol', currencyDisplay: 'symbol',
maximumSignificantDigits: maxSignificantDigits maximumSignificantDigits: maxSignificantDigits,
}).format(1000); }).format(1000);
expect(el.shadowRoot?.textContent).to.equal(expected); expect(el.shadowRoot?.textContent).to.equal(expected);
}); });

2
src/components/format-number/format-number.ts
View File

@@ -56,7 +56,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
minimumFractionDigits: this.minimumFractionDigits, minimumFractionDigits: this.minimumFractionDigits,
maximumFractionDigits: this.maximumFractionDigits, maximumFractionDigits: this.maximumFractionDigits,
minimumSignificantDigits: this.minimumSignificantDigits, minimumSignificantDigits: this.minimumSignificantDigits,
maximumSignificantDigits: this.maximumSignificantDigits maximumSignificantDigits: this.maximumSignificantDigits,
}); });
} }
} }

2
src/components/icon-button/icon-button.ts
View File

@@ -116,7 +116,7 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
class=${classMap({ class=${classMap({
'icon-button': true, 'icon-button': true,
'icon-button--disabled': !isLink && this.disabled, 'icon-button--disabled': !isLink && this.disabled,
'icon-button--focused': this.hasFocus 'icon-button--focused': this.hasFocus,
})} })}
?disabled=${ifDefined(isLink ? undefined : this.disabled)} ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : 'button')} type=${ifDefined(isLink ? undefined : 'button')}

10
src/components/icon/icon.test.ts
View File

@@ -19,7 +19,7 @@ const testLibraryIcons = {
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path> <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
</svg> </svg>
`, `,
'bad-icon': `<div></div>` 'bad-icon': `<div></div>`,
}; };
describe('<wa-icon>', () => { describe('<wa-icon>', () => {
@@ -36,7 +36,7 @@ describe('<wa-icon>', () => {
} }
return ''; return '';
}, },
mutator: (svg: SVGElement) => svg.setAttribute('fill', 'currentColor') mutator: (svg: SVGElement) => svg.setAttribute('fill', 'currentColor'),
}); });
}); });
@@ -177,7 +177,7 @@ describe('<wa-icon>', () => {
registerIconLibrary('sprite', { registerIconLibrary('sprite', {
resolver: name => `/docs/assets/images/sprite.svg#${name}`, resolver: name => `/docs/assets/images/sprite.svg#${name}`,
mutator: svg => svg.setAttribute('fill', 'currentColor'), mutator: svg => svg.setAttribute('fill', 'currentColor'),
spriteSheet: true spriteSheet: true,
}); });
const el = await fixture<WaIcon>(html`<wa-icon name="arrow-left" library="sprite"></wa-icon>`); const el = await fixture<WaIcon>(html`<wa-icon name="arrow-left" library="sprite"></wa-icon>`);
@@ -204,7 +204,7 @@ describe('<wa-icon>', () => {
registerIconLibrary('sprite', { registerIconLibrary('sprite', {
resolver: name => `/docs/assets/images/sprite.svg#${name}`, resolver: name => `/docs/assets/images/sprite.svg#${name}`,
mutator: svg => svg.setAttribute('fill', 'currentColor'), mutator: svg => svg.setAttribute('fill', 'currentColor'),
spriteSheet: true spriteSheet: true,
}); });
const el = await fixture<WaIcon>(html`<wa-icon name="non-existent" library="sprite"></wa-icon>`); const el = await fixture<WaIcon>(html`<wa-icon name="non-existent" library="sprite"></wa-icon>`);
@@ -235,7 +235,7 @@ describe('<wa-icon>', () => {
mutator(svg) { mutator(svg) {
return svg.setAttribute('fill', 'currentColor'); return svg.setAttribute('fill', 'currentColor');
}, },
spriteSheet: true spriteSheet: true,
}); });
const el = await fixture<WaIcon>(html`<wa-icon name="bad-icon" library="sprite"></wa-icon>`); const el = await fixture<WaIcon>(html`<wa-icon name="bad-icon" library="sprite"></wa-icon>`);

4
src/components/icon/icon.ts
View File

@@ -102,13 +102,13 @@ export default class WaIcon extends WebAwesomeElement {
if (this.name && library) { if (this.name && library) {
return { return {
url: library.resolver(this.name, this.family, this.variant), url: library.resolver(this.name, this.family, this.variant),
fromLibrary: true fromLibrary: true,
}; };
} }
return { return {
url: this.src, url: this.src,
fromLibrary: false fromLibrary: false,
}; };
} }

2
src/components/icon/library.default.ts
View File

@@ -42,7 +42,7 @@ const library: IconLibrary = {
name: 'default', name: 'default',
resolver: (name: string, family = 'classic', variant = 'solid') => { resolver: (name: string, family = 'classic', variant = 'solid') => {
return getIconUrl(name, family, variant); return getIconUrl(name, family, variant);
} },
}; };
export default library; export default library;

36
src/components/icon/library.system.ts
View File

@@ -19,37 +19,37 @@ const systemLibrary: IconLibrary = {
switch (name) { switch (name) {
case 'check': case 'check':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
); );
case 'chevron-down': case 'chevron-down':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
); );
case 'chevron-left': case 'chevron-left':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
); );
case 'chevron-right': case 'chevron-right':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
); );
case 'circle': case 'circle':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
); );
case 'eye-dropper': case 'eye-dropper':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
); );
case 'grip-vertical': case 'grip-vertical':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
); );
case 'indeterminate': case 'indeterminate':
@@ -59,32 +59,32 @@ const systemLibrary: IconLibrary = {
case 'minus': case 'minus':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
); );
case 'pause': case 'pause':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
); );
case 'play': case 'play':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
); );
case 'star': case 'star':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
); );
case 'user': case 'user':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
); );
case 'xmark': case 'xmark':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`,
); );
} }
} }
@@ -96,28 +96,28 @@ const systemLibrary: IconLibrary = {
switch (name) { switch (name) {
case 'circle-xmark': case 'circle-xmark':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
); );
case 'copy': case 'copy':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
); );
case 'eye': case 'eye':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
); );
case 'eye-slash': case 'eye-slash':
return dataUri( return dataUri(
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>` `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
); );
} }
} }
return ''; return '';
} },
}; };
export default systemLibrary; export default systemLibrary;

2
src/components/icon/library.ts
View File

@@ -36,7 +36,7 @@ export function registerIconLibrary(name: string, options: Omit<IconLibrary, 'na
name, name,
resolver: options.resolver, resolver: options.resolver,
mutator: options.mutator, mutator: options.mutator,
spriteSheet: options.spriteSheet spriteSheet: options.spriteSheet,
}); });
// Redraw watched icons // Redraw watched icons

36
src/components/image-comparer/image-comparer.test.ts
View File

@@ -57,8 +57,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowRight' key: 'ArrowRight',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -77,8 +77,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowLeft' key: 'ArrowLeft',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -97,8 +97,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'Home' key: 'Home',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -117,8 +117,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'End' key: 'End',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -140,8 +140,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowLeft' key: 'ArrowLeft',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -163,8 +163,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowRight' key: 'ArrowRight',
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -184,8 +184,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowRight', key: 'ArrowRight',
shiftKey: true shiftKey: true,
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -205,8 +205,8 @@ describe('<wa-image-comparer>', () => {
base.dispatchEvent( base.dispatchEvent(
new KeyboardEvent('keydown', { new KeyboardEvent('keydown', {
key: 'ArrowLeft', key: 'ArrowLeft',
shiftKey: true shiftKey: true,
}) }),
); );
await el.updateComplete; await el.updateComplete;
@@ -242,8 +242,8 @@ describe('<wa-image-comparer>', () => {
document.dispatchEvent( document.dispatchEvent(
new PointerEvent('pointermove', { new PointerEvent('pointermove', {
clientX: offsetX + 20, clientX: offsetX + 20,
clientY: offsetY clientY: offsetY,
}) }),
); );
document.dispatchEvent(new PointerEvent('pointerup')); document.dispatchEvent(new PointerEvent('pointerup'));

8
src/components/image-comparer/image-comparer.ts
View File

@@ -59,7 +59,7 @@ export default class WaImageComparer extends WebAwesomeElement {
this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2)); this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2));
if (isRtl) this.position = 100 - this.position; if (isRtl) this.position = 100 - this.position;
}, },
initialEvent: event initialEvent: event,
}); });
} }
@@ -105,7 +105,7 @@ export default class WaImageComparer extends WebAwesomeElement {
id="image-comparer" id="image-comparer"
class=${classMap({ class=${classMap({
'image-comparer': true, 'image-comparer': true,
'image-comparer--rtl': isRtl 'image-comparer--rtl': isRtl,
})} })}
@keydown=${this.handleKeyDown} @keydown=${this.handleKeyDown}
> >
@@ -118,7 +118,7 @@ export default class WaImageComparer extends WebAwesomeElement {
part="after" part="after"
class="image-comparer__after" class="image-comparer__after"
style=${styleMap({ style=${styleMap({
clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)` clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
})} })}
> >
<slot name="after"></slot> <slot name="after"></slot>
@@ -129,7 +129,7 @@ export default class WaImageComparer extends WebAwesomeElement {
part="divider" part="divider"
class="image-comparer__divider" class="image-comparer__divider"
style=${styleMap({ style=${styleMap({
left: isRtl ? `${100 - this.position}%` : `${this.position}%` left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
})} })}
@mousedown=${this.handleDrag} @mousedown=${this.handleDrag}
@touchstart=${this.handleDrag} @touchstart=${this.handleDrag}

6
src/components/include/include.test.ts
View File

@@ -19,7 +19,7 @@ const stubbedFetchResponse: Response = {
formData: sinon.fake(), formData: sinon.fake(),
bodyUsed: false, bodyUsed: false,
body: null, body: null,
clone: sinon.fake() clone: sinon.fake(),
}; };
async function delayResolve(resolveValue: string) { async function delayResolve(resolveValue: string) {
@@ -40,7 +40,7 @@ describe('<wa-include>', () => {
...stubbedFetchResponse, ...stubbedFetchResponse,
ok: true, ok: true,
status: 200, status: 200,
text: () => delayResolve('"id": 1') text: () => delayResolve('"id": 1'),
}); });
const loadHandler = sinon.spy(); const loadHandler = sinon.spy();
document.addEventListener('wa-load', loadHandler); document.addEventListener('wa-load', loadHandler);
@@ -59,7 +59,7 @@ describe('<wa-include>', () => {
...stubbedFetchResponse, ...stubbedFetchResponse,
ok: false, ok: false,
status: 404, status: 404,
text: () => delayResolve('{}') text: () => delayResolve('{}'),
}); });
const loadHandler = sinon.spy(); const loadHandler = sinon.spy();
document.addEventListener('wa-include-error', loadHandler); document.addEventListener('wa-include-error', loadHandler);

2
src/components/include/request.ts
View File

@@ -17,7 +17,7 @@ export function requestInclude(src: string, mode: 'cors' | 'no-cors' | 'same-ori
const res = { const res = {
ok: response.ok, ok: response.ok,
status: response.status, status: response.status,
html: await response.text() html: await response.text(),
}; };
// Replace the cached promise with its result to avoid having buggy browser Promises retain memory as mentioned in #1284 and #1249 // Replace the cached promise with its result to avoid having buggy browser Promises retain memory as mentioned in #1284 and #1249
includeFiles.set(src, res); includeFiles.set(src, res);

2
src/components/input/input.test.ts
View File

@@ -105,7 +105,7 @@ describe('<wa-input>', () => {
it('should not add a value to the form if disabled', async () => { it('should not add a value to the form if disabled', async () => {
const form = await fixture<HTMLFormElement>( const form = await fixture<HTMLFormElement>(
html` <form><wa-input name="name" disabled required></wa-input></form>` html` <form><wa-input name="name" disabled required></wa-input></form>`,
); );
const el = form.querySelector('wa-input')!; const el = form.querySelector('wa-input')!;
el.value = 'blah'; el.value = 'blah';

14
src/components/input/input.ts
View File

@@ -206,8 +206,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
converter: { converter: {
// Allow "true|false" attribute values but keep the property boolean // Allow "true|false" attribute values but keep the property boolean
fromAttribute: value => (!value || value === 'false' ? false : true), fromAttribute: value => (!value || value === 'false' ? false : true),
toAttribute: value => (value ? 'true' : 'false') toAttribute: value => (value ? 'true' : 'false'),
} },
}) })
spellcheck = true; spellcheck = true;
@@ -289,7 +289,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
} }
const button = formElements.find( const button = formElements.find(
(el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled') (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled'),
) as undefined | HTMLButtonElement | WaButton; ) as undefined | HTMLButtonElement | WaButton;
// No button found, don't submit. // No button found, don't submit.
@@ -339,7 +339,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
setSelectionRange( setSelectionRange(
selectionStart: number, selectionStart: number,
selectionEnd: number, selectionEnd: number,
selectionDirection: 'forward' | 'backward' | 'none' = 'none' selectionDirection: 'forward' | 'backward' | 'none' = 'none',
) { ) {
this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection); this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
} }
@@ -349,7 +349,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
replacement: string, replacement: string,
start?: number, start?: number,
end?: number, end?: number,
selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve' selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',
) { ) {
const selectionStart = start ?? this.input.selectionStart!; const selectionStart = start ?? this.input.selectionStart!;
const selectionEnd = end ?? this.input.selectionEnd!; const selectionEnd = end ?? this.input.selectionEnd!;
@@ -440,7 +440,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
'input--disabled': this.disabled, 'input--disabled': this.disabled,
'input--focused': this.hasFocus, 'input--focused': this.hasFocus,
'input--empty': !this.value, 'input--empty': !this.value,
'input--no-spin-buttons': this.noSpinButtons 'input--no-spin-buttons': this.noSpinButtons,
})} })}
> >
<span part="prefix" class="input__prefix"> <span part="prefix" class="input__prefix">
@@ -531,7 +531,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
aria-hidden=${hasHint ? 'false' : 'true'} aria-hidden=${hasHint ? 'false' : 'true'}
>${this.hint}</slot >${this.hint}</slot

2
src/components/menu-item/menu-item.ts
View File

@@ -178,7 +178,7 @@ export default class WaMenuItem extends WebAwesomeElement {
'menu-item--disabled': this.disabled, 'menu-item--disabled': this.disabled,
'menu-item--loading': this.loading, 'menu-item--loading': this.loading,
'menu-item--has-submenu': this.isSubmenu(), 'menu-item--has-submenu': this.isSubmenu(),
'menu-item--submenu-expanded': isSubmenuExpanded 'menu-item--submenu-expanded': isSubmenuExpanded,
})} })}
?aria-haspopup="${this.isSubmenu()}" ?aria-haspopup="${this.isSubmenu()}"
?aria-expanded="${isSubmenuExpanded ? true : false}" ?aria-expanded="${isSubmenuExpanded ? true : false}"

2
src/components/mutation-observer/mutation-observer.ts
View File

@@ -75,7 +75,7 @@ export default class WaMutationObserver extends WebAwesomeElement {
attributeFilter, attributeFilter,
attributeOldValue: this.attrOldValue, attributeOldValue: this.attrOldValue,
characterData: this.charData, characterData: this.charData,
characterDataOldValue: this.charDataOldValue characterDataOldValue: this.charDataOldValue,
}); });
} catch { } catch {
// //

2
src/components/option/option.ts
View File

@@ -131,7 +131,7 @@ export default class WaOption extends WebAwesomeElement {
'option--current': this.current, 'option--current': this.current,
'option--disabled': this.disabled, 'option--disabled': this.disabled,
'option--selected': this.selected, 'option--selected': this.selected,
'option--hover': this.hasHover 'option--hover': this.hasHover,
})} })}
@mouseenter=${this.handleMouseEnter} @mouseenter=${this.handleMouseEnter}
@mouseleave=${this.handleMouseLeave} @mouseleave=${this.handleMouseLeave}

38
src/components/popup/popup.ts
View File

@@ -150,8 +150,8 @@ export default class WaPopup extends WebAwesomeElement {
}, },
toAttribute: (value: []) => { toAttribute: (value: []) => {
return value.join(' '); return value.join(' ');
} },
} },
}) })
flipFallbackPlacements = ''; flipFallbackPlacements = '';
@@ -312,7 +312,7 @@ export default class WaPopup extends WebAwesomeElement {
// //
const middleware = [ const middleware = [
// The offset middleware goes first // The offset middleware goes first
offset({ mainAxis: this.distance, crossAxis: this.skidding }) offset({ mainAxis: this.distance, crossAxis: this.skidding }),
]; ];
// First we sync width/height // First we sync width/height
@@ -324,8 +324,8 @@ export default class WaPopup extends WebAwesomeElement {
const syncHeight = this.sync === 'height' || this.sync === 'both'; const syncHeight = this.sync === 'height' || this.sync === 'both';
this.popup.style.width = syncWidth ? `${rects.reference.width}px` : ''; this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';
this.popup.style.height = syncHeight ? `${rects.reference.height}px` : ''; this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';
} },
}) }),
); );
} else { } else {
// Cleanup styles if we're not matching width/height // Cleanup styles if we're not matching width/height
@@ -341,8 +341,8 @@ export default class WaPopup extends WebAwesomeElement {
// @ts-expect-error - We're converting a string attribute to an array here // @ts-expect-error - We're converting a string attribute to an array here
fallbackPlacements: this.flipFallbackPlacements, fallbackPlacements: this.flipFallbackPlacements,
fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement', fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
padding: this.flipPadding padding: this.flipPadding,
}) }),
); );
} }
@@ -351,8 +351,8 @@ export default class WaPopup extends WebAwesomeElement {
middleware.push( middleware.push(
shift({ shift({
boundary: this.shiftBoundary, boundary: this.shiftBoundary,
padding: this.shiftPadding padding: this.shiftPadding,
}) }),
); );
} }
@@ -374,8 +374,8 @@ export default class WaPopup extends WebAwesomeElement {
} else { } else {
this.style.removeProperty('--auto-size-available-width'); this.style.removeProperty('--auto-size-available-width');
} }
} },
}) }),
); );
} else { } else {
// Cleanup styles if we're no longer using auto-size // Cleanup styles if we're no longer using auto-size
@@ -388,8 +388,8 @@ export default class WaPopup extends WebAwesomeElement {
middleware.push( middleware.push(
arrow({ arrow({
element: this.arrowEl, element: this.arrowEl,
padding: this.arrowPadding padding: this.arrowPadding,
}) }),
); );
} }
@@ -409,8 +409,8 @@ export default class WaPopup extends WebAwesomeElement {
strategy: this.strategy, strategy: this.strategy,
platform: { platform: {
...platform, ...platform,
getOffsetParent getOffsetParent,
} },
}).then(({ x, y, middlewareData, placement }) => { }).then(({ x, y, middlewareData, placement }) => {
// //
// Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of
@@ -425,7 +425,7 @@ export default class WaPopup extends WebAwesomeElement {
Object.assign(this.popup.style, { Object.assign(this.popup.style, {
left: `${x}px`, left: `${x}px`,
top: `${y}px` top: `${y}px`,
}); });
if (this.arrow) { if (this.arrow) {
@@ -463,7 +463,7 @@ export default class WaPopup extends WebAwesomeElement {
right, right,
bottom, bottom,
left, left,
[staticSide]: 'calc(var(--arrow-size-diagonal) * -1)' [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)',
}); });
} }
}); });
@@ -557,7 +557,7 @@ export default class WaPopup extends WebAwesomeElement {
part="hover-bridge" part="hover-bridge"
class=${classMap({ class=${classMap({
'popup-hover-bridge': true, 'popup-hover-bridge': true,
'popup-hover-bridge--visible': this.hoverBridge && this.active 'popup-hover-bridge--visible': this.hoverBridge && this.active,
})} })}
></span> ></span>
@@ -567,7 +567,7 @@ export default class WaPopup extends WebAwesomeElement {
popup: true, popup: true,
'popup--active': this.active, 'popup--active': this.active,
'popup--fixed': this.strategy === 'fixed', 'popup--fixed': this.strategy === 'fixed',
'popup--has-arrow': this.arrow 'popup--has-arrow': this.arrow,
})} })}
> >
<slot></slot> <slot></slot>

6
src/components/progress-bar/progress-bar.test.ts
View File

@@ -24,7 +24,7 @@ describe('<wa-progress-bar>', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaProgressBar>( el = await fixture<WaProgressBar>(
html`<wa-progress-bar title="Titled Progress Ring" value="25"></wa-progress-bar>` html`<wa-progress-bar title="Titled Progress Ring" value="25"></wa-progress-bar>`,
); );
base = el.shadowRoot!.querySelector('[part~="base"]')!; base = el.shadowRoot!.querySelector('[part~="base"]')!;
indicator = el.shadowRoot!.querySelector('[part~="indicator"]')!; indicator = el.shadowRoot!.querySelector('[part~="indicator"]')!;
@@ -48,7 +48,7 @@ describe('<wa-progress-bar>', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaProgressBar>( el = await fixture<WaProgressBar>(
html`<wa-progress-bar title="Titled Progress Ring" indeterminate></wa-progress-bar>` html`<wa-progress-bar title="Titled Progress Ring" indeterminate></wa-progress-bar>`,
); );
base = el.shadowRoot!.querySelector('[part~="base"]')!; base = el.shadowRoot!.querySelector('[part~="base"]')!;
}); });
@@ -65,7 +65,7 @@ describe('<wa-progress-bar>', () => {
describe('when provided a ariaLabel, and value parameter', () => { describe('when provided a ariaLabel, and value parameter', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaProgressBar>( el = await fixture<WaProgressBar>(
html`<wa-progress-bar ariaLabel="Labelled Progress Ring" value="25"></wa-progress-bar>` html`<wa-progress-bar ariaLabel="Labelled Progress Ring" value="25"></wa-progress-bar>`,
); );
}); });

2
src/components/progress-bar/progress-bar.ts
View File

@@ -46,7 +46,7 @@ export default class WaProgressBar extends WebAwesomeElement {
class=${classMap({ class=${classMap({
'progress-bar': true, 'progress-bar': true,
'progress-bar--indeterminate': this.indeterminate, 'progress-bar--indeterminate': this.indeterminate,
'progress-bar--rtl': this.localize.dir() === 'rtl' 'progress-bar--rtl': this.localize.dir() === 'rtl',
})} })}
role="progressbar" role="progressbar"
title=${ifDefined(this.title)} title=${ifDefined(this.title)}

4
src/components/progress-ring/progress-ring.test.ts
View File

@@ -23,7 +23,7 @@ describe('<wa-progress-ring>', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaProgressRing>( el = await fixture<WaProgressRing>(
html`<wa-progress-ring title="Titled Progress Ring" value="25"></wa-progress-ring>` html`<wa-progress-ring title="Titled Progress Ring" value="25"></wa-progress-ring>`,
); );
base = el.shadowRoot!.querySelector('[part~="base"]')!; base = el.shadowRoot!.querySelector('[part~="base"]')!;
}); });
@@ -44,7 +44,7 @@ describe('<wa-progress-ring>', () => {
describe('when provided a ariaLabel, and value parameter', () => { describe('when provided a ariaLabel, and value parameter', () => {
beforeEach(async () => { beforeEach(async () => {
el = await fixture<WaProgressRing>( el = await fixture<WaProgressRing>(
html`<wa-progress-ring ariaLabel="Labelled Progress Ring" value="25"></wa-progress-ring>` html`<wa-progress-ring ariaLabel="Labelled Progress Ring" value="25"></wa-progress-ring>`,
); );
}); });

6
src/components/qr-code/qr-code.test.ts
View File

@@ -49,7 +49,7 @@ const getColorFromPixel = (colorArray: Uint8ClampedArray, pixelNumber: number):
colorArray[startEntryNumber], colorArray[startEntryNumber],
colorArray[startEntryNumber + 1], colorArray[startEntryNumber + 1],
colorArray[startEntryNumber + 2], colorArray[startEntryNumber + 2],
colorArray[startEntryNumber + 3] colorArray[startEntryNumber + 3],
); );
}; };
@@ -71,7 +71,7 @@ const getQrCodeColors = (qrCode: WaQrCode): QrCodeColors => {
} }
return { return {
foreground: foregroundColor, foreground: foregroundColor,
background: backgroundColor! background: backgroundColor!,
}; };
}; };
@@ -130,7 +130,7 @@ describe('<wa-qr-code>', () => {
it('sets the correct background for the qr code', async () => { it('sets the correct background for the qr code', async () => {
const qrCode = await fixture<WaQrCode>( const qrCode = await fixture<WaQrCode>(
html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>` html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>`,
); );
expectQrCodeColorsToBe(qrCode, { foreground: red, background: blue }); expectQrCodeColorsToBe(qrCode, { foreground: red, background: blue });

4
src/components/qr-code/qr-code.ts
View File

@@ -82,9 +82,9 @@ export default class WaQrCode extends WebAwesomeElement {
fill: this.fill, fill: this.fill,
background: this.background, background: this.background,
// We draw the canvas larger and scale its container down to avoid blurring on high-density displays // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
size: this.size * 2 size: this.size * 2,
}, },
this.canvas this.canvas,
); );
this.generated = true; this.generated = true;

2
src/components/radio-button/radio-button.test.ts
View File

@@ -40,7 +40,7 @@ describe('<wa-radio-button>', () => {
radioGroup.updateComplete, radioGroup.updateComplete,
radio1.updateComplete, radio1.updateComplete,
radio2.updateComplete, radio2.updateComplete,
radio3.updateComplete radio3.updateComplete,
]); ]);
expect(radio1.classList.contains('wa-button-group__button')).to.be.true; expect(radio1.classList.contains('wa-button-group__button')).to.be.true;

2
src/components/radio-button/radio-button.ts
View File

@@ -166,7 +166,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
'button--pill': this.pill, 'button--pill': this.pill,
'button--has-label': hasLabel, 'button--has-label': hasLabel,
'button--has-prefix': hasPrefix, 'button--has-prefix': hasPrefix,
'button--has-suffix': hasSuffix 'button--has-suffix': hasSuffix,
})} })}
aria-disabled=${this.disabled} aria-disabled=${this.disabled}
type="button" type="button"

2
src/components/radio-group/radio-group.test.ts
View File

@@ -326,7 +326,7 @@ describe('<wa-radio-group>', () => {
const validFocusHandler = sinon.spy(); const validFocusHandler = sinon.spy();
Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio => Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio =>
radio.addEventListener('wa-focus', validFocusHandler) radio.addEventListener('wa-focus', validFocusHandler),
); );
expect(validFocusHandler).to.not.have.been.called; expect(validFocusHandler).to.not.have.been.called;

10
src/components/radio-group/radio-group.ts
View File

@@ -52,9 +52,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
required: true, required: true,
type: 'radio', type: 'radio',
// we need an id that's guaranteed to be unique; users will never see this // we need an id that's guaranteed to be unique; users will never see this
name: uniqueId('__wa-radio') name: uniqueId('__wa-radio'),
}) }),
}) }),
]; ];
return [...super.validators, ...validators]; return [...super.validators, ...validators];
} }
@@ -185,7 +185,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
} else { } else {
radio.checked = false; radio.checked = false;
} }
}) }),
); );
this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button'); this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
@@ -356,7 +356,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
aria-hidden=${hasHint ? 'false' : 'true'} aria-hidden=${hasHint ? 'false' : 'true'}
>${this.hint}</slot >${this.hint}</slot

14
src/components/radio/radio.css
View File

@@ -26,18 +26,6 @@
cursor: pointer; cursor: pointer;
} }
.radio--small {
font-size: var(--wa-font-size-s);
}
.radio--medium {
font-size: var(--wa-font-size-m);
}
.radio--large {
font-size: var(--wa-font-size-l);
}
.radio__checked-icon { .radio__checked-icon {
display: flex; display: flex;
fill: currentColor; fill: currentColor;
@@ -90,7 +78,7 @@
} }
/* Disabled */ /* Disabled */
.radio--disabled { [part='radio']:has(:disabled) {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }

10
src/components/radio/radio.ts
View File

@@ -5,6 +5,7 @@ import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js'; import { WaFocusEvent } from '../../events/focus.js';
import { watch } from '../../internal/watch.js'; import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import sizeStyles from '../../styles/shadow/size.css';
import '../icon/icon.js'; import '../icon/icon.js';
import styles from './radio.css'; import styles from './radio.css';
@@ -40,10 +41,9 @@ import styles from './radio.css';
*/ */
@customElement('wa-radio') @customElement('wa-radio')
export default class WaRadio extends WebAwesomeFormAssociatedElement { export default class WaRadio extends WebAwesomeFormAssociatedElement {
static shadowStyle = styles; static shadowStyle = [sizeStyles, styles];
@state() checked = false; @state() checked = false;
@state() protected hasFocus = false;
/** /**
* The string pointing to a form's id. * The string pointing to a form's id.
@@ -77,12 +77,10 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
} }
private handleBlur = () => { private handleBlur = () => {
this.hasFocus = false;
this.dispatchEvent(new WaBlurEvent()); this.dispatchEvent(new WaBlurEvent());
}; };
private handleFocus = () => { private handleFocus = () => {
this.hasFocus = true;
this.dispatchEvent(new WaFocusEvent()); this.dispatchEvent(new WaFocusEvent());
}; };
@@ -124,10 +122,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
radio: true, radio: true,
'radio--checked': this.checked, 'radio--checked': this.checked,
'radio--disabled': this.disabled, 'radio--disabled': this.disabled,
'radio--focused': this.hasFocus,
'radio--small': this.size === 'small',
'radio--medium': this.size === 'medium',
'radio--large': this.size === 'large'
})} })}
> >
<span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control"> <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">

6
src/components/range/range.ts
View File

@@ -284,7 +284,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
class=${classMap({ class=${classMap({
'form-control': true, 'form-control': true,
'form-control--medium': true, // range only has one size 'form-control--medium': true, // range only has one size
'form-control--has-label': hasLabel 'form-control--has-label': hasLabel,
})} })}
> >
<label <label
@@ -306,7 +306,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
'range--rtl': this.localize.dir() === 'rtl', 'range--rtl': this.localize.dir() === 'rtl',
'range--tooltip-visible': this.hasTooltip, 'range--tooltip-visible': this.hasTooltip,
'range--tooltip-top': this.tooltip === 'top', 'range--tooltip-top': this.tooltip === 'top',
'range--tooltip-bottom': this.tooltip === 'bottom' 'range--tooltip-bottom': this.tooltip === 'bottom',
})} })}
@mousedown=${this.handleThumbDragStart} @mousedown=${this.handleThumbDragStart}
@mouseup=${this.handleThumbDragEnd} @mouseup=${this.handleThumbDragEnd}
@@ -345,7 +345,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
aria-hidden=${hasHint ? 'false' : 'true'} aria-hidden=${hasHint ? 'false' : 'true'}
>${this.hint}</slot >${this.hint}</slot

18
src/components/rating/rating.ts
View File

@@ -189,8 +189,8 @@ export default class WaRating extends WebAwesomeElement {
this.dispatchEvent( this.dispatchEvent(
new WaHoverEvent({ new WaHoverEvent({
phase: 'move', phase: 'move',
value: this.hoverValue value: this.hoverValue,
}) }),
); );
} }
@@ -199,8 +199,8 @@ export default class WaRating extends WebAwesomeElement {
this.dispatchEvent( this.dispatchEvent(
new WaHoverEvent({ new WaHoverEvent({
phase: this.isHovering ? 'start' : 'end', phase: this.isHovering ? 'start' : 'end',
value: this.hoverValue value: this.hoverValue,
}) }),
); );
} }
@@ -232,7 +232,7 @@ export default class WaRating extends WebAwesomeElement {
rating: true, rating: true,
'rating--readonly': this.readonly, 'rating--readonly': this.readonly,
'rating--disabled': this.disabled, 'rating--disabled': this.disabled,
'rating--rtl': isRtl 'rating--rtl': isRtl,
})} })}
role="slider" role="slider"
aria-label=${this.label} aria-label=${this.label}
@@ -262,7 +262,7 @@ export default class WaRating extends WebAwesomeElement {
class=${classMap({ class=${classMap({
rating__symbol: true, rating__symbol: true,
'rating__partial-symbol-container': true, 'rating__partial-symbol-container': true,
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
})} })}
role="presentation" role="presentation"
> >
@@ -270,7 +270,7 @@ export default class WaRating extends WebAwesomeElement {
style=${styleMap({ style=${styleMap({
clipPath: isRtl clipPath: isRtl
? `inset(0 ${(displayValue - index) * 100}% 0 0)` ? `inset(0 ${(displayValue - index) * 100}% 0 0)`
: `inset(0 0 0 ${(displayValue - index) * 100}%)` : `inset(0 0 0 ${(displayValue - index) * 100}%)`,
})} })}
> >
${unsafeHTML(this.getSymbol(index + 1))} ${unsafeHTML(this.getSymbol(index + 1))}
@@ -280,7 +280,7 @@ export default class WaRating extends WebAwesomeElement {
style=${styleMap({ style=${styleMap({
clipPath: isRtl clipPath: isRtl
? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)` ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)`
: `inset(0 ${100 - (displayValue - index) * 100}% 0 0)` : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`,
})} })}
> >
${unsafeHTML(this.getSymbol(index + 1))} ${unsafeHTML(this.getSymbol(index + 1))}
@@ -294,7 +294,7 @@ export default class WaRating extends WebAwesomeElement {
class=${classMap({ class=${classMap({
rating__symbol: true, rating__symbol: true,
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1, 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
'rating__symbol--active': displayValue >= index + 1 'rating__symbol--active': displayValue >= index + 1,
})} })}
role="presentation" role="presentation"
> >

20
src/components/relative-time/relative-time.test.ts
View File

@@ -22,7 +22,7 @@ const expectFormattedRelativeTimeToBe = async (relativeTime: WaRelativeTime, exp
const createRelativeTimeWithDate = async ( const createRelativeTimeWithDate = async (
relativeDate: Date, relativeDate: Date,
fixture: typeof hydratedFixture | typeof clientFixture fixture: typeof hydratedFixture | typeof clientFixture,
): Promise<WaRelativeTime> => { ): Promise<WaRelativeTime> => {
const relativeTime: WaRelativeTime = await fixture<WaRelativeTime>(html` const relativeTime: WaRelativeTime = await fixture<WaRelativeTime>(html`
<wa-relative-time lang="en-US"></wa-relative-time> <wa-relative-time lang="en-US"></wa-relative-time>
@@ -43,36 +43,36 @@ const yesterday = new Date(currentTime.getTime() - dayInSeconds);
const testCases: WaRelativeTimeTestCase[] = [ const testCases: WaRelativeTimeTestCase[] = [
{ {
date: new Date(currentTime.getTime() - minuteInSeconds), date: new Date(currentTime.getTime() - minuteInSeconds),
expectedOutput: '1 minute ago' expectedOutput: '1 minute ago',
}, },
{ {
date: new Date(currentTime.getTime() - hourInSeconds), date: new Date(currentTime.getTime() - hourInSeconds),
expectedOutput: '1 hour ago' expectedOutput: '1 hour ago',
}, },
{ {
date: yesterday, date: yesterday,
expectedOutput: 'yesterday' expectedOutput: 'yesterday',
}, },
{ {
date: new Date(currentTime.getTime() - 4 * dayInSeconds), date: new Date(currentTime.getTime() - 4 * dayInSeconds),
expectedOutput: '4 days ago' expectedOutput: '4 days ago',
}, },
{ {
date: new Date(currentTime.getTime() - weekInSeconds), date: new Date(currentTime.getTime() - weekInSeconds),
expectedOutput: 'last week' expectedOutput: 'last week',
}, },
{ {
date: new Date(currentTime.getTime() - monthInSeconds), date: new Date(currentTime.getTime() - monthInSeconds),
expectedOutput: 'last month' expectedOutput: 'last month',
}, },
{ {
date: new Date(currentTime.getTime() - nonLeapYearInSeconds), date: new Date(currentTime.getTime() - nonLeapYearInSeconds),
expectedOutput: 'last year' expectedOutput: 'last year',
}, },
{ {
date: new Date(currentTime.getTime() + minuteInSeconds), date: new Date(currentTime.getTime() + minuteInSeconds),
expectedOutput: 'in 1 minute' expectedOutput: 'in 1 minute',
} },
]; ];
describe('wa-relative-time', () => { describe('wa-relative-time', () => {

4
src/components/relative-time/relative-time.ts
View File

@@ -15,7 +15,7 @@ const availableUnits: UnitConfig[] = [
{ max: 518400000, value: 86400000, unit: 'day' }, // max 6 days { max: 518400000, value: 86400000, unit: 'day' }, // max 6 days
{ max: 2419200000, value: 604800000, unit: 'week' }, // max 28 days { max: 2419200000, value: 604800000, unit: 'week' }, // max 28 days
{ max: 28512000000, value: 2592000000, unit: 'month' }, // max 11 months { max: 28512000000, value: 2592000000, unit: 'month' }, // max 11 months
{ max: Infinity, value: 31536000000, unit: 'year' } { max: Infinity, value: 31536000000, unit: 'year' },
]; ];
/** /**
@@ -73,7 +73,7 @@ export default class WaRelativeTime extends WebAwesomeElement {
this.isoTime = then.toISOString(); this.isoTime = then.toISOString();
this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, { this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
numeric: this.numeric, numeric: this.numeric,
style: this.format style: this.format,
}); });
// If sync is enabled, update as time passes // If sync is enabled, update as time passes

2
src/components/resize-observer/resize-observer.test.ts
View File

@@ -9,7 +9,7 @@ describe('<wa-resize-observer>', () => {
const el = await fixture( const el = await fixture(
html`<wa-resize-observer> html`<wa-resize-observer>
<div>Resize this box and watch the console 👉</div> <div>Resize this box and watch the console 👉</div>
</wa-resize-observer>` </wa-resize-observer>`,
); );
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();

10
src/components/select/select.test.ts
View File

@@ -642,7 +642,7 @@ describe('<wa-select>', () => {
describe('With no existing options', () => { describe('With no existing options', () => {
it('Should wait to select the option when the option exists for single select', async () => { it('Should wait to select the option when the option exists for single select', async () => {
const form = await fixture<HTMLFormElement>( const form = await fixture<HTMLFormElement>(
html`<form><wa-select name="select" value="option-1"></wa-select></form>` html`<form><wa-select name="select" value="option-1"></wa-select></form>`,
); );
const el = form.querySelector<WaSelect>('wa-select')!; const el = form.querySelector<WaSelect>('wa-select')!;
@@ -662,7 +662,7 @@ describe('<wa-select>', () => {
it('Should wait to select the option when the option exists for multiple select', async () => { it('Should wait to select the option when the option exists for multiple select', async () => {
const form = await fixture<HTMLFormElement>( const form = await fixture<HTMLFormElement>(
html`<form><wa-select name="select" value="option-1" multiple></wa-select></form>` html`<form><wa-select name="select" value="option-1" multiple></wa-select></form>`,
); );
const el = form.querySelector<WaSelect>('wa-select')!; const el = form.querySelector<WaSelect>('wa-select')!;
@@ -690,7 +690,7 @@ describe('<wa-select>', () => {
<wa-option value="bar">Bar</wa-option> <wa-option value="bar">Bar</wa-option>
<wa-option value="baz">Baz</wa-option> <wa-option value="baz">Baz</wa-option>
</wa-select> </wa-select>
</form>` </form>`,
); );
const el = form.querySelector<WaSelect>('wa-select')!; const el = form.querySelector<WaSelect>('wa-select')!;
@@ -715,7 +715,7 @@ describe('<wa-select>', () => {
<wa-option value="bar">Bar</wa-option> <wa-option value="bar">Bar</wa-option>
<wa-option value="baz">Baz</wa-option> <wa-option value="baz">Baz</wa-option>
</wa-select> </wa-select>
</form>` </form>`,
); );
const el = form.querySelector<WaSelect>('wa-select')!; const el = form.querySelector<WaSelect>('wa-select')!;
@@ -740,7 +740,7 @@ describe('<wa-select>', () => {
<wa-option value="bar">Bar</wa-option> <wa-option value="bar">Bar</wa-option>
<wa-option value="baz">Baz</wa-option> <wa-option value="baz">Baz</wa-option>
</wa-select> </wa-select>
</form>` </form>`,
); );
const el = form.querySelector<WaSelect>('wa-select')!; const el = form.querySelector<WaSelect>('wa-select')!;

11
src/components/select/select.ts
View File

@@ -92,8 +92,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
? [] ? []
: [ : [
RequiredValidator({ RequiredValidator({
validationElement: Object.assign(document.createElement('select'), { required: true }) validationElement: Object.assign(document.createElement('select'), { required: true }),
}) }),
]; ];
return [...super.validators, ...validators]; return [...super.validators, ...validators];
} }
@@ -132,8 +132,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
reflect: true, reflect: true,
converter: { converter: {
fromAttribute: (value: string) => value.split(' '), fromAttribute: (value: string) => value.split(' '),
toAttribute: (value: string | string[]) => (Array.isArray(value) ? value.join(' ') : value) toAttribute: (value: string | string[]) => (Array.isArray(value) ? value.join(' ') : value),
} },
}) })
set defaultValue(val: string | string[]) { set defaultValue(val: string | string[]) {
this._defaultValue = this.convertDefaultValue(val); this._defaultValue = this.convertDefaultValue(val);
@@ -799,7 +799,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
'form-control--medium': this.size === 'medium', 'form-control--medium': this.size === 'medium',
'form-control--large': this.size === 'large', 'form-control--large': this.size === 'large',
'form-control--has-label': hasLabel, 'form-control--has-label': hasLabel,
'form-control--has-hint': hasHint
})} })}
> >
<label <label
@@ -935,7 +934,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
aria-hidden=${hasHint ? 'false' : 'true'} aria-hidden=${hasHint ? 'false' : 'true'}
>${this.hint}</slot >${this.hint}</slot

2
src/components/skeleton/skeleton.ts
View File

@@ -31,7 +31,7 @@ export default class WaSkeleton extends WebAwesomeElement {
class=${classMap({ class=${classMap({
skeleton: true, skeleton: true,
'skeleton--pulse': this.effect === 'pulse', 'skeleton--pulse': this.effect === 'pulse',
'skeleton--sheen': this.effect === 'sheen' 'skeleton--sheen': this.effect === 'sheen',
})} })}
> >
<div part="indicator" class="skeleton__indicator"></div> <div part="indicator" class="skeleton__indicator"></div>

32
src/components/split-panel/split-panel.test.ts
View File

@@ -51,7 +51,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
await expect(splitPanel).to.be.accessible(); await expect(splitPanel).to.be.accessible();
@@ -62,7 +62,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
expect(splitPanel).to.contain.text('Start'); expect(splitPanel).to.contain.text('Start');
@@ -75,7 +75,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const startPanelWidth = getPanelWidth(splitPanel, 'start-panel'); const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
@@ -89,7 +89,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel position="25"> html`<wa-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const startPanelWidth = getPanelWidth(splitPanel, 'start-panel'); const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
@@ -103,7 +103,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel position="25"> html`<wa-split-panel position="25">
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
splitPanel.position = 10; splitPanel.position = 10;
@@ -118,7 +118,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const repositionPromise = oneEvent(splitPanel, 'wa-reposition'); const repositionPromise = oneEvent(splitPanel, 'wa-reposition');
@@ -131,7 +131,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -149,7 +149,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel disabled> html`<wa-split-panel disabled>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -167,7 +167,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel> html`<wa-split-panel>
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -188,7 +188,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel vertical style="height: 400px;"> html`<wa-split-panel vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const startPanelHeight = getPanelHeight(splitPanel, 'start-panel'); const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
@@ -202,7 +202,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel position="25" vertical style="height: 400px;"> html`<wa-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const startPanelHeight = getPanelHeight(splitPanel, 'start-panel'); const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
@@ -216,7 +216,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel position="25" vertical style="height: 400px;"> html`<wa-split-panel position="25" vertical style="height: 400px;">
<div slot="start" data-testid="start-panel">Start</div> <div slot="start" data-testid="start-panel">Start</div>
<div slot="end" data-testid="end-panel">End</div> <div slot="end" data-testid="end-panel">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
splitPanel.position = 10; splitPanel.position = 10;
@@ -231,7 +231,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel vertical style="height: 400px;"> html`<wa-split-panel vertical style="height: 400px;">
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const repositionPromise = oneEvent(splitPanel, 'wa-reposition'); const repositionPromise = oneEvent(splitPanel, 'wa-reposition');
@@ -244,7 +244,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel vertical style="height: 400px;"> html`<wa-split-panel vertical style="height: 400px;">
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -262,7 +262,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel disabled vertical style="height: 400px;"> html`<wa-split-panel disabled vertical style="height: 400px;">
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);
@@ -280,7 +280,7 @@ describe('<wa-split-panel>', () => {
html`<wa-split-panel vertical style="height: 400px;"> html`<wa-split-panel vertical style="height: 400px;">
<div slot="start">Start</div> <div slot="start">Start</div>
<div slot="end">End</div> <div slot="end">End</div>
</wa-split-panel>` </wa-split-panel>`,
); );
const positionInPixels = Math.round(splitPanel.positionInPixels); const positionInPixels = Math.round(splitPanel.positionInPixels);

2
src/components/split-panel/split-panel.ts
View File

@@ -153,7 +153,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100); this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
}, },
initialEvent: event initialEvent: event,
}); });
} }

4
src/components/switch/switch.ts
View File

@@ -254,7 +254,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
'switch--focused': this.hasFocus, 'switch--focused': this.hasFocus,
'switch--small': this.size === 'small', 'switch--small': this.size === 'small',
'switch--medium': this.size === 'medium', 'switch--medium': this.size === 'medium',
'switch--large': this.size === 'large' 'switch--large': this.size === 'large',
})} })}
> >
<input <input
@@ -289,7 +289,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
name="hint" name="hint"
part="hint" part="hint"
class=${classMap({ class=${classMap({
'has-slotted': hasHint 'has-slotted': hasHint,
})} })}
aria-hidden=${hasHint ? 'false' : 'true'} aria-hidden=${hasHint ? 'false' : 'true'}
>${this.hint}</slot >${this.hint}</slot

12
src/components/tab-group/tab-group.test.ts
View File

@@ -31,7 +31,7 @@ const getClientRectangles = (tabGroup: WaTabGroup): ClientRectangles => {
const body = shadowRoot.querySelector<HTMLElement>('[part=body]'); const body = shadowRoot.querySelector<HTMLElement>('[part=body]');
return { return {
body: body?.getBoundingClientRect(), body: body?.getBoundingClientRect(),
navigation: nav?.getBoundingClientRect() navigation: nav?.getBoundingClientRect(),
}; };
} }
return {}; return {};
@@ -198,7 +198,7 @@ describe('<wa-tab-group>', () => {
for (let i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
result.push( result.push(
html`<wa-tab panel="tab-${i}">Tab ${i}</wa-tab> html`<wa-tab panel="tab-${i}">Tab ${i}</wa-tab>
<wa-tab-panel name="tab-${i}">Content of tab ${i}0</wa-tab-panel> ` <wa-tab-panel name="tab-${i}">Content of tab ${i}0</wa-tab-panel> `,
); );
} }
return result; return result;
@@ -214,7 +214,7 @@ describe('<wa-tab-group>', () => {
source?: string | undefined, source?: string | undefined,
lineno?: number | undefined, lineno?: number | undefined,
colno?: number | undefined, colno?: number | undefined,
error?: Error | undefined error?: Error | undefined,
) => { ) => {
if ((event as string).includes('ResizeObserver') || event === 'Script error.') { if ((event as string).includes('ResizeObserver') || event === 'Script error.') {
return true; return true;
@@ -289,7 +289,7 @@ describe('<wa-tab-group>', () => {
it.skip('does scroll on scroll button click', async () => { it.skip('does scroll on scroll button click', async () => {
const numberOfElements = 15; const numberOfElements = 15;
const tabGroup = await fixture<WaTabGroup>( const tabGroup = await fixture<WaTabGroup>(
html`<wa-tab-group> ${generateTabs(numberOfElements)} </wa-tab-group>` html`<wa-tab-group> ${generateTabs(numberOfElements)} </wa-tab-group>`,
); );
await waitForScrollButtonsToBeRendered(tabGroup); await waitForScrollButtonsToBeRendered(tabGroup);
@@ -319,7 +319,7 @@ describe('<wa-tab-group>', () => {
describe('tab selection', () => { describe('tab selection', () => {
const expectCustomTabToBeActiveAfter = async ( const expectCustomTabToBeActiveAfter = async (
tabGroup: WaTabGroup, tabGroup: WaTabGroup,
action: () => Promise<void> action: () => Promise<void>,
): Promise<void> => { ): Promise<void> => {
const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header'); const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');
generalHeader.focus(); generalHeader.focus();
@@ -337,7 +337,7 @@ describe('<wa-tab-group>', () => {
const expectGeneralTabToBeStillActiveAfter = async ( const expectGeneralTabToBeStillActiveAfter = async (
tabGroup: WaTabGroup, tabGroup: WaTabGroup,
action: () => Promise<void> action: () => Promise<void>,
): Promise<void> => { ): Promise<void> => {
const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header'); const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');
generalHeader.focus(); generalHeader.focus();

8
src/components/tab-group/tab-group.ts
View File

@@ -276,7 +276,7 @@ export default class WaTabGroup extends WebAwesomeElement {
this.localize.dir() === 'rtl' this.localize.dir() === 'rtl'
? this.nav.scrollLeft + this.nav.clientWidth ? this.nav.scrollLeft + this.nav.clientWidth
: this.nav.scrollLeft - this.nav.clientWidth, : this.nav.scrollLeft - this.nav.clientWidth,
behavior: 'smooth' behavior: 'smooth',
}); });
} }
@@ -286,7 +286,7 @@ export default class WaTabGroup extends WebAwesomeElement {
this.localize.dir() === 'rtl' this.localize.dir() === 'rtl'
? this.nav.scrollLeft - this.nav.clientWidth ? this.nav.scrollLeft - this.nav.clientWidth
: this.nav.scrollLeft + this.nav.clientWidth, : this.nav.scrollLeft + this.nav.clientWidth,
behavior: 'smooth' behavior: 'smooth',
}); });
} }
@@ -294,7 +294,7 @@ export default class WaTabGroup extends WebAwesomeElement {
options = { options = {
emitEvents: true, emitEvents: true,
scrollBehavior: 'auto', scrollBehavior: 'auto',
...options ...options,
}; };
if (tab !== this.activeTab && !tab.disabled) { if (tab !== this.activeTab && !tab.disabled) {
@@ -383,7 +383,7 @@ export default class WaTabGroup extends WebAwesomeElement {
'tab-group--start': this.placement === 'start', 'tab-group--start': this.placement === 'start',
'tab-group--end': this.placement === 'end', 'tab-group--end': this.placement === 'end',
'tab-group--rtl': isRtl, 'tab-group--rtl': isRtl,
'tab-group--has-scroll-controls': this.hasScrollControls 'tab-group--has-scroll-controls': this.hasScrollControls,
})} })}
@click=${this.handleClick} @click=${this.handleClick}
@keydown=${this.handleKeyDown} @keydown=${this.handleKeyDown}

2
src/components/tab-panel/tab-panel.ts
View File

@@ -49,7 +49,7 @@ export default class WaTabPanel extends WebAwesomeElement {
part="base" part="base"
class=${classMap({ class=${classMap({
'tab-panel': true, 'tab-panel': true,
'tab-panel--active': this.active 'tab-panel--active': this.active,
})} })}
></slot> ></slot>
`; `;

2
src/components/tab/tab.ts
View File

@@ -77,7 +77,7 @@ export default class WaTab extends WebAwesomeElement {
class=${classMap({ class=${classMap({
tab: true, tab: true,
'tab--active': this.active, 'tab--active': this.active,
'tab--disabled': this.disabled 'tab--disabled': this.disabled,
})} })}
> >
<slot></slot> <slot></slot>

2
src/components/tag/tag.ts
View File

@@ -75,7 +75,7 @@ export default class WaTag extends WebAwesomeElement {
// Modifiers // Modifiers
'tag--pill': this.pill, 'tag--pill': this.pill,
'tag--removable': this.removable 'tag--removable': this.removable,
})} })}
> >
<slot part="content" class="tag__content"></slot> <slot part="content" class="tag__content"></slot>

Some files were not shown because too many files have changed in this diff Show More