ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #675 from ing-bank/feat/types

Browse source 
Add Types for @lion/core, @lion/tabs, and add type lint and types generate to build
This commit is contained in:
Joren Broekema 2020-07-13 11:43:13 +02:00 committed by GitHub
commit b63c07bb9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
60 changed files with 1386 additions and 900 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.circleci/config.yml
View file

@ -57,6 +57,7 @@ jobs:
command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
- run: git config --global user.email circleci@circleci
- run: git config --global user.name CircleCI
- run: npm run build:types
- run:
name: Publish package
command: "./node_modules/.bin/lerna publish --message 'chore: release new versions' --exact --yes"

4
.gitignore vendored
View file

@ -20,6 +20,10 @@ yarn-error.log
/build/
/bundlesize/dist/
## types
*.d.ts
!packages/*/types/*
## temp folders
/.tmp/
/coverage/

8
package.json
View file

@ -6,6 +6,8 @@
"packages/*"
],
"scripts": {
"build:docs": "wca analyze \"packages/tabs/**/*.js\"",
"build:types": "tsc -p tsconfig.build.types.json",
"bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize",
"dev-server": "es-dev-server",
"format": "npm run format:eslint && npm run format:prettier",
@ -16,6 +18,7 @@
"lint:eslint": "eslint --ext .js,.html .",
"lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '**/CHANGELOG.md'",
"lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"lint:types": "tsc",
"lint:versions": "node ./scripts/lint-versions.js",
"start": "npm run storybook",
"storybook": "start-storybook -p 9001",
@ -33,10 +36,11 @@
"@open-wc/building-rollup": "^1.2.1",
"@open-wc/demoing-storybook": "^2.0.2",
"@open-wc/eslint-config": "^1.0.0",
"@open-wc/testing": "^2.5.0",
"@open-wc/testing": "^2.5.18",
"@open-wc/testing-helpers": "^1.0.0",
"@storybook/addon-a11y": "~5.0.0",
"@web/test-runner": "^0.6.18",
"@types/chai-dom": "^0.0.8",
"@webcomponents/webcomponentsjs": "^2.2.5",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
@ -56,6 +60,8 @@
"rimraf": "^2.6.3",
"rollup": "^2.0.0",
"sinon": "^7.2.2",
"typescript": "^3.8.3",
"web-component-analyzer": "^1.0.3",
"webpack-merge": "^4.1.5",
"whatwg-fetch": "^3.0.0"
},

5
packages/accordion/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/ajax/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/button/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

4
packages/calendar/package.json
View file

@ -13,12 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/checkbox-group/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/core/index.js
View file

@ -1,8 +1,3 @@
/**
* Info for TypeScript users:
* For now please import types from lit-element and lit-html directly.
*/
// lit-element
export {
css,

7
packages/core/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",
@ -26,7 +29,7 @@
},
"sideEffects": false,
"dependencies": {
"@open-wc/dedupe-mixin": "^1.2.1",
"@open-wc/dedupe-mixin": "^1.2.18",
"@open-wc/scoped-elements": "^1.0.3",
"lit-element": "^2.2.1",
"lit-html": "^1.0.0"

326
packages/core/src/DelegateMixin.js
View file

@ -1,203 +1,177 @@
/* eslint-disable class-methods-use-this */
import { dedupeMixin } from '@open-wc/dedupe-mixin';
/**
* # DelegateMixin
* Forwards defined events, methods, properties and attributes to the defined target.
*
* @example
* get delegations() {
* return {
* ...super.delegations,
* target: () => this.shadowRoot.getElementById('button1'),
* events: ['click'],
* methods: ['click'],
* properties: ['disabled'],
* attributes: ['disabled'],
* };
* }
*
* render() {
* return html`
* <button id="button1">with delegation</button>
* `;
* }
*
* @type {function()}
* @polymerMixin
* @mixinFunction
* @typedef {import('../types/DelegateMixinTypes').DelegateMixin} DelegateMixin
*/
export const DelegateMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line
class DelegateMixin extends superclass {
constructor() {
super();
this.__eventsQueue = [];
this.__propertiesQueue = {};
this.__setupPropertyDelegation();
}
/**
* @returns {{target: null, events: Array, methods: Array, properties: Array, attributes: Array}}
*/
get delegations() {
return {
target: null,
events: [],
methods: [],
properties: [],
attributes: [],
};
}
/**
* @typedef DelegateEvent
* @property {string} type - Type of event
* @property {Array<?>} args - Event arguments
*/
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
this._connectDelegateMixin();
}
/** @type {DelegateMixin} */
const DelegateMixinImplementation = superclass =>
// eslint-disable-next-line
class DelegateMixin extends superclass {
constructor() {
super();
updated(...args) {
super.updated(...args);
this._connectDelegateMixin();
}
/** @type {DelegateEvent[]} */
this.__eventsQueue = [];
/**
* @param {string} type
* @param {Object} args
*/
addEventListener(type, ...args) {
const delegatedEvents = this.delegations.events;
if (delegatedEvents.indexOf(type) > -1) {
if (this.delegationTarget) {
this.delegationTarget.addEventListener(type, ...args);
} else {
this.__eventsQueue.push({ type, args });
}
/** @type {Object.<string,?>} */
this.__propertiesQueue = {};
this.__setupPropertyDelegation();
}
/**
* @returns {{target: Function, events: string[], methods: string[], properties: string[], attributes: string[]}}
*/
get delegations() {
return {
target: () => {},
events: [],
methods: [],
properties: [],
attributes: [],
};
}
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
this._connectDelegateMixin();
}
/** @param {import('lit-element').PropertyValues } changedProperties */
updated(changedProperties) {
super.updated(changedProperties);
this._connectDelegateMixin();
}
/**
* @param {string} type
* @param {...Object} args
*/
addEventListener(type, ...args) {
const delegatedEvents = this.delegations.events;
if (delegatedEvents.indexOf(type) > -1) {
if (this.delegationTarget) {
this.delegationTarget.addEventListener(type, ...args);
} else {
super.addEventListener(type, ...args);
this.__eventsQueue.push({ type, args });
}
} else {
super.addEventListener(type, ...args);
}
}
/**
* @param {string} name
* @param {string} value
*/
setAttribute(name, value) {
const attributeNames = this.delegations.attributes;
if (attributeNames.indexOf(name) > -1) {
if (this.delegationTarget) {
this.delegationTarget.setAttribute(name, value);
}
super.removeAttribute(name);
} else {
super.setAttribute(name, value);
}
}
/**
* @param {string} name
*/
removeAttribute(name) {
const attributeNames = this.delegations.attributes;
if (attributeNames.indexOf(name) > -1) {
if (this.delegationTarget) {
this.delegationTarget.removeAttribute(name);
}
/**
* @param {string} name
* @param {string} value
*/
setAttribute(name, value) {
const attributeNames = this.delegations.attributes;
if (attributeNames.indexOf(name) > -1) {
if (this.delegationTarget) {
this.delegationTarget.setAttribute(name, value);
}
super.removeAttribute(name);
} else {
super.setAttribute(name, value);
}
}
/**
* @protected
*/
_connectDelegateMixin() {
if (this.__connectedDelegateMixin) return;
if (!this.delegationTarget) {
this.delegationTarget = this.delegations.target();
}
/**
* @param {string} name
*/
removeAttribute(name) {
const attributeNames = this.delegations.attributes;
if (attributeNames.indexOf(name) > -1) {
if (this.delegationTarget) {
this.__emptyEventListenerQueue();
this.__emptyPropertiesQueue();
this.__initialAttributeDelegation();
this.__connectedDelegateMixin = true;
this.delegationTarget.removeAttribute(name);
}
}
super.removeAttribute(name);
}
/**
* @private
*/
__setupPropertyDelegation() {
const propertyNames = this.delegations.properties.concat(this.delegations.methods);
propertyNames.forEach(propertyName => {
Object.defineProperty(this, propertyName, {
get() {
const target = this.delegationTarget;
if (target) {
if (typeof target[propertyName] === 'function') {
return target[propertyName].bind(target);
}
return target[propertyName];
_connectDelegateMixin() {
if (this.__connectedDelegateMixin) return;
if (!this.delegationTarget) {
this.delegationTarget = this.delegations.target();
}
if (this.delegationTarget) {
this.__emptyEventListenerQueue();
this.__emptyPropertiesQueue();
this.__initialAttributeDelegation();
this.__connectedDelegateMixin = true;
}
}
__setupPropertyDelegation() {
const propertyNames = this.delegations.properties.concat(this.delegations.methods);
propertyNames.forEach(propertyName => {
Object.defineProperty(this, propertyName, {
get() {
const target = this.delegationTarget;
if (target) {
if (typeof target[propertyName] === 'function') {
return target[propertyName].bind(target);
}
if (this.__propertiesQueue[propertyName]) {
return this.__propertiesQueue[propertyName];
return target[propertyName];
}
if (this.__propertiesQueue[propertyName]) {
return this.__propertiesQueue[propertyName];
}
// This is the moment the attribute is not delegated (and thus removed) yet.
// and the property is not set, but the attribute is (it serves as a fallback for
// __propertiesQueue).
return this.getAttribute(propertyName);
},
set(newValue) {
if (this.delegationTarget) {
const oldValue = this.delegationTarget[propertyName];
this.delegationTarget[propertyName] = newValue;
// connect with observer system if available
if (typeof this.triggerObserversFor === 'function') {
this.triggerObserversFor(propertyName, newValue, oldValue);
}
// This is the moment the attribute is not delegated (and thus removed) yet.
// and the property is not set, but the attribute is (it serves as a fallback for
// __propertiesQueue).
return this.getAttribute(propertyName);
},
set(newValue) {
if (this.delegationTarget) {
const oldValue = this.delegationTarget[propertyName];
this.delegationTarget[propertyName] = newValue;
// connect with observer system if available
if (typeof this.triggerObserversFor === 'function') {
this.triggerObserversFor(propertyName, newValue, oldValue);
}
} else {
this.__propertiesQueue[propertyName] = newValue;
}
},
});
} else {
this.__propertiesQueue[propertyName] = newValue;
}
},
});
}
});
}
/**
* @private
*/
__initialAttributeDelegation() {
const attributeNames = this.delegations.attributes;
attributeNames.forEach(attributeName => {
const attributeValue = this.getAttribute(attributeName);
if (typeof attributeValue === 'string') {
this.delegationTarget.setAttribute(attributeName, attributeValue);
super.removeAttribute(attributeName);
}
});
}
__initialAttributeDelegation() {
const attributeNames = this.delegations.attributes;
attributeNames.forEach(attributeName => {
const attributeValue = this.getAttribute(attributeName);
if (typeof attributeValue === 'string') {
this.delegationTarget.setAttribute(attributeName, attributeValue);
super.removeAttribute(attributeName);
}
});
}
/**
* @private
*/
__emptyEventListenerQueue() {
this.__eventsQueue.forEach(ev => {
this.delegationTarget.addEventListener(ev.type, ...ev.args);
});
}
__emptyEventListenerQueue() {
this.__eventsQueue.forEach(ev => {
this.delegationTarget.addEventListener(ev.type, ...ev.args);
});
}
/**
* @private
*/
__emptyPropertiesQueue() {
Object.keys(this.__propertiesQueue).forEach(propName => {
this.delegationTarget[propName] = this.__propertiesQueue[propName];
});
}
},
);
__emptyPropertiesQueue() {
Object.keys(this.__propertiesQueue).forEach(propName => {
this.delegationTarget[propName] = this.__propertiesQueue[propName];
});
}
};
export const DelegateMixin = dedupeMixin(DelegateMixinImplementation);

105
packages/core/src/DisabledMixin.js
View file

@ -1,64 +1,67 @@
import { dedupeMixin } from '@open-wc/dedupe-mixin';
/**
* #DisabledMixin
*
* @polymerMixin
* @mixinFunction
* @typedef {import('../types/DisabledMixinTypes').DisabledMixin} DisabledMixin
*/
export const DisabledMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-shadow
class DisabledMixin extends superclass {
static get properties() {
return {
disabled: {
type: Boolean,
reflect: true,
},
};
}
constructor() {
super();
/** @type {DisabledMixin} */
const DisabledMixinImplementation = superclass =>
// eslint-disable-next-line no-shadow
class DisabledMixinHost extends superclass {
static get properties() {
return {
disabled: {
type: Boolean,
reflect: true,
},
};
}
constructor() {
super();
this.__requestedToBeDisabled = false;
this.__isUserSettingDisabled = true;
this.__restoreDisabledTo = false;
this.disabled = false;
}
makeRequestToBeDisabled() {
if (this.__requestedToBeDisabled === false) {
this.__requestedToBeDisabled = true;
this.__restoreDisabledTo = this.disabled;
this.__internalSetDisabled(true);
}
}
retractRequestToBeDisabled() {
if (this.__requestedToBeDisabled === true) {
this.__requestedToBeDisabled = false;
this.__isUserSettingDisabled = true;
this.__restoreDisabledTo = false;
this.disabled = false;
this.__internalSetDisabled(this.__restoreDisabledTo);
}
}
makeRequestToBeDisabled() {
if (this.__requestedToBeDisabled === false) {
this.__requestedToBeDisabled = true;
/** @param {boolean} value */
__internalSetDisabled(value) {
this.__isUserSettingDisabled = false;
this.disabled = value;
this.__isUserSettingDisabled = true;
}
/**
* @param {PropertyKey} name
* @param {?} oldValue
*/
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'disabled') {
if (this.__isUserSettingDisabled) {
this.__restoreDisabledTo = this.disabled;
}
if (this.disabled === false && this.__requestedToBeDisabled === true) {
this.__internalSetDisabled(true);
}
}
}
};
retractRequestToBeDisabled() {
if (this.__requestedToBeDisabled === true) {
this.__requestedToBeDisabled = false;
this.__internalSetDisabled(this.__restoreDisabledTo);
}
}
__internalSetDisabled(value) {
this.__isUserSettingDisabled = false;
this.disabled = value;
this.__isUserSettingDisabled = true;
}
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'disabled') {
if (this.__isUserSettingDisabled) {
this.__restoreDisabledTo = this.disabled;
}
if (this.disabled === false && this.__requestedToBeDisabled === true) {
this.__internalSetDisabled(true);
}
}
}
},
);
export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

140
packages/core/src/DisabledWithTabIndexMixin.js
View file

@ -2,85 +2,91 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
import { DisabledMixin } from './DisabledMixin.js';
/**
* #DisabledWithTabIndexMixin
*
* @polymerMixin
* @mixinFunction
* @typedef {import('../types/DisabledWithTabIndexMixinTypes').DisabledWithTabIndexMixin} DisabledWithTabIndexMixin
*/
export const DisabledWithTabIndexMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-shadow
class DisabledWithTabIndexMixin extends DisabledMixin(superclass) {
static get properties() {
return {
// we use a property here as if we use the native tabIndex we can not set a default value
// in the constructor as it synchronously sets the attribute which is not allowed in the
// constructor phase
tabIndex: {
type: Number,
reflect: true,
attribute: 'tabindex',
},
};
/** @type {DisabledWithTabIndexMixin} */
const DisabledWithTabIndexMixinImplementation = superclass =>
// eslint-disable-next-line no-shadow
class DisabledWithTabIndexMixinHost extends DisabledMixin(superclass) {
static get properties() {
return {
// we use a property here as if we use the native tabIndex we can not set a default value
// in the constructor as it synchronously sets the attribute which is not allowed in the
// constructor phase
tabIndex: {
type: Number,
reflect: true,
attribute: 'tabindex',
},
};
}
constructor() {
super();
this.__isUserSettingTabIndex = true;
this.__restoreTabIndexTo = 0;
this.__internalSetTabIndex(0);
}
makeRequestToBeDisabled() {
super.makeRequestToBeDisabled();
if (this.__requestedToBeDisabled === false && this.tabIndex != null) {
this.__restoreTabIndexTo = this.tabIndex;
}
}
constructor() {
super();
this.__isUserSettingTabIndex = true;
this.__restoreTabIndexTo = 0;
this.__internalSetTabIndex(0);
retractRequestToBeDisabled() {
super.retractRequestToBeDisabled();
if (this.__requestedToBeDisabled === true) {
this.__internalSetTabIndex(this.__restoreTabIndexTo);
}
}
makeRequestToBeDisabled() {
super.makeRequestToBeDisabled();
if (this.__requestedToBeDisabled === false) {
this.__restoreTabIndexTo = this.tabIndex;
}
}
/**
* @param {number} value
*/
__internalSetTabIndex(value) {
this.__isUserSettingTabIndex = false;
this.tabIndex = value;
this.__isUserSettingTabIndex = true;
}
retractRequestToBeDisabled() {
super.retractRequestToBeDisabled();
if (this.__requestedToBeDisabled === true) {
/**
* @param {PropertyKey} name
* @param {?} oldValue
*/
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'disabled') {
if (this.disabled) {
this.__internalSetTabIndex(-1);
} else {
this.__internalSetTabIndex(this.__restoreTabIndexTo);
}
}
__internalSetTabIndex(value) {
this.__isUserSettingTabIndex = false;
this.tabIndex = value;
this.__isUserSettingTabIndex = true;
}
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'disabled') {
if (this.disabled) {
this.__internalSetTabIndex(-1);
} else {
this.__internalSetTabIndex(this.__restoreTabIndexTo);
}
if (name === 'tabIndex') {
if (this.__isUserSettingTabIndex && this.tabIndex != null) {
this.__restoreTabIndexTo = this.tabIndex;
}
if (name === 'tabIndex') {
if (this.__isUserSettingTabIndex) {
this.__restoreTabIndexTo = this.tabIndex;
}
if (this.tabIndex !== -1 && this.__requestedToBeDisabled === true) {
this.__internalSetTabIndex(-1);
}
}
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
// for ShadyDom the timing is a little different and we need to make sure
// the tabindex gets correctly updated here
if (this.disabled) {
if (this.tabIndex !== -1 && this.__requestedToBeDisabled === true) {
this.__internalSetTabIndex(-1);
}
}
},
);
}
/** @param {import('lit-element').PropertyValues } changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
// for ShadyDom the timing is a little different and we need to make sure
// the tabindex gets correctly updated here
if (this.disabled) {
this.__internalSetTabIndex(-1);
}
}
};
export const DisabledWithTabIndexMixin = dedupeMixin(DisabledWithTabIndexMixinImplementation);

5
packages/core/src/LionSingleton.js
View file

@ -6,10 +6,11 @@
*/
export class LionSingleton {
/**
* @param {function()} mixin
* @param {function} mixin
*/
static addInstanceMixin(mixin) {
if (!this.__instanceMixins) {
/** @type {function[]} */
this.__instanceMixins = [];
}
this.__instanceMixins.push(mixin);
@ -26,6 +27,8 @@ export class LionSingleton {
Klass = mixin(Klass);
});
}
// Ignoring, because it's up to the extension layer to accept arguments in its constructor
// @ts-ignore-next-line
return new Klass(...args);
}

117
packages/core/src/SlotMixin.js
View file

@ -1,78 +1,59 @@
/* eslint-disable class-methods-use-this */
import { dedupeMixin } from '@open-wc/dedupe-mixin';
/**
* # SlotMixin
* `SlotMixin`, when attached to the DOM it creates content for defined slots in the Light DOM.
* The content element is created using a factory function and is assigned a slot name from the key.
* Existing slot content is not overridden.
*
* The purpose is to have the default content in the Light DOM rather than hidden in Shadow DOM
* like default slot content works natively.
*
* @example
* get slots() {
* return {
* ...super.slots,
* // appends <div slot="foo"></div> to the Light DOM of this element
* foo: () => document.createElement('div'),
* };
* }
*
* @type {function()}
* @polymerMixin
* @mixinFunction
* @typedef {import('../types/SlotMixinTypes').SlotMixin} SlotMixin
* @typedef {import('../types/SlotMixinTypes').SlotsMap} SlotsMap
*/
export const SlotMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-unused-vars, no-shadow
class SlotMixin extends superclass {
/**
* @returns {{}}
*/
get slots() {
return {};
}
constructor() {
super();
this.__privateSlots = new Set(null);
}
/** @type {SlotMixin} */
const SlotMixinImplementation = superclass =>
// eslint-disable-next-line no-unused-vars, no-shadow
class SlotMixinHost extends superclass {
/**
* @return {SlotsMap}
*/
get slots() {
return {};
}
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
this._connectSlotMixin();
}
constructor() {
super();
this.__privateSlots = new Set(null);
}
/**
* @protected
*/
_connectSlotMixin() {
if (!this.__isConnectedSlotMixin) {
Object.keys(this.slots).forEach(slotName => {
if (!this.querySelector(`[slot=${slotName}]`)) {
const slotFactory = this.slots[slotName];
const slotContent = slotFactory();
if (slotContent instanceof Element) {
slotContent.setAttribute('slot', slotName);
this.appendChild(slotContent);
this.__privateSlots.add(slotName);
} // ignore non-elements to enable conditional slots
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
this._connectSlotMixin();
}
_connectSlotMixin() {
if (!this.__isConnectedSlotMixin) {
Object.keys(this.slots).forEach(slotName => {
if (!this.querySelector(`[slot=${slotName}]`)) {
const slotFactory = this.slots[slotName];
const slotContent = slotFactory();
// ignore non-elements to enable conditional slots
if (slotContent instanceof Element) {
slotContent.setAttribute('slot', slotName);
this.appendChild(slotContent);
this.__privateSlots.add(slotName);
}
});
this.__isConnectedSlotMixin = true;
}
}
});
this.__isConnectedSlotMixin = true;
}
}
/**
* @protected
* @param {string} slotName Name of the slot
* @return {boolean} true if given slot name been created by SlotMixin
*/
_isPrivateSlot(slotName) {
return this.__privateSlots.has(slotName);
}
},
);
/**
* @param {string} slotName Name of the slot
* @return {boolean} true if given slot name been created by SlotMixin
*/
_isPrivateSlot(slotName) {
return this.__privateSlots.has(slotName);
}
};
export const SlotMixin = dedupeMixin(SlotMixinImplementation);

125
packages/core/src/UpdateStylesMixin.js
View file

@ -1,59 +1,78 @@
/* global ShadyCSS */
import { dedupeMixin } from '@open-wc/dedupe-mixin';
export const UpdateStylesMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-shadow
class UpdateStylesMixin extends superclass {
/**
* @example
* <my-element>
* <style>
* :host {
* color: var(--foo);
* }
* </style>
* </my-element>
*
* $0.updateStyles({'background': 'orange', '--foo': '#fff'})
* Chrome, Firefox: <my-element style="background: orange; --foo: bar;">
* IE: <my-element>
* => to head: <style>color: #fff</style>
*
* @param {Object} updateStyles
*/
updateStyles(updateStyles) {
const styleString = this.getAttribute('style') || this.getAttribute('data-style') || '';
const currentStyles = styleString.split(';').reduce((acc, stylePair) => {
const parts = stylePair.split(':');
if (parts.length === 2) {
/* eslint-disable-next-line prefer-destructuring */
acc[parts[0]] = parts[1];
}
return acc;
}, {});
/**
* @typedef {import('../types/UpdateStylesMixinTypes').UpdateStylesMixin} UpdateStylesMixin
* @typedef {import('../types/UpdateStylesMixinTypes').StylesMap} StylesMap
*/
const newStyles = { ...currentStyles, ...updateStyles };
let newStylesString = '';
if (typeof ShadyCSS === 'object' && !ShadyCSS.nativeShadow) {
// No ShadowDOM => IE, Edge
const newCssVariablesObj = {};
Object.keys(newStyles).forEach(key => {
if (key.indexOf('--') === -1) {
newStylesString += `${key}:${newStyles[key]};`;
} else {
newCssVariablesObj[key] = newStyles[key];
}
});
this.setAttribute('style', newStylesString);
ShadyCSS.styleSubtree(this, newCssVariablesObj);
} else {
// has shadowdom => Chrome, Firefox, Safari
Object.keys(newStyles).forEach(key => {
newStylesString += `${key}: ${newStyles[key]};`;
});
this.setAttribute('style', newStylesString);
/** @type {UpdateStylesMixin} */
const UpdateStylesMixinImplementation = superclass =>
// eslint-disable-next-line no-shadow
class UpdateStylesMixinHost extends superclass {
/**
* @example
* <my-element>
* <style>
* :host {
* color: var(--foo);
* }
* </style>
* </my-element>
*
* $0.updateStyles({'background': 'orange', '--foo': '#fff'})
* Chrome, Firefox: <my-element style="background: orange; --foo: bar;">
* IE: <my-element>
* => to head: <style>color: #fff</style>
*
* @param {StylesMap} updateStyles
*/
updateStyles(updateStyles) {
const styleString = this.getAttribute('style') || this.getAttribute('data-style') || '';
/**
* reducer function
* @param {Object.<string, string>} acc
* @param {string} stylePair
*/
const reducer = (acc, stylePair) => {
/** @type {Array.<string>} */
const parts = stylePair.split(':');
if (parts.length === 2) {
// eslint-disable-next-line prefer-destructuring
acc[parts[0]] = parts[1];
}
return acc;
};
const currentStyles = styleString.split(';').reduce(reducer, {});
const newStyles = { ...currentStyles, ...updateStyles };
let newStylesString = '';
// @ts-ignore not sure how to type ShadyCSS..
if (typeof ShadyCSS === 'object' && !ShadyCSS.nativeShadow) {
// No ShadowDOM => IE, Edge
/** @type {Object.<string, string>} */
const newCssVariablesObj = {};
Object.keys(newStyles).forEach(key => {
if (key.indexOf('--') === -1) {
newStylesString += `${key}:${newStyles[key]};`;
} else {
newCssVariablesObj[key] = newStyles[key];
}
});
this.setAttribute('style', newStylesString);
// @ts-ignore not sure how to type ShadyCSS..
ShadyCSS.styleSubtree(this, newCssVariablesObj);
} else {
// has shadowdom => Chrome, Firefox, Safari
Object.keys(newStyles).forEach(key => {
newStylesString += `${key}: ${newStyles[key]};`;
});
this.setAttribute('style', newStylesString);
}
},
);
}
};
export const UpdateStylesMixin = dedupeMixin(UpdateStylesMixinImplementation);

10
packages/core/src/differentKeyEventNamesShimIE.js
View file

@ -3,6 +3,7 @@ if (typeof window.KeyboardEvent !== 'function') {
const event = KeyboardEvent.prototype;
const descriptor = Object.getOwnPropertyDescriptor(event, 'key');
if (descriptor) {
/** @type {Object.<string, string>} */
const keys = {
Win: 'Meta',
Scroll: 'ScrollLock',
@ -26,10 +27,13 @@ if (typeof window.KeyboardEvent !== 'function') {
Object.defineProperty(event, 'key', {
// eslint-disable-next-line object-shorthand, func-names
get: function () {
const key = descriptor.get.call(this);
if (descriptor.get) {
const key = descriptor.get.call(this);
// eslint-disable-next-line no-prototype-builtins
return keys.hasOwnProperty(key) ? keys[key] : key;
// eslint-disable-next-line no-prototype-builtins
return keys.hasOwnProperty(key) ? keys[key] : key;
}
return undefined;
},
});
}

370
packages/core/test/DelegateMixin.test.js
View file

@ -14,7 +14,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
events: ['click'],
};
}
@ -27,7 +27,7 @@ describe('DelegateMixin', () => {
const element = await fixture(`<${tag}></${tag}>`);
const cb = sinon.spy();
element.addEventListener('click', cb);
element.shadowRoot.getElementById('button1').click();
element.shadowRoot?.getElementById('button1')?.click();
expect(cb.callCount).to.equal(1);
});
@ -37,7 +37,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
events: ['click'],
};
}
@ -47,12 +47,12 @@ describe('DelegateMixin', () => {
}
},
);
const element = document.createElement(tag);
const element = /** @type {LitElement} */ (document.createElement(tag));
const cb = sinon.spy();
element.addEventListener('click', cb);
document.body.appendChild(element);
await element.updateComplete;
element.shadowRoot.getElementById('button1').click();
element.shadowRoot?.getElementById('button1')?.click();
expect(cb.callCount).to.equal(1);
// cleanup
@ -80,37 +80,37 @@ describe('DelegateMixin', () => {
},
);
const element = await fixture(`
<${tag}><button slot="button">click me</button></${tag}>`);
const element = await fixture(`<${tag}><button slot="button">click me</button></${tag}>`);
const cb = sinon.spy();
element.addEventListener('click', cb);
Array.from(element.children)
.find(child => child.slot === 'button')
.click();
const childEl = /** @type {HTMLElement} */ (Array.from(element.children)?.find(
child => child.slot === 'button',
));
childEl?.click();
expect(cb.callCount).to.equal(1);
});
it('will still support other events', async () => {
const tag = defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
events: ['click'],
};
}
class FooDelegate extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot?.getElementById('button1'),
events: ['click'],
};
}
render() {
return html`<button id="button1">with delegation</button>`;
}
render() {
return html`<button id="button1">with delegation</button>`;
}
foo() {
this.dispatchEvent(new CustomEvent('foo-event', { bubbles: true, composed: true }));
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
foo() {
this.dispatchEvent(new CustomEvent('foo-event', { bubbles: true, composed: true }));
}
}
const tag = defineCE(FooDelegate);
const element = /** @type {FooDelegate} */ (await fixture(`<${tag}></${tag}>`));
const cb = sinon.spy();
element.addEventListener('foo-event', cb);
element.foo();
@ -123,7 +123,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
methods: ['click'],
};
}
@ -133,9 +133,9 @@ describe('DelegateMixin', () => {
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
const element = /** @type {HTMLElement} */ (await fixture(`<${tag}></${tag}>`));
const cb = sinon.spy();
element.shadowRoot.getElementById('button1').addEventListener('click', cb);
element.shadowRoot?.getElementById('button1')?.addEventListener('click', cb);
element.click();
expect(cb.callCount).to.equal(1);
});
@ -147,56 +147,69 @@ describe('DelegateMixin', () => {
this.foo = { a: 'a', b: 'b' };
}
/**
* @param {?} a
* @param {?} b
*/
setFooAandB(a, b) {
this.foo.a = a;
this.foo.b = b;
}
}
customElements.define('delegate-argument-sub', DelegateArgumentSub);
const tag = defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('sub'),
methods: ['setFooAandB'],
};
}
render() {
return html`<delegate-argument-sub id="sub"></delegate-argument-sub>`;
}
},
);
class DelegateArgumentParent extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot?.getElementById('sub'),
methods: ['setFooAandB'],
};
}
const element = await fixture(`<${tag}></${tag}>`);
element.disabled = true;
render() {
return html`<delegate-argument-sub id="sub"></delegate-argument-sub>`;
}
}
const tag = defineCE(DelegateArgumentParent);
const element = /** @type {DelegateArgumentParent} */ (await fixture(`<${tag}></${tag}>`));
// @ts-ignore because this method, even though it doesn't exist on the parent, gets delegated through delegations to the child, where it does exist!
element.setFooAandB('newA', 'newB');
expect(element.shadowRoot.getElementById('sub').foo.a).to.equal('newA');
expect(element.shadowRoot.getElementById('sub').foo.b).to.equal('newB');
const sub = /** @type {DelegateArgumentSub} */ (element.shadowRoot?.getElementById('sub'));
expect(sub.foo.a).to.equal('newA');
expect(sub.foo.b).to.equal('newB');
});
it('will set delegated properties', async () => {
const tag = defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
properties: ['disabled'],
};
}
class PropDelegate extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot?.getElementById('button1'),
properties: ['disabled'],
};
}
render() {
return html`<button id="button1">with delegation</button>`;
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
render() {
return html`<button id="button1">with delegation</button>`;
}
}
const tag = defineCE(PropDelegate);
const element = /** @type {PropDelegate} */ (await fixture(`<${tag}></${tag}>`));
// @ts-ignore ignoring this one, because disabled is delegated through target so it indeed does not inherently exist on the div element
element.disabled = true;
await element.updateComplete;
expect(element.shadowRoot.getElementById('button1').disabled).to.equal(true);
expect(element.shadowRoot.getElementById('button1').hasAttribute('disabled')).to.equal(true);
/** @typedef {Object.<string,boolean>} Btn */
/** @typedef {Btn & HTMLElement} DelegatedBtn */
const btn = /** @type {DelegatedBtn} */ (element.shadowRoot?.getElementById('button1'));
expect(btn?.disabled).to.equal(true);
expect(btn?.hasAttribute('disabled')).to.equal(true);
});
it('delegates properties before delegation target is attached to DOM', async () => {
@ -205,7 +218,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
properties: ['disabled'],
};
}
@ -215,12 +228,18 @@ describe('DelegateMixin', () => {
}
},
);
const element = document.createElement(tag);
/** @typedef {Object.<string,boolean>} Btn */
/** @typedef {Btn & LitElement} DelegatedEl */
const element = /** @type {DelegatedEl} */ (document.createElement(tag));
element.disabled = true;
document.body.appendChild(element);
await element.updateComplete;
expect(element.shadowRoot.getElementById('button1').disabled).to.equal(true);
/** @typedef {Btn & HTMLElement} DelegatedBtn */
const btn = /** @type {DelegatedBtn} */ (element.shadowRoot?.getElementById('button1'));
expect(btn?.disabled).to.equal(true);
// cleanup
document.body.removeChild(element);
});
@ -231,7 +250,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
attributes: ['disabled'],
};
}
@ -241,11 +260,11 @@ describe('DelegateMixin', () => {
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
const element = /** @type {LitElement} */ (await fixture(`<${tag}></${tag}>`));
element.setAttribute('disabled', '');
await element.updateComplete;
expect(element.hasAttribute('disabled')).to.equal(false);
expect(element.shadowRoot.getElementById('button1').hasAttribute('disabled')).to.equal(true);
expect(element.shadowRoot?.getElementById('button1')?.hasAttribute('disabled')).to.equal(true);
});
it('will read inital attributes', async () => {
@ -254,7 +273,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
attributes: ['disabled'],
};
}
@ -266,7 +285,7 @@ describe('DelegateMixin', () => {
);
const element = await fixture(`<${tag} disabled></${tag}>`);
expect(element.hasAttribute('disabled')).to.equal(false);
expect(element.shadowRoot.getElementById('button1').hasAttribute('disabled')).to.equal(true);
expect(element.shadowRoot?.getElementById('button1')?.hasAttribute('disabled')).to.equal(true);
});
it('will delegate removeAttribute', async () => {
@ -275,7 +294,7 @@ describe('DelegateMixin', () => {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.getElementById('button1'),
target: () => this.shadowRoot?.getElementById('button1'),
attributes: ['disabled'],
};
}
@ -285,135 +304,146 @@ describe('DelegateMixin', () => {
}
},
);
const element = await fixture(`<${tag} disabled></${tag}>`);
element.removeAttribute('disabled', '');
const element = /** @type {LitElement} */ (await fixture(`<${tag} disabled></${tag}>`));
element.removeAttribute('disabled');
await element.updateComplete;
expect(element.hasAttribute('disabled')).to.equal(false);
expect(element.shadowRoot.getElementById('button1').hasAttribute('disabled')).to.equal(false);
expect(element.shadowRoot?.getElementById('button1')?.hasAttribute('disabled')).to.equal(false);
});
it('respects user defined values for delegated attributes and properties', async () => {
const tag = defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
// this just means itś config is set to the queue when called before connectedCallback
target: () => this.scheduledElement,
attributes: ['type'],
properties: ['type'],
};
}
class ScheduledElement extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
// this just means itś config is set to the queue when called before connectedCallback
target: () => this.scheduledElement,
attributes: ['type'],
properties: ['type'],
};
}
get scheduledElement() {
return this.querySelector('input');
}
get scheduledElement() {
return this.querySelector('input');
}
constructor() {
super();
this.type = 'email'; // 1. here we set the delegated prop and it should be scheduled
}
constructor() {
super();
this.type = 'email'; // 1. here we set the delegated prop and it should be scheduled
}
connectedCallback() {
// 2. this is where we add teh delegation target (so after 1)
this.appendChild(document.createElement('input'));
super.connectedCallback(); // let the DelegateMixin do its work
}
},
);
connectedCallback() {
// 2. this is where we add teh delegation target (so after 1)
this.appendChild(document.createElement('input'));
super.connectedCallback(); // let the DelegateMixin do its work
}
}
const tag = defineCE(ScheduledElement);
const tagName = unsafeStatic(tag);
// Here, the Application Developerd tries to set the type via attribute
const elementAttr = await fixture(`<${tag} type="radio"></${tag}>`);
expect(elementAttr.scheduledElement.type).to.equal('radio');
const elementAttr = /** @type {ScheduledElement} */ (await fixture(
`<${tag} type="radio"></${tag}>`,
));
expect(elementAttr.scheduledElement?.type).to.equal('radio');
// Here, the Application Developer tries to set the type via property
const elementProp = await fixture(html`<${tagName} .type=${'radio'}></${tagName}>`);
expect(elementProp.scheduledElement.type).to.equal('radio');
const elementProp = /** @type {ScheduledElement} */ (await fixture(
html`<${tagName} .type=${'radio'}></${tagName}>`,
));
expect(elementProp.scheduledElement?.type).to.equal('radio');
});
it(`uses attribute value as a fallback for delegated property getter
when property not set by user and delegationTarget not ready`, async () => {
const tag = defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.delegatedEl,
properties: ['type'],
attributes: ['type'],
};
}
class FallbackEl extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.delegatedEl,
properties: ['type'],
attributes: ['type'],
};
}
get delegatedEl() {
// returns null, so we can test that "cached" attr is used as fallback
return null;
}
},
);
const element = await fixture(`<${tag} type="radio"></${tag}>`);
get delegatedEl() {
// returns null, so we can test that "cached" attr is used as fallback
return null;
}
}
const tag = defineCE(FallbackEl);
const element = /** @type {FallbackEl} */ (await fixture(`<${tag} type="radio"></${tag}>`));
expect(element.delegatedEl).to.equal(null);
// @ts-ignore ignoring this one, because type is delegated through target so it indeed does not inherently exist on the div element
expect(element.type).to.equal('radio'); // value retrieved from host instead of delegatedTarget
});
it('works with connectedCallback', async () => {
const tag = await defineCE(
class extends DelegateMixin(HTMLElement) {
get delegations() {
return {
...super.delegations,
target: () => this.querySelector('div'),
properties: ['foo'],
};
}
},
);
const element = await fixture(`<${tag}><div></div></${tag}>`);
class ConnectedElement extends DelegateMixin(HTMLElement) {
get delegations() {
return {
...super.delegations,
target: () => this.querySelector('div'),
properties: ['foo'],
};
}
}
const tag = await defineCE(ConnectedElement);
const element = /** @type {ConnectedElement} */ (await fixture(`<${tag}><div></div></${tag}>`));
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
element.foo = 'new';
expect(element.querySelector('div').foo).to.equal('new');
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
expect(element.querySelector('div')?.foo).to.equal('new');
});
it('works with shadow dom', async () => {
const tag = await defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot.querySelector('div'),
properties: ['foo'],
};
}
class A extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.shadowRoot?.querySelector('div'),
properties: ['foo'],
};
}
render() {
return html`<div></div>`;
}
},
);
render() {
return html`<div></div>`;
}
}
const tag = await defineCE(A);
const element = await fixture(`<${tag}></${tag}>`);
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
element.foo = 'new';
expect(element.shadowRoot.querySelector('div').foo).to.equal('new');
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
expect(element.shadowRoot?.querySelector('div')?.foo).to.equal('new');
});
it('works with light dom', async () => {
const tag = await defineCE(
class extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.querySelector('div'),
properties: ['foo'],
};
}
class A extends DelegateMixin(LitElement) {
get delegations() {
return {
...super.delegations,
target: () => this.querySelector('div'),
properties: ['foo'],
};
}
createRenderRoot() {
return this;
}
createRenderRoot() {
return this;
}
render() {
return html`<div></div>`;
}
},
);
render() {
return html`<div></div>`;
}
}
const tag = await defineCE(A);
const element = await fixture(`<${tag}></${tag}>`);
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
element.foo = 'new';
expect(element.querySelector('div').foo).to.equal('new');
// @ts-ignore ignoring this one, because foo is delegated through target so it indeed does not inherently exist on the div element
expect(element.querySelector('div')?.foo).to.equal('new');
});
});

