Skip to content
BranchesTags

Repository files navigation

ECL Web-components

Repository for the implementation and distribution of ECL Europa component library as vanilla web-components. ECL web-components are written and compiled using stencil.

To quickly run the app:

git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage

Depending on the technology used the right package can be selected and fetched from npm. For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:

  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.

Command reference

generate ecl-{component} runs stencil generate and generates empty files build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier

Adding a new component

pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component} The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.

React and angular wrappers

build:react Builds the react wrappers build:react-consumer Builds the react consumer app build:angular Builds the angular wrappers and consumer app build:vue Builds the vue wrappers build:vue-consumer Builds the vue consumer app dev-react Launches the react consumer app dev-angular Launches the angular consumer app dev-vue Launches the vue consumer app

Assets

Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a <meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object. Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will generate requests at /build/images...

Ckeditor plugin

dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied. plugins:make Builds the plugin build:playground Builds the playground

Npm packages

  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents

Documentation

  • Get more information here

About

ECL webcomponents is a new implementation of ECL vanilla components

ecl-webcomponents.netlify.app/

Topics

design-systemeclstenciljswebcomponents

Resources

Readme
Activity
Custom properties

Stars

6 stars

Watchers

12 watching

Forks

4 forks
Report repository

Releases

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - ec-europa/ecl-webcomponents: ECL webcomponents is a new implementation of ECL vanilla components · GitHub
Skip to content
BranchesTags
Repository files navigation
ECL Web-components
Repository for the implementation and distribution of ECL Europa component library as vanilla web-components.
ECL web-components are written and compiled using stencil.
To quickly run the app:
git clone https://github.com/planctus/ecl-webcomponents
pnpm (install dependencies and run prepublish script in the packages
pnpm start (build stencil and watch files)
pnpm dev (start storybook)

Usage
Depending on the technology used the right package can be selected and fetched from npm.
For the react and angular wrappers the consumer apps in this repository can be used as a reference for a basic usage of the library, here we refer to the vanilla webcomponents:
  • Fetch the npm package @ecl/ecl-webcomponents
  • Move the folder dist/ecl-webcomponents where it can be served as assets in your website or app.
  • The library has two themes, ec and eu, it expects a data-ecl-theme attribute set on the <html> tag (or any document.documentElement) with one these two values, otherwise it will use ec by default.
  • Load ecl-webcomponents.bridge.js and ecl-webcomponents.esm.js
The first one is taking care of loading the global resources like the css custom properties and an additional css in ec for the color modes, the second is taking care of lazy loading the webcomponents registering the custom elements and making them available.
Command reference
generate ecl-{component} runs stencil generate and generates empty files
build builds the application, including storybook
lint runs stylelint on scss files and eslint on js files
test Runs the prettier checks and the snapshot tests
test:update Updates the snapshots
start builds stencil and watches files for changes
dev starts storybook
pretty-check Runs the checks by prettier
pretty-write Fix the errors with prettier
Adding a new component
pnpm generate ecl-{component} (choose only the spec file)

This will create most of the files needed in src/components/ecl-{component}
The scss in src/styles normally "use" the theme (ec/eu) and the vanilla scss from ecl.
React and angular wrappers
build:react Builds the react wrappers
build:react-consumer Builds the react consumer app
build:angular Builds the angular wrappers and consumer app
build:vue Builds the vue wrappers
build:vue-consumer Builds the vue consumer app
dev-react Launches the react consumer app
dev-angular Launches the angular consumer app
dev-vue Launches the vue consumer app
Assets
Due to a bug in stencil.js the getAssetPath() helper it provides has been replaced in ecl-webcomponents and it expects a
<meta data-ecl-asset-path="/" /> to be defined in the head or a __ECL_ASSET_PATH__ variable set on the window object.
Assets will then be resolved from that path, typically our assets are in build/images/... so defining the data-ecl-asseth-path will
generate requests at /build/images...
Ckeditor plugin
dev-playground" It starts a simple app with a build of ckeditor including the plugin, changes are immediately applied.
plugins:make Builds the plugin
build:playground Builds the playground
Npm packages
  • @ecl/ecl-webcomponents - ECL webcomponents package
  • @ecl/ecl-webcomponents-react - Ecl webcomponents wrappers for React
  • @ecl/ecl-webcomponents-angular - Ecl webcomponents wrappers for Angular
  • @ecl/ecl-webcomponents-vue - Ecl webcomponents wrappers for Vue
  • @ecl/ecl-webcomponents-hydrate - Only needed for real SSR rendering in react and Vue
  • @ecl/ckeditor5-ecl-webcomponents - Ckeditor 5 plugin for ECL Webcomponents
Documentation
  • Get more information here
About
ECL webcomponents is a new implementation of ECL vanilla components
ecl-webcomponents.netlify.app/
Topics
design-systemeclstenciljswebcomponents
Resources
Readme
Activity
Custom properties
Stars
6 stars
Watchers
12 watching
Forks
4 forks
Report repository
Releases
Used by
Contributors
Languages