Skip to content
Snippets Groups Projects
Verified Commit 3f659dbd authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: anlage von wizard-navigation #329

parent f68f4873
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>new wizard navigation #329</title>
<script src="./329.mjs" type="module"></script>
</head>
<body>
<h1>new wizard navigation #329</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/329">Issue #329</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<div style="width:400px">
<monster-wizard-navigation>
<ol class="wizard-steps">
<li class="step">
<span class="step-title">Unternehmen verifizieren</span>
<ul class="substeps">
<li class="substep active">Unternehmenstyp</li>
<li class="substep">Unternehmensdaten</li>
<li class="substep">Unternehmensvertreter</li>
<li class="substep active">Geschäftsinhaber/innen</li>
<li class="substep">Geschäftsführer/innen des Unternehmens</li>
<li class="substep">Geschäftsführer/innen</li>
<li class="substep">Öffentliche Details</li>
</ul>
</li>
<li class="step">
<span class="step-title">Bank hinzufügen</span>
</li>
<li class="step">
<span class="step-title">Konto schützen</span>
</li>
<li class="step">
<span class="step-title">Extras hinzufügen</span>
</li>
<li class="step">
<span class="step-title">Prüfen und einreichen</span>
</li>
</ol>
</monster-wizard-navigation>
</div>
</main>
</body>
</html>
/**
* @file development/issues/open/329.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/329
* @description new wizard navigation
* @issue 329
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/navigation/wizard-navigation.mjs";
...@@ -164,11 +164,11 @@ ...@@ -164,11 +164,11 @@
}, },
"nixpkgs_3": { "nixpkgs_3": {
"locked": { "locked": {
"lastModified": 1750400657, "lastModified": 1751211869,
"narHash": "sha256-3vkjFnxCOP6vm5Pm13wC/Zy6/VYgei/I/2DWgW4RFeA=", "narHash": "sha256-1Cu92i1KSPbhPCKxoiVG5qnoRiKTgR5CcGSRyLpOd7Y=",
"owner": "nixos", "owner": "nixos",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "b2485d56967598da068b5a6946dadda8bfcbcd37", "rev": "b43c397f6c213918d6cfe6e3550abfe79b5d1c51",
"type": "github" "type": "github"
}, },
"original": { "original": {
......
This diff is collapsed.
...@@ -40,18 +40,18 @@ ...@@ -40,18 +40,18 @@
"author": "schukai GmbH", "author": "schukai GmbH",
"license": "AGPL 3.0", "license": "AGPL 3.0",
"dependencies": { "dependencies": {
"@floating-ui/dom": "^1.7.1", "@floating-ui/dom": "^1.7.2",
"@popperjs/core": "^2.11.8" "@popperjs/core": "^2.11.8"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "2.0.5", "@biomejs/biome": "2.0.6",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2", "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"@peculiar/webcrypto": "^1.5.0", "@peculiar/webcrypto": "^1.5.0",
"@playwright/test": "^1.53.1", "@playwright/test": "^1.53.2",
"@roarr/cli": "^5.12.4", "@roarr/cli": "^5.12.4",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"browserslist": "^4.25.0", "browserslist": "^4.25.1",
"btoa": "^1.2.1", "btoa": "^1.2.1",
"c8": "^10.1.3", "c8": "^10.1.3",
"chai": "^5.2.0", "chai": "^5.2.0",
...@@ -63,36 +63,36 @@ ...@@ -63,36 +63,36 @@
"esbuild": "^0.25.5", "esbuild": "^0.25.5",
"espree": "^10.4.0", "espree": "^10.4.0",
"estraverse": "^5.3.0", "estraverse": "^5.3.0",
"flow-bin": "^0.273.1", "flow-bin": "^0.274.2",
"fs": "0.0.1-security", "fs": "0.0.1-security",
"glob": "^11.0.3", "glob": "^11.0.3",
"graphviz": "^0.0.9", "graphviz": "^0.0.9",
"jsdom": "^26.1.0", "jsdom": "^26.1.0",
"jsdom-global": "^3.0.2", "jsdom-global": "^3.0.2",
"mocha": "^11.7.0", "mocha": "^11.7.1",
"playwright": "^1.53.1", "playwright": "^1.53.2",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"postcss-fluid": "^1.4.2", "postcss-fluid": "^1.4.2",
"postcss-for": "^2.1.1", "postcss-for": "^2.1.1",
"postcss-import": "^16.1.1", "postcss-import": "^16.1.1",
"postcss-load-config": "^6.0.1", "postcss-load-config": "^6.0.1",
"postcss-mixins": "^11.0.3", "postcss-mixins": "^12.0.0",
"postcss-nested": "^7.0.2", "postcss-nested": "^7.0.2",
"postcss-nesting": "^13.0.2", "postcss-nesting": "^13.0.2",
"postcss-normalize": "^13.0.1", "postcss-normalize": "^13.0.1",
"postcss-responsive-type": "^1.0.0", "postcss-responsive-type": "^1.0.0",
"postcss-rtlcss": "^5.7.1", "postcss-rtlcss": "^5.7.1",
"postcss-strip-units": "^2.0.1", "postcss-strip-units": "^2.0.1",
"puppeteer": "^24.10.2", "puppeteer": "^24.11.2",
"sinon": "^21.0.0", "sinon": "^21.0.0",
"turbowatch": "^2.29.4", "turbowatch": "^2.29.4",
"url": "^0.11.4", "url": "^0.11.4",
"url-exist": "3.0.1", "url-exist": "3.0.1",
"util": "^0.12.5", "util": "^0.12.5",
"vite": "6.3.5", "vite": "7.0.1",
"vite-plugin-banner": "^0.8.1", "vite-plugin-banner": "^0.8.1",
"vite-plugin-minify": "^2.1.0", "vite-plugin-minify": "^2.1.0",
"vite-plugin-mock": "^3.0.2", "vite-plugin-mock": "^3.0.2",
"ws": "^8.18.2" "ws": "^8.18.3"
} }
} }
.wizard-steps {
counter-reset: step;
}
/* Basic Reset */
.wizard-steps,
.wizard-steps .substeps {
list-style: none;
margin: 0;
padding: 0;
}
/* Main Steps */
.wizard-steps .step {
position: relative;
padding-left: 2.5em;
margin-bottom: 1.5em;
}
/* Number Circle */
.wizard-steps .step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 0;
top: 0;
width: 1.8em;
height: 1.8em;
border: 2px solid var(--monster-color-primary-1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--monster-color-primary-4);
background-color: var(--monster-color-primary-1);
box-sizing: border-box;
z-index: 2;
}
/* Connecting line between circles */
.wizard-steps .step:not(:last-child)::after {
content: "";
position: absolute;
left: 0.9em; /* Exakte Mitte von 1.8em Kreis */
top: 2em;
bottom: 0;
width: 2px;
background: var(--monster-color-primary-1);
z-index: 1;
}
/* Active / completed step */
.wizard-steps .step-active::before {
border-color: var(--monster-color-secondary-1);
background: var(--monster-bg-color-secondary-2);
color: var(--monster-color-secondary-1);
}
.wizard-steps .step-active .step-title {
font-weight: bold;
color: var(--monster-color-secondary-1);
}
/* Step titles */
.wizard-steps .step-title {
font-size: 1rem;
line-height: 1.6em;
vertical-align: middle;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
}
/* Sub-steps */
.wizard-steps .substeps {
margin-top: 0.5em;
margin-left: 1.5em;
}
.wizard-steps .substep {
position: relative;
padding-left: 1.2em;
margin-bottom: 0.4em;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
font-size: 0.9rem;
}
/* Bullet point */
.wizard-steps .substep::before {
content: "•";
position: absolute;
left: 0;
top: 0;
font-size: 1.2em;
line-height: 1;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
}
/* Active sub-step */
.wizard-steps .substep.active {
font-weight: bold;
color: var(--monster-color-secondary-2);
background-color: var(--monster-bg-color-secondary-2);
}
.wizard-steps .substep.active::before {
color: var(--monster-color-secondary-2);
background-color: var(--monster-bg-color-secondary-2);
}
/**
* Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export {WizardNavigationStyleSheet}
/**
* @private
* @type {CSSStyleSheet}
*/
const WizardNavigationStyleSheet = new CSSStyleSheet();
try {
WizardNavigationStyleSheet.insertRule(`
@layer wizardnavigation {
.wizard-steps{counter-reset:step}.wizard-steps,.wizard-steps .substeps{list-style:none;margin:0;padding:0}.wizard-steps .step{margin-bottom:1.5em;padding-left:2.5em;position:relative}.wizard-steps .step:before{align-items:center;background-color:var(--monster-color-primary-1);border:2px solid var(--monster-color-primary-1);border-radius:50%;box-sizing:border-box;color:var(--monster-color-primary-4);content:counter(step);counter-increment:step;display:flex;font-weight:700;height:1.8em;justify-content:center;left:0;position:absolute;top:0;width:1.8em;z-index:2}.wizard-steps .step:not(:last-child):after{background:var(--monster-color-primary-1);bottom:0;content:\"\";left:.9em;position:absolute;top:2em;width:2px;z-index:1}.wizard-steps .step-active:before{background:var(--monster-bg-color-secondary-2);border-color:var(--monster-color-secondary-1);color:var(--monster-color-secondary-1)}.wizard-steps .step-active .step-title{color:var(--monster-color-secondary-1);font-weight:700}.wizard-steps .step-title{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1rem;line-height:1.6em;vertical-align:middle}.wizard-steps .substeps{margin-left:1.5em;margin-top:.5em}.wizard-steps .substep{font-size:.9rem;margin-bottom:.4em;padding-left:1.2em;position:relative}.wizard-steps .substep,.wizard-steps .substep:before{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.wizard-steps .substep:before{content:\"•\";font-size:1.2em;left:0;line-height:1;position:absolute;top:0}.wizard-steps .substep.active{font-weight:700}.wizard-steps .substep.active,.wizard-steps .substep.active:before{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}
}`, 0);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
/**
* Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
import { instanceSymbol } from "../../constants.mjs";
import { addAttributeToken } from "../../dom/attributes.mjs";
import {
ATTRIBUTE_ERRORMESSAGE,
ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
import { CustomControl } from "../../dom/customcontrol.mjs";
import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
registerCustomElement,
} from "../../dom/customelement.mjs";
import {findTargetElementFromEvent, fireEvent} from "../../dom/events.mjs";
import { isFunction } from "../../types/is.mjs";
import { WizardNavigationStyleSheet } from "./stylesheet/wizard-navigation.mjs";
import { fireCustomEvent } from "../../dom/events.mjs";
import {buildTree} from "../../data/buildtree.mjs";
import { NodeRecursiveIterator } from "../../types/noderecursiveiterator.mjs";
import {validateInstance} from "../../types/validate.mjs";
import {Node} from "../../types/node.mjs";
import {Formatter} from "../../text/formatter.mjs";
export { WizardNavigation };
/**
* @private
* @type {symbol}
*/
const wizardNavigationElementSymbol = Symbol("wizardNavigationElement");
/**
* @private
* @type {symbol}
*/
const wizardNavigationListElementSymbol = Symbol("wizardNavigationListElement");
/**
* A WizardNavigation
*
* @fragments /fragments/components/navigation/wizard-navigation/
*
* @example /examples/components/navigation/wizard-navigation-simple
*
* Work in Progress, currently only the basic functionality is implemented.
*
* @since 4.26.0
* @copyright schukai GmbH
* @summary A beautiful WizardNavigation that can make your life easier and also looks good.
*/
class WizardNavigation extends CustomElement {
/**
* This method is called by the `instanceof` operator.
* @returns {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for(
"@schukai/monster/components/navigation/wizard-navigation@@instance",
);
}
/**
*
* @return {Components.Navigation.WizardNavigation
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
initControlReferences.call(this);
initEventHandler.call(this);
queueMicrotask(() => {
importContent.call(this);
});
return this;
}
/**
* To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
*
* The individual configuration values can be found in the table.
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
* @property {Object} labels Label definitions
* @property {Object} actions Callbacks
* @property {string} actions.click="throw Error" Callback when clicked
* @property {Object} features Features
* @property {Object} classes CSS classes
* @property {boolean} disabled=false Disabled state
*/
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
labels: {},
classes: {},
disabled: false,
features: {},
actions: {
click: () => {
throw new Error("the click action is not defined");
},
},
});
}
/**
* @return {string}
*/
static getTag() {
return "monster-wizard-navigation";
}
/**
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [WizardNavigationStyleSheet];
}
}
/**
* @private
* @return {initEventHandler}
* @fires monster-wizard-navigation-clicked
*/
function initEventHandler() {
const self = this;
const element = this[wizardNavigationElementSymbol];
const type = "click";
element.addEventListener(type, function (event) {
const callback = self.getOption("actions.click");
fireCustomEvent(self, "monster-wizard-navigation-clicked", {
element: self,
});
if (!isFunction(callback)) {
return;
}
const element = findTargetElementFromEvent(
event,
ATTRIBUTE_ROLE,
"control",
);
if (!(element instanceof Node && self.hasNode(element))) {
return;
}
callback.call(self, event);
});
return this;
}
/**
* @private
* @return {void}
*/
function initControlReferences() {
this[wizardNavigationElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="control"]`,
);
this[wizardNavigationListElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="list"]`,
);
}
/**
* Import Menu Entries from dataset
*
* @since 1.0.0
* @return {TreeMenu}
* @throws {Error} map is not iterable
* @private
*/
function importContent() {
const elements = getSlottedElements.call(this, "ol.wizard-steps")
elements.forEach(element => {
const clonedContent = element.cloneNode(true);
this[wizardNavigationListElementSymbol].innerHTML = '';
this[wizardNavigationListElementSymbol].appendChild(clonedContent);
})
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<slot style="display: none;"></slot>
<div data-monster-role="list"></div>
</div>`;
}
registerCustomElement(WizardNavigation);
...@@ -456,7 +456,7 @@ function importEntries() { ...@@ -456,7 +456,7 @@ function importEntries() {
let filteredData; let filteredData;
if (this[firstRunDoneSymbol] !== true) { if (this[firstRunDoneSymbol] !== true) {
filteredData = data.filter( filteredData = data?.filter(
(entry) => (entry) =>
!entry[parentKey] || !entry[parentKey] ||
entry[parentKey] === null || entry[parentKey] === null ||
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment