Skip to content

Commit 409a7a4

Browse files
andreasbmandreasbm
committed
Added textfield behavior.
1 parent 9812297 commit 409a7a4

35 files changed

+354
-276
lines changed

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -71,21 +71,21 @@
7171
"docs": "npm run readme && npm run readme:backdrop && npm run readme:button && npm run readme:banner && npm run readme:card && npm run readme:divider && npm run readme:icon && npm run readme:label && npm run readme:nav && npm run readme:checkbox && npm run readme:dialog && npm run readme:popover && npm run readme:popover-card && npm run readme:progress-bar && npm run readme:progress-spinner && npm run readme:radio && npm run readme:ripple && npm run readme:select && npm run readme:textarea && npm run readme:textfield && npm run readme:title && npm run readme:tooltip && npm run readme:list-item && npm run readme:expansion"
7272
},
7373
"devDependencies": {
74+
"@a11y/skip-navigation": "0.0.6",
7475
"@appnest/readme": "^1.2.3",
75-
"@appnest/web-config": "0.4.10",
76-
"@appnest/web-router": "^1.2.8",
76+
"@appnest/web-config": "0.4.11",
77+
"@appnest/web-router": "^1.2.12",
7778
"@types/puppeteer": "^1.12.3",
7879
"code-prettify": "^0.1.0",
7980
"fs-extra": "^7.0.1",
8081
"glob": "^7.1.3",
81-
"karma-iframes": "^1.2.2",
8282
"puppeteer": "^1.13.0",
8383
"replace-ext": "^1.0.0",
8484
"ts-node": "^8.0.3",
8585
"tslib": "^1.9.3"
8686
},
8787
"dependencies": {
88-
"@appnest/focus-trap": "1.0.0",
88+
"@a11y/focus-trap": "1.0.1",
8989
"lit-element": "^2.1.0",
9090
"lit-html": "^1.0.0"
9191
},