31
packages/core/test/DisabledMixin.test.js
View file

@ -3,21 +3,26 @@ import { LitElement } from '../index.js';
import { DisabledMixin } from '../src/DisabledMixin.js';
describe('DisabledMixin', () => {
class CanBeDisabled extends DisabledMixin(LitElement) {}
before(() => {
class CanBeDisabled extends DisabledMixin(LitElement) {}
customElements.define('can-be-disabled', CanBeDisabled);
});
it('reflects disabled to attribute', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
expect(el.hasAttribute('disabled')).to.be.false;
el.makeRequestToBeDisabled();
el.disabled = true;
await el.updateComplete;
expect(el.hasAttribute('disabled')).to.be.true;
});
it('can be requested to be disabled', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
await el.updateComplete;
@ -25,7 +30,9 @@ describe('DisabledMixin', () => {
});
it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
@ -34,14 +41,18 @@ describe('DisabledMixin', () => {
});
it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
const el = await fixture(html`<can-be-disabled disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true;
});
it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
el.retractRequestToBeDisabled();
@ -49,7 +60,9 @@ describe('DisabledMixin', () => {
});
it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
@ -57,7 +70,9 @@ describe('DisabledMixin', () => {
});
it('will restore last state after retractRequestToBeDisabled()', async () => {
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
const el = /** @type {CanBeDisabled} */ (await fixture(
html`<can-be-disabled></can-be-disabled>`,
));
el.makeRequestToBeDisabled();
el.disabled = true;
el.retractRequestToBeDisabled();

30
packages/core/test/DisabledWithTabIndexMixin.test.js
View file

@ -4,23 +4,23 @@ import { LitElement } from '../index.js';
import { DisabledWithTabIndexMixin } from '../src/DisabledWithTabIndexMixin.js';
describe('DisabledWithTabIndexMixin', () => {
class WithTabIndex extends DisabledWithTabIndexMixin(LitElement) {}
before(() => {
class WithTabIndex extends DisabledWithTabIndexMixin(LitElement) {}
customElements.define('can-be-disabled-with-tab-index', WithTabIndex);
});
it('has an initial tabIndex of 0', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index></can-be-disabled-with-tab-index>
`);
`));
expect(el.tabIndex).to.equal(0);
expect(el.getAttribute('tabindex')).to.equal('0');
});
it('sets tabIndex to -1 if disabled', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index></can-be-disabled-with-tab-index>
`);
`));
el.disabled = true;
expect(el.tabIndex).to.equal(-1);
await el.updateComplete;
@ -28,9 +28,9 @@ describe('DisabledWithTabIndexMixin', () => {
});
it('disabled does not override user provided tabindex', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index tabindex="5" disabled></can-be-disabled-with-tab-index>
`);
`));
expect(el.getAttribute('tabindex')).to.equal('-1');
el.disabled = false;
await el.updateComplete;
@ -38,9 +38,9 @@ describe('DisabledWithTabIndexMixin', () => {
});
it('can be disabled imperatively', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
`);
`));
expect(el.getAttribute('tabindex')).to.equal('-1');
el.disabled = false;
@ -55,9 +55,9 @@ describe('DisabledWithTabIndexMixin', () => {
});
it('will not allow to change tabIndex after makeRequestToBeDisabled()', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index></can-be-disabled-with-tab-index>
`);
`));
el.makeRequestToBeDisabled();
el.tabIndex = 5;
@ -67,9 +67,9 @@ describe('DisabledWithTabIndexMixin', () => {
});
it('will restore last tabIndex after retractRequestToBeDisabled()', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index tabindex="5"></can-be-disabled-with-tab-index>
`);
`));
el.makeRequestToBeDisabled();
expect(el.tabIndex).to.equal(-1);
await el.updateComplete;
@ -96,9 +96,9 @@ describe('DisabledWithTabIndexMixin', () => {
});
it('may allow multiple calls to retractRequestToBeDisabled', async () => {
const el = await fixture(html`
const el = /** @type {WithTabIndex} */ (await fixture(html`
<can-be-disabled-with-tab-index disabled></can-be-disabled-with-tab-index>
`);
`));
el.retractRequestToBeDisabled();
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true;

14
packages/core/test/LionSingleton.test.js
View file

@ -11,6 +11,11 @@ describe('LionSingleton', () => {
it('supports parameters for .getInstance(foo, bar)', async () => {
class MySingleton extends LionSingleton {
/**
*
* @param {string} foo
* @param {string} bar
*/
constructor(foo, bar) {
super();
this.foo = foo;
@ -59,6 +64,7 @@ describe('LionSingleton', () => {
});
it('can at any time add mixins via .addInstanceMixin()', () => {
// @ts-ignore because we're getting rid of LionSingleton altogether
const MyMixin = superclass =>
class extends superclass {
constructor() {
@ -72,6 +78,7 @@ describe('LionSingleton', () => {
const mySingleton = MySingleton.getInstance();
expect(mySingleton.myMixin).to.be.true;
// @ts-ignore because we're getting rid of LionSingleton altogether
const OtherMixin = superclass =>
class extends superclass {
constructor() {
@ -89,6 +96,7 @@ describe('LionSingleton', () => {
});
it('can provide new instances (with applied Mixins) via .getNewInstance()', async () => {
// @ts-ignore because we're getting rid of LionSingleton altogether
const MyMixin = superclass =>
class extends superclass {
constructor() {
@ -100,13 +108,19 @@ describe('LionSingleton', () => {
MySingleton.addInstanceMixin(MyMixin);
const singletonOne = MySingleton.getNewInstance();
// @ts-ignore because we're getting rid of LionSingleton altogether
singletonOne.one = true;
// @ts-ignore because we're getting rid of LionSingleton altogether
expect(singletonOne.myMixin).to.be.true;
// @ts-ignore because we're getting rid of LionSingleton altogether
expect(singletonOne.one).to.be.true;
const singletonTwo = MySingleton.getNewInstance();
// @ts-ignore because we're getting rid of LionSingleton altogether
expect(singletonTwo.myMixin).to.be.true;
// @ts-ignore because we're getting rid of LionSingleton altogether
expect(singletonTwo.one).to.be.undefined;
// @ts-ignore because we're getting rid of LionSingleton altogether
expect(singletonOne.one).to.be.true; // to be sure
});
});

58
packages/core/test/SlotMixin.test.js
View file

@ -14,8 +14,8 @@ describe('SlotMixin', () => {
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
expect(element.children[0].slot).to.equal('feedback');
const el = await fixture(`<${tag}></${tag}>`);
expect(el.children[0].slot).to.equal('feedback');
});
it('does not override user provided slots', async () => {
@ -31,7 +31,7 @@ describe('SlotMixin', () => {
);
const el = await fixture(`<${tag}><p slot="feedback">user-content</p></${tag}>`);
expect(el.children[0].tagName).to.equal('P');
expect(el.children[0].innerText).to.equal('user-content');
expect(/** @type HTMLParagraphElement */ (el.children[0]).innerText).to.equal('user-content');
});
it('supports complex dom trees as element', async () => {
@ -57,10 +57,12 @@ describe('SlotMixin', () => {
}
},
);
const element = await fixture(`<${tag}></${tag}>`);
expect(element.children[0].slot).to.equal('feedback');
expect(element.children[0].getAttribute('foo')).to.equal('bar');
expect(element.children[0].children[0].innerText).to.equal('cat');
const el = await fixture(`<${tag}></${tag}>`);
expect(el.children[0].slot).to.equal('feedback');
expect(el.children[0].getAttribute('foo')).to.equal('bar');
expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
'cat',
);
});
it('supports conditional slots', async () => {
@ -82,35 +84,37 @@ describe('SlotMixin', () => {
}
},
);
const elementSlot = await fixture(`<${tag}><${tag}>`);
expect(elementSlot.querySelector('#someSlot')).to.exist;
const elSlot = await fixture(`<${tag}><${tag}>`);
expect(elSlot.querySelector('#someSlot')).to.exist;
renderSlot = false;
const elementNoSlot = await fixture(`<${tag}><${tag}>`);
expect(elementNoSlot.querySelector('#someSlot')).to.not.exist;
const elNoSlot = await fixture(`<${tag}><${tag}>`);
expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
});
it("allows to check which slots have been created via this._isPrivateSlot('slotname')", async () => {
let renderSlot = true;
const tag = defineCE(
class extends SlotMixin(HTMLElement) {
get slots() {
return {
...super.slots,
conditional: () => (renderSlot ? document.createElement('div') : undefined),
};
}
class SlotPrivateText extends SlotMixin(HTMLElement) {
get slots() {
return {
...super.slots,
conditional: () => (renderSlot ? document.createElement('div') : undefined),
};
}
didCreateConditionalSlot() {
return this._isPrivateSlot('conditional');
}
},
);
const el = await fixture(`<${tag}><${tag}>`);
didCreateConditionalSlot() {
return this._isPrivateSlot('conditional');
}
}
const tag = defineCE(SlotPrivateText);
const el = /** @type {SlotPrivateText} */ (await fixture(`<${tag}><${tag}>`));
expect(el.didCreateConditionalSlot()).to.be.true;
const elUserSlot = await fixture(`<${tag}><p slot="conditional">foo</p><${tag}>`);
const elUserSlot = /** @type {SlotPrivateText} */ (await fixture(
`<${tag}><p slot="conditional">foo</p><${tag}>`,
));
expect(elUserSlot.didCreateConditionalSlot()).to.be.false;
renderSlot = false;
const elNoSlot = await fixture(`<${tag}><${tag}>`);
const elNoSlot = /** @type {SlotPrivateText} */ (await fixture(`<${tag}><${tag}>`));
expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
});
});

107
packages/core/test/UpdateStylesMixin.test.js
View file

@ -4,82 +4,75 @@ import { UpdateStylesMixin } from '../src/UpdateStylesMixin.js';
describe('UpdateStylesMixin', () => {
it('handles css variables && direct e.g. host css properties correctly', async () => {
const tag = defineCE(
class extends UpdateStylesMixin(LitElement) {
static get styles() {
return [
css`
:host {
text-align: right;
class UpdateStylesElement extends UpdateStylesMixin(LitElement) {
static get styles() {
return [
css`
:host {
text-align: right;
--color: rgb(128, 128, 128);
}
--color: rgb(128, 128, 128);
}
h1 {
color: var(--color);
}
`,
];
}
h1 {
color: var(--color);
}
`,
];
}
render() {
return html`<h1 id="header">hey</h1>`;
}
},
);
const el = await fixture(`<${tag}></${tag}>`);
expect(window.getComputedStyle(el.shadowRoot.getElementById('header')).color).to.equal(
'rgb(128, 128, 128)',
);
render() {
return html`<h1 id="header">hey</h1>`;
}
}
const tag = defineCE(UpdateStylesElement);
const el = /** @type {UpdateStylesElement} */ (await fixture(`<${tag}></${tag}>`));
const header = /** @type {Element} */ (el.shadowRoot?.getElementById('header'));
expect(window.getComputedStyle(header).color).to.equal('rgb(128, 128, 128)');
expect(window.getComputedStyle(el).textAlign).to.equal('right');
el.updateStyles({
'--color': 'rgb(255, 0, 0)',
'text-align': 'center',
});
await tag.updateComplete;
expect(window.getComputedStyle(el.shadowRoot.getElementById('header')).color).to.equal(
'rgb(255, 0, 0)',
);
await el.updateComplete;
expect(window.getComputedStyle(header).color).to.equal('rgb(255, 0, 0)');
expect(window.getComputedStyle(el).textAlign).to.equal('center');
});
it('preserves existing styles', async () => {
const tag = defineCE(
class extends UpdateStylesMixin(LitElement) {
static get styles() {
return [
css`
:host {
--color: rgb(128, 128, 128);
}
class UpdateStylesElement extends UpdateStylesMixin(LitElement) {
static get styles() {
return [
css`
:host {
--color: rgb(128, 128, 128);
}
h1 {
color: var(--color);
}
`,
];
}
h1 {
color: var(--color);
}
`,
];
}
render() {
return html`<h1 id="header">hey</h1>`;
}
},
);
const el = await fixture(`<${tag}></${tag}>`);
expect(window.getComputedStyle(el.shadowRoot.getElementById('header')).color).to.equal(
'rgb(128, 128, 128)',
);
render() {
return html`<h1 id="header">hey</h1>`;
}
}
const tag = defineCE(UpdateStylesElement);
const el = /** @type {UpdateStylesElement} */ (await fixture(`<${tag}></${tag}>`));
const header = /** @type {Element} */ (el.shadowRoot?.getElementById('header'));
expect(window.getComputedStyle(header).color).to.equal('rgb(128, 128, 128)');
el.updateStyles({ '--color': 'rgb(255, 0, 0)' });
await tag.updateComplete;
expect(window.getComputedStyle(el.shadowRoot.getElementById('header')).color).to.equal(
'rgb(255, 0, 0)',
);
expect(window.getComputedStyle(header).color).to.equal('rgb(255, 0, 0)');
el.updateStyles({ 'text-align': 'left' });
await tag.updateComplete;
const styles = window.getComputedStyle(el.shadowRoot.getElementById('header'));
const styles = window.getComputedStyle(header);
expect(styles.color).to.equal('rgb(255, 0, 0)');
expect(styles.textAlign).to.equal('left');
});

51
packages/core/types/DelegateMixinTypes.d.ts vendored Normal file
View file

@ -0,0 +1,51 @@
import { Constructor } from '@open-wc/dedupe-mixin';
export type Delegations = {
target: Function;
events: string[];
methods: string[];
properties: string[];
attributes: string[];
};
export declare class DelegateMixinHost {
delegations: Delegations;
protected _connectDelegateMixin(): void;
private __setupPropertyDelegation(): void;
private __initialAttributeDelegation(): void;
private __emptyEventListenerQueue(): void;
private __emptyPropertiesQueue(): void;
}
/**
* # DelegateMixin
* Forwards defined events, methods, properties and attributes to the defined target.
*
* @example
* get delegations() {
* return {
* ...super.delegations,
* target: () => this.shadowRoot.getElementById('button1'),
* events: ['click'],
* methods: ['click'],
* properties: ['disabled'],
* attributes: ['disabled'],
* };
* }
*
* render() {
* return html`
* <button id="button1">with delegation</button>
* `;
* }
*/
declare function DelegateMixinImplementation<T extends Constructor<HTMLElement>>(
superclass: T,
): T & Constructor<DelegateMixinHost>;
export type DelegateMixin = typeof DelegateMixinImplementation;

29
packages/core/types/DisabledMixinTypes.d.ts vendored Normal file
View file

@ -0,0 +1,29 @@
import { Constructor } from '@open-wc/dedupe-mixin';
export declare class DisabledMixinHost {
static get properties(): {
disabled: {
type: BooleanConstructor;
reflect: boolean;
};
};
disabled: boolean;
/**
* Makes request to make the element disabled
*/
public makeRequestToBeDisabled(): void;
/**
* Retract request to make the element disabled and restore disabled to previous
*/
public retractRequestToBeDisabled(): void;
private __internalSetDisabled(value: boolean): void;
}
export declare function DisabledMixinImplementation<T extends Constructor<HTMLElement>>(
superclass: T,
): T & Constructor<DisabledMixinHost>;
export type DisabledMixin = typeof DisabledMixinImplementation;

29
packages/core/types/DisabledWithTabIndexMixinTypes.d.ts vendored Normal file
View file

@ -0,0 +1,29 @@
import { Constructor } from '@open-wc/dedupe-mixin';
import { DisabledMixinHost } from './DisabledMixinTypes';
export declare class DisabledWithTabIndexMixinHost {
static get properties(): {
tabIndex: {
type: NumberConstructor;
reflect: boolean;
attribute: string;
};
};
tabIndex: number;
/**
* Makes request to make the element disabled and set the tabindex
*/
public makeRequestToBeDisabled(): void;
/**
* Retract request to make the element disabled and restore disabled and tabindex to previous
*/
public retractRequestToBeDisabled(): void;
private __internalSetTabIndex(value: boolean): void;
}
export declare function DisabledWithTabIndexMixinImplementation<T extends Constructor<HTMLElement>>(
superclass: T,
): T & Constructor<DisabledWithTabIndexMixinHost> & Constructor<DisabledMixinHost>;
export type DisabledWithTabIndexMixin = typeof DisabledWithTabIndexMixinImplementation;

53
packages/core/types/SlotMixinTypes.d.ts vendored Normal file
View file

@ -0,0 +1,53 @@
import { Constructor } from '@open-wc/dedupe-mixin';
declare function slotFunction(): HTMLElement | undefined;
export type SlotsMap = {
[key: string]: typeof slotFunction;
};
export declare class SlotMixinHost {
/**
* Obtains all the slots to create
*/
slots: SlotsMap;
/**
* Starts the creation of slots
*/
protected _connectSlotMixin(): void;
/**
* Useful to decide if a given slot should be manipulated depending on if it was auto generated
* or not.
*
* @param {string} slotName Name of the slot
* @return {boolean} true if given slot name been created by SlotMixin
*/
protected _isPrivateSlot(slotName: string): boolean;
}
/**
* # SlotMixin
*
* `SlotMixin`, when attached to the DOM it creates content for defined slots in the Light DOM.
* The content element is created using a factory function and is assigned a slot name from the key.
* Existing slot content is not overridden.
*
* The purpose is to have the default content in the Light DOM rather than hidden in Shadow DOM
* like default slot content works natively.
*
* @example
* get slots() {
* return {
* ...super.slots,
* // appends <div slot="foo"></div> to the Light DOM of this element
* foo: () => document.createElement('div'),
* };
* }
*/
export declare function SlotMixinImplementation<T extends Constructor<HTMLElement>>(
superclass: T,
): T & Constructor<SlotMixinHost>;
export type SlotMixin = typeof SlotMixinImplementation;

34
packages/core/types/UpdateStylesMixinTypes.d.ts vendored Normal file
View file

@ -0,0 +1,34 @@
import { Constructor } from '@open-wc/dedupe-mixin';
export type StylesMap = {
[key: string]: string;
};
export declare class UpdateStylesMixinHost {
/**
* @example
* <my-element>
* <style>
* :host {
* color: var(--foo);
* }
* </style>
* </my-element>
*
* $0.updateStyles({'background': 'orange', '--foo': '#fff'})
* Chrome, Firefox: <my-element style="background: orange; --foo: bar;">
* IE: <my-element>
* => to head: <style>color: #fff</style>
*
* @param {StylesMap} updateStyles
*/
public updateStyles(updateStyles: StylesMap): void;
}
/**
* # UpdateStylesMixin
*/
declare function UpdateStylesMixinImplementation<T extends Constructor<HTMLElement>>(
superclass: T,
): T & Constructor<UpdateStylesMixinHost>;
export type UpdateStylesMixin = typeof UpdateStylesMixinImplementation;

6
packages/dialog/package.json
View file

@ -13,10 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test"
"test",
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/fieldset/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/form-core/package.json
View file

@ -13,13 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"test-suites",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

6
packages/form-integrations/package.json
View file

@ -13,12 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"dev-assets",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js"

5
packages/form/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/icon/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/input-amount/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/input-date/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

4
packages/input-datepicker/package.json
View file

@ -13,12 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/input-email/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/input-iban/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

7
packages/input-range/package.json
View file

@ -13,9 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test"
"test",
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/input/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

4
packages/localize/package.json
View file

@ -13,12 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/overlays/package.json
View file

@ -13,13 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers",
"test-suites",
"translations"
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

2
packages/providence-analytics/package.json
View file

@ -49,7 +49,7 @@
"parse5": "^5.1.1",
"read-package-tree": "5.3.1",
"semver": "^7.1.3",
"typescript": "^3.6.4"
"typescript": "^3.8.3"
},
"devDependencies": {
"mermaid": "^8.2.6",

5
packages/radio-group/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/select-rich/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/select/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/singleton-manager/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"test-helpers"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/steps/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/switch/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/tabs/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

264
packages/tabs/src/LionTabs.js
View file

@ -1,77 +1,114 @@
import { css, html, LitElement } from '@lion/core';
const uuid = () => Math.random().toString(36).substr(2, 10);
/**
* @typedef {Object} StoreEntry
* @property {HTMLElement} el Dom Element
* @property {string} uid Unique ID for the entry
* @property {HTMLElement} button Button HTMLElement for the entry
* @property {HTMLElement} panel Panel HTMLElement for the entry
* @property {EventHandlerNonNull} clickHandler executed on click event
* @property {EventHandlerNonNull} keydownHandler executed on keydown event
* @property {EventHandlerNonNull} keyupHandler executed on keyup event
*/
const setupPanel = ({ element, uid }) => {
element.setAttribute('id', `panel-${uid}`);
element.setAttribute('role', 'tabpanel');
element.setAttribute('aria-labelledby', `button-${uid}`);
};
function uuid() {
return Math.random().toString(36).substr(2, 10);
}
const selectPanel = element => {
element.setAttribute('selected', true);
};
/**
* @param {StoreEntry} options
*/
function setupPanel({ el, uid }) {
el.setAttribute('id', `panel-${uid}`);
el.setAttribute('role', 'tabpanel');
el.setAttribute('aria-labelledby', `button-${uid}`);
}
const deselectPanel = element => {
element.removeAttribute('selected');
};
/**
* @param {HTMLElement} el
*/
function selectPanel(el) {
el.setAttribute('selected', 'true');
}
const setupButton = ({ element, uid, clickHandler, keydownHandler, keyupHandler }) => {
element.setAttribute('id', `button-${uid}`);
element.setAttribute('role', 'tab');
element.setAttribute('aria-controls', `panel-${uid}`);
element.addEventListener('click', clickHandler);
element.addEventListener('keyup', keyupHandler);
element.addEventListener('keydown', keydownHandler);
};
/**
* @param {HTMLElement} el
*/
function deselectPanel(el) {
el.removeAttribute('selected');
}
const cleanButton = ({ element, clickHandler, keydownHandler, keyupHandler }) => {
element.removeAttribute('id');
element.removeAttribute('role');
element.removeAttribute('aria-controls');
element.removeEventListener('click', clickHandler);
element.removeEventListener('keyup', keyupHandler);
element.removeEventListener('keydown', keydownHandler);
};
/**
* @param {StoreEntry} options
*/
function setupButton({ el, uid, clickHandler, keydownHandler, keyupHandler }) {
el.setAttribute('id', `button-${uid}`);
el.setAttribute('role', 'tab');
el.setAttribute('aria-controls', `panel-${uid}`);
el.addEventListener('click', clickHandler);
el.addEventListener('keyup', keyupHandler);
el.addEventListener('keydown', keydownHandler);
}
const selectButton = (element, withFocus = false) => {
/**
* @param {StoreEntry} options
*/
function cleanButton({ el, clickHandler, keydownHandler, keyupHandler }) {
el.removeAttribute('id');
el.removeAttribute('role');
el.removeAttribute('aria-controls');
el.removeEventListener('click', clickHandler);
el.removeEventListener('keyup', keyupHandler);
el.removeEventListener('keydown', keydownHandler);
}
/**
* @param {HTMLElement} el
* @param {boolean} withFocus
*/
function selectButton(el, withFocus = false) {
if (withFocus) {
element.focus();
el.focus();
}
element.setAttribute('selected', true);
element.setAttribute('aria-selected', true);
element.setAttribute('tabindex', 0);
};
el.setAttribute('selected', 'true');
el.setAttribute('aria-selected', 'true');
el.setAttribute('tabindex', '0');
}
const deselectButton = element => {
element.removeAttribute('selected');
element.setAttribute('aria-selected', false);
element.setAttribute('tabindex', -1);
};
/**
* @param {HTMLElement} el
*/
function deselectButton(el) {
el.removeAttribute('selected');
el.setAttribute('aria-selected', 'false');
el.setAttribute('tabindex', '-1');
}
const handleButtonKeydown = e => {
switch (e.key) {
/**
* @param {Event} ev
*/
function handleButtonKeydown(ev) {
const _ev = /** @type {KeyboardEvent} */ (ev);
switch (_ev.key) {
case 'ArrowDown':
case 'ArrowRight':
case 'ArrowUp':
case 'ArrowLeft':
case 'Home':
case 'End':
e.preventDefault();
_ev.preventDefault();
/* no default */
}
};
}
export class LionTabs extends LitElement {
static get properties() {
return {
/**
* index number of the selected tab.
*/
selectedIndex: {
type: Number,
value: 0,
attribute: 'selected-index',
reflect: true,
},
};
}
@ -117,28 +154,42 @@ export class LionTabs extends LitElement {
constructor() {
super();
/**
* An index number of the selected tab
*/
this.selectedIndex = 0;
}
firstUpdated() {
super.firstUpdated();
/** @param {import('lit-element').PropertyValues } changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.__setupSlots();
}
__setupSlots() {
const tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
const handleSlotChange = () => {
this.__cleanStore();
this.__setupStore();
this.__updateSelected(false);
};
tabSlot.addEventListener('slotchange', handleSlotChange);
if (this.shadowRoot) {
const tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
const handleSlotChange = () => {
this.__cleanStore();
this.__setupStore();
this.__updateSelected(false);
};
if (tabSlot) {
tabSlot.addEventListener('slotchange', handleSlotChange);
}
}
}
__setupStore() {
/** @type {StoreEntry[]} */
this.__store = [];
const buttons = this.querySelectorAll('[slot="tab"]');
const panels = this.querySelectorAll('[slot="panel"]');
const buttons = /** @type {HTMLElement[]} */ (Array.from(
this.querySelectorAll('[slot="tab"]'),
));
const panels = /** @type {HTMLElement[]} */ (Array.from(
this.querySelectorAll('[slot="panel"]'),
));
if (buttons.length !== panels.length) {
// eslint-disable-next-line no-console
console.warn(
@ -149,19 +200,25 @@ export class LionTabs extends LitElement {
buttons.forEach((button, index) => {
const uid = uuid();
const panel = panels[index];
/** @type {StoreEntry} */
const entry = {
uid,
el: button,
button,
panel,
clickHandler: this.__createButtonClickHandler(index),
keydownHandler: handleButtonKeydown,
keydownHandler: handleButtonKeydown.bind(this),
keyupHandler: this.__handleButtonKeyup.bind(this),
};
setupPanel({ element: entry.panel, ...entry });
setupButton({ element: entry.button, ...entry });
setupPanel({ ...entry, el: entry.panel });
setupButton(entry);
deselectPanel(entry.panel);
deselectButton(entry.button);
this.__store.push(entry);
if (this.__store) {
this.__store.push(entry);
}
});
}
@ -170,44 +227,57 @@ export class LionTabs extends LitElement {
return;
}
this.__store.forEach(entry => {
cleanButton({ element: entry.button, ...entry });
cleanButton(entry);
});
}
/**
* @param {number} index
* @returns {EventHandlerNonNull}
*/
__createButtonClickHandler(index) {
return () => {
this._setSelectedIndexWithFocus(index);
};
}
__handleButtonKeyup(e) {
switch (e.key) {
case 'ArrowDown':
case 'ArrowRight':
if (this.selectedIndex + 1 >= this._pairCount) {
/**
* @param {Event} ev
*/
__handleButtonKeyup(ev) {
const _ev = /** @type {KeyboardEvent} */ (ev);
if (typeof this.selectedIndex === 'number') {
switch (_ev.key) {
case 'ArrowDown':
case 'ArrowRight':
if (this.selectedIndex + 1 >= this._pairCount) {
this._setSelectedIndexWithFocus(0);
} else {
this._setSelectedIndexWithFocus(this.selectedIndex + 1);
}
break;
case 'ArrowUp':
case 'ArrowLeft':
if (this.selectedIndex <= 0) {
this._setSelectedIndexWithFocus(this._pairCount - 1);
} else {
this._setSelectedIndexWithFocus(this.selectedIndex - 1);
}
break;
case 'Home':
this._setSelectedIndexWithFocus(0);
} else {
this._setSelectedIndexWithFocus(this.selectedIndex + 1);
}
break;
case 'ArrowUp':
case 'ArrowLeft':
if (this.selectedIndex <= 0) {
break;
case 'End':
this._setSelectedIndexWithFocus(this._pairCount - 1);
} else {
this._setSelectedIndexWithFocus(this.selectedIndex - 1);
}
break;
case 'Home':
this._setSelectedIndexWithFocus(0);
break;
case 'End':
this._setSelectedIndexWithFocus(this._pairCount - 1);
break;
/* no default */
break;
/* no default */
}
}
}
/**
* @param {number} value The new index
*/
set selectedIndex(value) {
const stale = this.__selectedIndex;
this.__selectedIndex = value;
@ -216,6 +286,9 @@ export class LionTabs extends LitElement {
this.requestUpdate('selectedIndex', stale);
}
/**
* @param {number} value The new index for focus
*/
_setSelectedIndexWithFocus(value) {
const stale = this.__selectedIndex;
this.__selectedIndex = value;
@ -224,24 +297,29 @@ export class LionTabs extends LitElement {
this.requestUpdate('selectedIndex', stale);
}
/**
* @return {number}
*/
get selectedIndex() {
return this.__selectedIndex;
return this.__selectedIndex || 0;
}
get _pairCount() {
return this.__store.length;
return (this.__store && this.__store.length) || 0;
}
__updateSelected(withFocus = false) {
if (!(this.__store && this.__store[this.selectedIndex])) {
if (
!(this.__store && typeof this.selectedIndex === 'number' && this.__store[this.selectedIndex])
) {
return;
}
const previousButton = Array.from(this.children).find(
const previousButton = /** @type {HTMLElement} */ (Array.from(this.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
);
const previousPanel = Array.from(this.children).find(
));
const previousPanel = /** @type {HTMLElement} */ (Array.from(this.children).find(
child => child.slot === 'panel' && child.hasAttribute('selected'),
);
));
if (previousButton) {
deselectButton(previousButton);
}

126
packages/tabs/test/lion-tabs.test.js
View file

@ -1,6 +1,9 @@
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon';
/**
* @typedef {import('../src/LionTabs.js').LionTabs} LionTabs
*/
import '../lion-tabs.js';
const basicTabs = html`
@ -17,36 +20,34 @@ const basicTabs = html`
describe('<lion-tabs>', () => {
describe('Tabs', () => {
it('sets selectedIndex to 0 by default', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
expect(el.selectedIndex).to.equal(0);
});
it('can programmatically set selectedIndex', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs .selectedIndex=${1}>
<div slot="tab">tab 1</div>
<div slot="panel">panel 1</div>
<div slot="tab">tab 2</div>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
expect(el.selectedIndex).to.equal(1);
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 2');
let selectedTab = /** @type {Element} */ (Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
));
expect(selectedTab.textContent).to.equal('tab 2');
el.selectedIndex = 0;
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 1');
selectedTab = /** @type {Element} */ (Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
));
expect(selectedTab.textContent).to.equal('tab 1');
});
it('has [selected] on current selected tab which serves as styling hook', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const tabs = el.querySelectorAll('[slot=tab]');
el.selectedIndex = 0;
expect(tabs[0]).to.have.attribute('selected');
@ -58,7 +59,7 @@ describe('<lion-tabs>', () => {
});
it('sends event "selected-changed" for every selected state change', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const spy = sinon.spy();
el.addEventListener('selected-changed', spy);
el.selectedIndex = 1;
@ -75,18 +76,18 @@ describe('<lion-tabs>', () => {
</lion-tabs>
`);
expect(spy.callCount).to.equal(1);
console.warn.restore();
spy.restore();
});
});
describe('Tabs ([slot=tab])', () => {
it('adds role=tab', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab</button>
<div slot="panel">panel</div>
</lion-tabs>
`);
`));
expect(Array.from(el.children).find(child => child.slot === 'tab')).to.have.attribute(
'role',
'tab',
@ -101,7 +102,7 @@ describe('<lion-tabs>', () => {
describe('Tab Panels (slot=panel)', () => {
it('are visible when corresponding tab is selected ', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const panels = el.querySelectorAll('[slot=panel]');
el.selectedIndex = 0;
expect(panels[0]).to.be.visible;
@ -125,14 +126,14 @@ describe('<lion-tabs>', () => {
*/
describe('User interaction', () => {
it('selects a tab on click', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[1].dispatchEvent(new Event('click'));
expect(el.selectedIndex).to.equal(1);
});
it('selects next tab on [arrow-right] and [arrow-down]', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[0].dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
expect(el.selectedIndex).to.equal(1);
@ -141,7 +142,7 @@ describe('<lion-tabs>', () => {
});
it('selects previous tab on [arrow-left] and [arrow-up]', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs .selectedIndex=${1}>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
@ -150,7 +151,7 @@ describe('<lion-tabs>', () => {
<button slot="tab">tab 3</button>
<div slot="panel">panel 3</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
el.selectedIndex = 2;
tabs[2].dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
@ -160,29 +161,29 @@ describe('<lion-tabs>', () => {
});
it('selects first tab on [home]', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs .selectedIndex=${1}>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[1].dispatchEvent(new KeyboardEvent('keyup', { key: 'Home' }));
expect(el.selectedIndex).to.equal(0);
});
it('selects last tab on [end]', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[0].dispatchEvent(new KeyboardEvent('keyup', { key: 'End' }));
expect(el.selectedIndex).to.equal(2);
});
it('selects first tab on [arrow-right] if on last tab', async () => {
const el = await fixture(html`
<lion-tabs selectedIndex="2">
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs .selectedIndex=${2}>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
@ -190,14 +191,14 @@ describe('<lion-tabs>', () => {
<button slot="tab">tab 3</button>
<div slot="panel">panel 3</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[2].dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
expect(el.selectedIndex).to.equal(0);
});
it('selects last tab on [arrow-left] if on first tab', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
@ -206,7 +207,7 @@ describe('<lion-tabs>', () => {
<button slot="tab">tab 3</button>
<div slot="panel">panel 3</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
tabs[0].dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
expect(el.selectedIndex).to.equal(2);
@ -215,7 +216,7 @@ describe('<lion-tabs>', () => {
describe('Content distribution', () => {
it('should work with append children', async () => {
const el = await fixture(basicTabs);
const el = /** @type {LionTabs} */ (await fixture(basicTabs));
const c = 2;
const n = el.children.length / 2;
for (let i = n + 1; i < n + c + 1; i += 1) {
@ -230,29 +231,28 @@ describe('<lion-tabs>', () => {
}
el.selectedIndex = el.children.length / 2 - 1;
await el.updateComplete;
expect(
Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
).textContent,
).to.equal('tab 5');
expect(
Array.from(el.children).find(
child => child.slot === 'panel' && child.hasAttribute('selected'),
).textContent,
).to.equal('panel 5');
const selectedTab = Array.from(el.children).find(
child => child.slot === 'tab' && child.hasAttribute('selected'),
);
expect(selectedTab && selectedTab.textContent).to.equal('tab 5');
const selectedPanel = Array.from(el.children).find(
child => child.slot === 'panel' && child.hasAttribute('selected'),
);
expect(selectedPanel && selectedPanel.textContent).to.equal('panel 5');
});
});
describe('Initializing without Focus', () => {
it('does not focus a tab when setting selectedIndex property', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
el.selectedIndex = 1;
expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be
@ -260,56 +260,56 @@ describe('<lion-tabs>', () => {
});
it('does not focus a tab on firstUpdate', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
const tabs = Array.from(el.children).filter(child => child.slot === 'tab');
expect(tabs.some(tab => tab === document.activeElement)).to.be.false;
});
it('focuses on a tab when setting with _setSelectedIndexWithFocus method', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
el._setSelectedIndexWithFocus(1);
expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be.true;
});
});
it('focuses on a tab when the selected tab is changed by user interaction', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
const secondTab = el.querySelector('[slot="tab"]:nth-of-type(2)');
`));
const secondTab = /** @type {Element} */ (el.querySelector('[slot="tab"]:nth-of-type(2)'));
secondTab.dispatchEvent(new MouseEvent('click'));
expect(secondTab === document.activeElement).to.be.true;
});
describe('Accessibility', () => {
it('does not make panels focusable', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
expect(Array.from(el.children).find(child => child.slot === 'panel')).to.not.have.attribute(
'tabindex',
);
@ -319,7 +319,7 @@ describe('<lion-tabs>', () => {
});
it('makes selected tab focusable (other tabs are unfocusable)', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
@ -328,7 +328,7 @@ describe('<lion-tabs>', () => {
<button slot="tab">tab 3</button>
<div slot="panel">panel 3</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
expect(tabs[0]).to.have.attribute('tabindex', '0');
expect(tabs[1]).to.have.attribute('tabindex', '-1');
@ -337,14 +337,14 @@ describe('<lion-tabs>', () => {
describe('Tabs', () => {
it('links ids of content items to tab via [aria-controls]', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button id="t1" slot="tab">tab 1</button>
<div id="p1" slot="panel">panel 1</div>
<button id="t2" slot="tab">tab 2</button>
<div id="p2" slot="panel">panel 2</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
const panels = el.querySelectorAll('[slot=panel]');
expect(tabs[0].getAttribute('aria-controls')).to.equal(panels[0].id);
@ -352,7 +352,7 @@ describe('<lion-tabs>', () => {
});
it('adds aria-selected=“true” to selected tab', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button id="t1" slot="tab">tab 1</button>
<div id="p1" slot="panel">panel 1</div>
@ -361,7 +361,7 @@ describe('<lion-tabs>', () => {
<button id="t3" slot="tab">tab 3</button>
<div id="p3" slot="panel">panel 3</div>
</lion-tabs>
`);
`));
const tabs = el.querySelectorAll('[slot=tab]');
expect(tabs[0].getAttribute('aria-selected')).to.equal('true');
@ -372,28 +372,28 @@ describe('<lion-tabs>', () => {
describe('panels', () => {
it('adds role="tabpanel" to panels', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
const panels = el.querySelectorAll('[slot=panel]');
expect(panels[0]).to.have.attribute('role', 'tabpanel');
expect(panels[1]).to.have.attribute('role', 'tabpanel');
});
it('adds aria-labelledby referring to tab ids', async () => {
const el = await fixture(html`
const el = /** @type {LionTabs} */ (await fixture(html`
<lion-tabs>
<button slot="tab">tab 1</button>
<div slot="panel">panel 1</div>
<button slot="tab">tab 2</button>
<div slot="panel">panel 2</div>
</lion-tabs>
`);
`));
const panels = el.querySelectorAll('[slot=panel]');
const tabs = el.querySelectorAll('[slot=tab]');
expect(panels[0]).to.have.attribute('aria-labelledby', tabs[0].id);

5
packages/textarea/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/tooltip/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

5
packages/validate-messages/package.json
View file

@ -13,11 +13,14 @@
"main": "index.js",
"module": "index.js",
"files": [
"*.d.ts",
"*.js",
"docs",
"src",
"test",
"translations"
"test-helpers",
"translations",
"types"
],
"scripts": {
"prepublishOnly": "../../scripts/npm-prepublish.js",

8
tsconfig.build.types.json Normal file
View file

@ -0,0 +1,8 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"declaration": true,
"emitDeclarationOnly": true,
"noEmit": false
}
}

24
tsconfig.json Normal file
View file

@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"allowJs": true,
"checkJs": true,
"noEmit": true,
"strict": true,
"noImplicitThis": true,
"alwaysStrict": true,
"types": ["node", "mocha"],
"esModuleInterop": true
},
"include": ["packages/core/**/*.js", "packages/tabs/**/*.js"],
"exclude": [
"node_modules",
"**/node_modules/*",
"**/coverage/*",
"**/dist/**/*",
"packages/**/test-helpers"
]
}

1
web-test-runner.config.js
View file

@ -1,6 +1,7 @@
module.exports = {
nodeResolve: true,
sessionStartTimeout: 30000,
concurrency: 5,
coverageConfig: {
threshold: {
statements: 80,

51
yarn.lock
View file

@ -2413,11 +2413,16 @@
"@open-wc/semantic-dom-diff" "^0.13.16"
"@types/chai" "^4.1.7"
"@open-wc/dedupe-mixin@^1.2.1", "@open-wc/dedupe-mixin@^1.2.17":
"@open-wc/dedupe-mixin@^1.2.17":
version "1.2.17"
resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.2.17.tgz#50fb903fc8785639487d7987caae45d7bba08ec7"
integrity sha512-9A3WohqNxEloJa4y1DuBL5zH12cNRNW1vsrkiaLMnOGuQdhibs2XY1oliudsKpvIeNjDXRVRPUdIIzn65BypCw==
"@open-wc/dedupe-mixin@^1.2.18":
version "1.2.18"
resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.2.18.tgz#2a86672fb3558fe2a2e1c5587dbaa0b485567ef1"
integrity sha512-1HpblP5edeENi0SKms7B+PKYdxHMBIQpaf0nAgTVsZeYgM9OJ3r9nrK/0MOUBZODAOZ1quvO3wlpuljq2hZPWA==
"@open-wc/demoing-storybook@^2.0.2":
version "2.3.11"
resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.3.11.tgz#4c4887760591c6e58fb25852c92f0357c3445246"
@ -2516,7 +2521,7 @@
lit-element "^2.2.1"
lit-html "^1.0.0"
"@open-wc/testing@^2.5.0":
"@open-wc/testing@^2.5.18":
version "2.5.18"
resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-2.5.18.tgz#b05215535a22515fbd98183eface1c33fd804a5d"
integrity sha512-poFIaGEsHseNEbAE/pGjzZGbSksxqsL4CRr+MSPUEotzhbVa3BzA3JzPHfn3FD1zVGlBcNEU0kFa0jj/Goc52w==
@ -2807,6 +2812,13 @@
resolved "https://registry.yarnpkg.com/@types/caniuse-api/-/caniuse-api-3.0.0.tgz#af31cc52062be0ab24583be072fd49b634dcc2fe"
integrity sha512-wT1VfnScjAftZsvLYaefu/UuwYJdYBwD2JDL2OQd01plGmuAoir5V6HnVHgrfh7zEwcasoiyO2wQ+W58sNh2sw==
"@types/chai-dom@^0.0.8":
version "0.0.8"
resolved "https://registry.yarnpkg.com/@types/chai-dom/-/chai-dom-0.0.8.tgz#832b68d78390c80030e64d8fd4990e514484e91d"
integrity sha512-F5vAuz2hp7VY+0UmkFLgTwyeHDddIw1c/JbAQZp2lgpZOd3ujlHFijWO4sHdo7sun9HrzwnSJlZfINdKrUwI+w==
dependencies:
"@types/chai" "*"
"@types/chai-dom@^0.0.9":
version "0.0.9"
resolved "https://registry.yarnpkg.com/@types/chai-dom/-/chai-dom-0.0.9.tgz#77379354efec2568284ca355fff6a4f85f5a66f4"
@ -6438,6 +6450,18 @@ fast-glob@^2.2.6:
merge2 "^1.2.3"
micromatch "^3.1.10"
fast-glob@^3.1.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
glob-parent "^5.1.0"
merge2 "^1.3.0"
micromatch "^4.0.2"
picomatch "^2.2.1"
fast-glob@^3.1.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
@ -13026,6 +13050,11 @@ try-to-catch@^1.0.2:
resolved "https://registry.yarnpkg.com/try-to-catch/-/try-to-catch-1.1.1.tgz#770162dd13b9a0e55da04db5b7f888956072038a"
integrity sha512-ikUlS+/BcImLhNYyIgZcEmq4byc31QpC+46/6Jm5ECWkVFhf8SM2Fp/0pMVXPX6vk45SMCwrP4Taxucne8I0VA==
ts-simple-type@~0.3.6:
version "0.3.7"
resolved "https://registry.yarnpkg.com/ts-simple-type/-/ts-simple-type-0.3.7.tgz#1e77222c3d90d7093f80a954e74c725fd99c911c"
integrity sha512-bDXWURwpDpe1mA5E9eldmI0Mpt9zGprhtN/ZTLOJjsAMyeMy1UT7WvGRQghYewIYBYxDZurChhe4DrsPbcCVrA==
tsconfig-paths@^3.9.0:
version "3.9.0"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
@ -13127,10 +13156,10 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typescript@^3.6.4:
version "3.9.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
typescript@^3.5.3, typescript@^3.8.3:
version "3.9.6"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.6.tgz#8f3e0198a34c3ae17091b35571d3afd31999365a"
integrity sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==
typical@^4.0.0:
version "4.0.0"
@ -13629,6 +13658,16 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
dependencies:
defaults "^1.0.3"
web-component-analyzer@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/web-component-analyzer/-/web-component-analyzer-1.0.3.tgz#da73dff15d6a8f4864311664476f0f436274e97d"
integrity sha512-QA6GVVJrKRPHLVqPv4evY0H+du1yY+E1q8c82bdY5e10+pWsRfeYA+Hsh2r8yl1EGQVC55SeV3tGvJ6+CxaH/Q==
dependencies:
fast-glob "^3.1.0"
ts-simple-type "~0.3.6"
typescript "^3.5.3"
yargs "^15.0.2"
web-namespaces@^1.0.0, web-namespaces@^1.1.2:
version "1.1.4"
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"