From 0a5842831583857ec17c34408401bf253773d814 Mon Sep 17 00:00:00 2001 From: Christopher Bergwein <55480857+christopher-bergwein-siemens@users.noreply.github.com> Date: Tue, 6 Jun 2023 10:49:14 +0200 Subject: [PATCH] feat(core/workflow): enable shadow dom (#551) Co-authored-by: Daniel Leroux --- packages/core/component-doc.json | 20 ++++++------ .../components/my-component/my-component.tsx | 1 - .../workflow-step/workflow-step.scss | 3 ++ .../workflow-step/workflow-step.tsx | 8 ++--- .../workflow-steps/workflow-steps.scss | 3 ++ .../workflow-steps/workflow-steps.tsx | 31 +++++++------------ 6 files changed, 31 insertions(+), 35 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 52b363acef2..78f322fcab3 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -10656,7 +10656,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [], "dependencies": [ "ix-icon" @@ -10811,13 +10811,7 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "click", - "capture": false, - "passive": true - } - ] + "listeners": [] }, { "dirPath": "./src/components/workflow-steps", @@ -10830,7 +10824,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, @@ -10925,7 +10919,13 @@ "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "selectedChanged", + "capture": false, + "passive": false + } + ] }, { "dirPath": "./src/components/my-component", diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx index 2dbca57482c..bb9bd7073c5 100644 --- a/packages/core/src/components/my-component/my-component.tsx +++ b/packages/core/src/components/my-component/my-component.tsx @@ -6,7 +6,6 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ - import { Component, h, Host } from '@stencil/core'; @Component({ diff --git a/packages/core/src/components/workflow-step/workflow-step.scss b/packages/core/src/components/workflow-step/workflow-step.scss index 813a142662f..4cfbd11add5 100644 --- a/packages/core/src/components/workflow-step/workflow-step.scss +++ b/packages/core/src/components/workflow-step/workflow-step.scss @@ -8,8 +8,11 @@ */ @import 'common-variables'; +@import 'mixins/shadow-dom/component'; :host { + @include ix-component; + .step { display: flex; flex-direction: column; diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx index 7b6f828dc4f..892f266c4d7 100644 --- a/packages/core/src/components/workflow-step/workflow-step.tsx +++ b/packages/core/src/components/workflow-step/workflow-step.tsx @@ -15,7 +15,6 @@ import { Fragment, h, Host, - Listen, Prop, State, Watch, @@ -24,7 +23,7 @@ import { @Component({ tag: 'ix-workflow-step', styleUrl: 'workflow-step.scss', - scoped: true, + shadow: true, }) export class WorkflowStep { @Element() hostElement: HTMLIxWorkflowStepElement; @@ -137,8 +136,7 @@ export class WorkflowStep { ); } - @Listen('click', { passive: true }) - clickFunction() { + onStepClick() { if (!this.disabled && this.clickable) { this.selectedChanged.emit(this.hostElement); } @@ -167,7 +165,7 @@ export class WorkflowStep { ); return ( - + this.onStepClick()}>
this.select()} diff --git a/packages/core/src/components/workflow-steps/workflow-steps.scss b/packages/core/src/components/workflow-steps/workflow-steps.scss index b8013c078c2..70e40fb66ce 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.scss +++ b/packages/core/src/components/workflow-steps/workflow-steps.scss @@ -8,8 +8,11 @@ */ @import 'common-variables'; +@import 'mixins/shadow-dom/component'; :host { + @include ix-component; + .steps { display: flex; diff --git a/packages/core/src/components/workflow-steps/workflow-steps.tsx b/packages/core/src/components/workflow-steps/workflow-steps.tsx index 9c62e4c9ba2..91379cc55b6 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.tsx +++ b/packages/core/src/components/workflow-steps/workflow-steps.tsx @@ -14,6 +14,7 @@ import { EventEmitter, h, Host, + Listen, Prop, } from '@stencil/core'; import { createMutationObserver } from '../utils/mutation-observer'; @@ -21,7 +22,7 @@ import { createMutationObserver } from '../utils/mutation-observer'; @Component({ tag: 'ix-workflow-steps', styleUrl: 'workflow-steps.scss', - scoped: true, + shadow: true, }) export class WorkflowSteps { @Element() hostElement!: HTMLIxWorkflowStepsElement; @@ -56,10 +57,6 @@ export class WorkflowSteps { return Array.from(this.hostElement.querySelectorAll('ix-workflow-step')); } - get stepsContent() { - return this.hostElement.querySelector('.steps'); - } - updateSteps() { let steps = this.getSteps(); steps.forEach((element, index) => { @@ -84,21 +81,17 @@ export class WorkflowSteps { private observer: MutationObserver; - componentDidLoad() { - this.stepsContent.addEventListener( - 'selectedChanged', - (event: CustomEvent) => { - const steps = this.getSteps(); - steps.forEach((element) => { - if (element !== event.target) { - element.selected = false; - } - }); + @Listen('selectedChanged') + onStepSelectionChanged(event: CustomEvent) { + const steps = this.getSteps(); + steps.forEach((element) => { + if (element !== event.target) { + element.selected = false; } - ); - - const slotDiv = this.hostElement.querySelector('.steps'); + }); + } + componentDidLoad() { this.observer = createMutationObserver((mutations) => { for (let mutation of mutations) { if (mutation.type === 'childList') { @@ -107,7 +100,7 @@ export class WorkflowSteps { } }); - this.observer.observe(slotDiv, { childList: true }); + this.observer.observe(this.hostElement, { childList: true }); } disconnectedCallback() {