‎rollup-build.config.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@ const plugins = ({tsConfig} = {}) => [
5252
const configs = [
5353
{
5454
input: files.src_index,
55-
// input: {
56-
// banner: "src/banner/index.ts"
57-
// },
5855
output: [
5956
{
6057
format: "esm",
@@ -81,7 +78,7 @@ const configs = [
8178
external: [
8279
...Object.keys(pkg.dependencies),
8380
...Object.keys(pkg.devDependencies),
84-
"@appnest/focus-trap/debounce",
81+
"@a11y/focus-trap/debounce",
8582
"lit-html/directives/if-defined",
8683
"tslib"
8784
]

‎rollup.config.ts

+135-91
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
1-
import {
2-
defaultExternals,
3-
defaultOutputConfig,
4-
defaultPlugins,
5-
defaultProdPlugins,
6-
defaultServePlugins,
7-
copy,
8-
isLibrary,
9-
isProd,
10-
isServe,
11-
workbox
12-
} from "@appnest/web-config";
13-
import {resolve, join} from "path";
1+
import { copy, defaultExternals, defaultOutputConfig, defaultPlugins, defaultProdPlugins, defaultServePlugins, isLibrary, isProd, isServe, workbox } from "@appnest/web-config";
2+
import { join, resolve } from "path";
143
import pkg from "./package.json";
154

165
const folders = {
@@ -31,85 +20,140 @@ const files = {
3120
dist_service_worker: join(folders.dist, "sw.js")
3221
};
3322

34-
export default {
35-
input: {
36-
main: files.main
37-
},
38-
output: [
39-
defaultOutputConfig({
40-
format: "esm",
41-
dir: folders.dist
42-
})
43-
],
44-
plugins: [
45-
...defaultPlugins({
46-
cleanConfig: {
47-
targets: [
48-
folders.dist
49-
]
50-
},
51-
copyConfig: {
52-
resources: [
53-
[folders.assets, folders.dist_assets]
54-
]
55-
},
56-
htmlTemplateConfig: {
57-
template: files.src_index,
58-
target: files.dist_index,
59-
include: /main(-.*)?\.js$/
60-
},
61-
importStylesConfig: {
62-
globals: ["main.scss"]
63-
}
64-
}),
65-
66-
// Serve
67-
...(isServe ? [
68-
...defaultServePlugins({
69-
serveConfig: {
70-
port: 1340,
71-
contentBase: folders.dist
72-
},
73-
livereloadConfig: {
74-
watch: folders.dist,
75-
port: 35730
76-
}
23+
export default [
24+
{
25+
// Module build
26+
input: {
27+
main: files.main
28+
},
29+
output: [
30+
defaultOutputConfig({
31+
format: "esm",
32+
dir: folders.dist
7733
})
78-
] : []),
79-
80-
// Production
81-
...(isProd ? [
82-
...defaultProdPlugins({
83-
dist: folders.dist,
84-
minifyLitHtmlConfig: {
85-
verbose: false,
86-
// Exclude all files since we need the original formatting for the demo code blocks
87-
exclude: /.*/
34+
],
35+
plugins: [
36+
...defaultPlugins({
37+
cleanConfig: {
38+
targets: [
39+
folders.dist
40+
]
41+
},
42+
copyConfig: {
43+
resources: [
44+
[folders.assets, folders.dist_assets]
45+
]
46+
},
47+
htmlTemplateConfig: {
48+
template: files.src_index,
49+
scriptType: "module",
50+
target: files.dist_index,
51+
include: /main(-.*)?\.js$/,
52+
polyfillConfig: {
53+
features: ["systemjs", "web-components"]
54+
}
55+
},
56+
importStylesConfig: {
57+
globals: ["main.scss"]
8858
}
8959
}),
90-
copy({
91-
resources: [
92-
[files.src_robots, files.dist_robots],
93-
[files.src_sw_extension, files.dist_sw_extension],
94-
]
95-
}),
96-
workbox({
97-
mode: "generateSW",
98-
workboxConfig: {
99-
globDirectory: folders.dist,
100-
swDest: files.dist_service_worker,
101-
globPatterns: [ `**/*.{js,png,html,css}`],
102-
importScripts: [`sw-extension.js`]
103-
}
104-
})
105-
] : []),
106-
],
107-
external: [
108-
...(isLibrary ? [
109-
...defaultExternals(pkg)
110-
] : [])
111-
],
112-
treeshake: isProd,
113-
context: "window"
114-
}
60+
61+
// Serve
62+
...(isServe ? [
63+
...defaultServePlugins({
64+
serveConfig: {
65+
port: 1340,
66+
contentBase: folders.dist
67+
},
68+
livereloadConfig: {
69+
watch: folders.dist,
70+
port: 35730
71+
}
72+
})
73+
] : []),
74+
75+
// Production
76+
...(isProd ? [
77+
...defaultProdPlugins({
78+
dist: folders.dist,
79+
minifyLitHtmlConfig: {
80+
verbose: false,
81+
// Exclude all files since we need the original formatting for the demo code blocks
82+
exclude: /.*/
83+
},
84+
compressConfig: {
85+
// Exclude everything since firebase compresses the files for us
86+
exclude: /.*/
87+
}
88+
}),
89+
copy({
90+
resources: [
91+
[files.src_robots, files.dist_robots],
92+
[files.src_sw_extension, files.dist_sw_extension]
93+
]
94+
}),
95+
workbox({
96+
mode: "generateSW",
97+
workboxConfig: {
98+
globDirectory: folders.dist,
99+
swDest: files.dist_service_worker,
100+
globPatterns: [`**/*.{js,png,html,css}`],
101+
importScripts: [`sw-extension.js`]
102+
}
103+
})
104+
] : [])
105+
],
106+
external: [
107+
...(isLibrary ? [
108+
...defaultExternals(pkg)
109+
] : [])
110+
],
111+
treeshake: isProd,
112+
context: "window"
113+
}
114+
// !isServe && isProd ? {
115+
// // CJS build
116+
// input: {
117+
// main: files.main
118+
// },
119+
// output: [
120+
// defaultOutputConfig({
121+
// format: "cjs",
122+
// dir: folders.dist,
123+
// entryFileNames: "[name]-legacy-[hash].js",
124+
// chunkFileNames: "[name]-legacy-[hash].js",
125+
// })
126+
// ],
127+
// plugins: [
128+
// ...defaultPlugins({
129+
// htmlTemplateConfig: {
130+
// template: files.dist_index,
131+
// target: files.dist_index,
132+
// scriptType: "text/javascript",
133+
// transformScript: ({filename, scriptType}) => `<script nomodule type="${scriptType}" src="${filename}"></script>`,
134+
// include: /main(-.*)?\.js$/
135+
// },
136+
// importStylesConfig: {
137+
// globals: ["main.scss"]
138+
// }
139+
// }),
140+
// ...defaultProdPlugins({
141+
// dist: folders.dist,
142+
// minifyLitHtmlConfig: {
143+
// verbose: false,
144+
// // Exclude all files since we need the original formatting for the demo code blocks
145+
// exclude: /.*/
146+
// }
147+
// }),
148+
// copy({
149+
// resources: [
150+
// [files.src_robots, files.dist_robots],
151+
// [files.src_sw_extension, files.dist_sw_extension]
152+
// ]
153+
// })
154+
// ],
155+
// treeshake: isProd,
156+
// context: "window"
157+
// } : undefined
158+
];
115159

‎src/demo/elements/navbar/navbar-element.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,8 @@ export class ThemeComponent extends WlNav {
124124
</aside>
125125
<aside id="right-container">
126126
<div id="navigation">
127-
<router-link tabindex="0" class="link" path="/get-started">Get Started</router-link>
128-
<router-link tabindex="0" class="link" path="/elements">Elements</router-link>
127+
<router-link class="link" path="/get-started">Get Started</router-link>
128+
<router-link class="link" path="/elements">Elements</router-link>
129129
</div>
130130
<wl-button aria-label="Toggle darkmode" id="dark-mode" @click="${() => this.toggleDarkMode()}" fab inverted flat outlined>
131131
${this.darkMode ? html`<wl-icon>flash_off</wl-icon>` : html`<wl-icon>flash_on</wl-icon>`}

‎src/demo/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
</head>
3636
<body>
3737

38+
<skip-button></skip-button>
3839
<div id="app">
3940
<navbar-element id="navbar" shadow fixed></navbar-element>
4041
<div id="router">

‎src/demo/main-content-focus.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let mainContentStart: HTMLElement | null;
2+
3+
export function setMainContentStart ($elem: HTMLElement | null) {
4+
mainContentStart = $elem;
5+
}
6+
7+
export function focusMainContentStart () {
8+
if (mainContentStart != null) {
9+
mainContentStart.focus();
10+
}
11+
}

‎src/demo/main.scss

-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ html {
1919
"primary": $palette-red
2020
), $validate: false);
2121
}
22-
23-
2422
}
2523

2624
body {

‎src/demo/main.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { GLOBAL_ROUTER_EVENTS_TARGET, GlobalRouterEventKind, path, ROUTER_SLOT_TAG_NAME, RouterSlot } from "@appnest/web-router";
1+
import "@a11y/skip-navigation";
22
import "@appnest/web-router";
3+
import { GLOBAL_ROUTER_EVENTS_TARGET, GlobalRouterEventKind, path, ROUTER_SLOT_TAG_NAME, RouterSlot } from "@appnest/web-router";
34
import { WlNav } from "../lib/nav/wl-nav";
45
import "./elements/navbar/navbar-element";
56
import { getMainScrollContainer, setMainScrollContainer } from "./main-scroll-target";
@@ -9,6 +10,7 @@ const $navbar = document.querySelector<WlNav>("#navbar")!;
910

1011
let currentPath = path();
1112

13+
1214
function updateShadow () {
1315
let shadow = true;
1416
if (window.scrollY <= 100 && !currentPath.startsWith("/elements")) {
@@ -57,4 +59,4 @@ if ("serviceWorker" in navigator) {
5759
navigator.serviceWorker.register("/sw.js").then(res => {
5860
console.log(`Service worker registered`, res);
5961
});
60-
}
62+
}

‎src/demo/pages/elements/elements-page.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { ChangeStateEvent, IRoute, isPathActive, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
1+
import "@a11y/skip-navigation";
2+
import { ChangeStateEvent, IRoute, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
23
import { customElement, html, LitElement, property, PropertyValues, query } from "lit-element";
34
import { repeat } from "lit-html/directives/repeat";
45
import "../../../lib/button/wl-button";
@@ -58,9 +59,10 @@ export default class ElementsPage extends LitElement {
5859

5960
protected render () {
6061
return html`
62+
<skip-button></skip-button>
6163
<div id="menu">
6264
${repeat(COMPONENTS_ROUTES.filter(route => route.path !== "**"), route => html`
63-
<router-link class="menu-item" path="${route.path}">
65+
<router-link delegateFocus class="menu-item" path="${route.path}">
6466
<wl-list-item clickable ?active="${path({endSlash: false}).endsWith(route.path)}">
6567
${route.data != null ? html`<img slot="before" class="img" src="${route.data.img}" alt="Icon" />` : ""}
6668
<span>${route.data != null ? route.data.title : route.path}</span>
@@ -69,6 +71,7 @@ export default class ElementsPage extends LitElement {
6971
`)}
7072
</div>
7173
<div id="router">
74+
<skip-anchor></skip-anchor>
7275
${this.currentRoute != null && this.currentRoute.data != null ? html`
7376
<header id="header">
7477
<aside>

0 commit comments

Comments
 (0)