{
+ const row = await getControlRow(page, label);
+ const select = row.locator('select').first();
+ await expect(select).toBeVisible();
+ await select.selectOption(optionValue);
+}
+
+test.describe('Logotype – design panel', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(LOGOTYPE_PAGE);
+ await expect(page.locator(LOGOTYPE_TARGET)).toBeVisible();
+
+ await page.getByRole('button', { name: FAB_TRIGGER_LABEL }).click();
+ await expect(page.locator(`.${FAB_PANEL_OPEN_CLASS}`)).toBeVisible();
+ await expect(page.locator(CUSTOMIZER_PANEL)).toBeVisible();
+ await page.locator(COMPONENT_SELECT).selectOption({ value: 'logotype' });
+ });
+
+ test('opens the design panel when the FAB button is clicked', async ({ page }) => {
+ await expect(page.locator(CUSTOMIZER_PANEL)).toBeVisible();
+ });
+
+ test('design panel shows logotype component settings', async ({ page }) => {
+ await expect(page.locator('.db-category-header').filter({ hasText: 'Appearance' })).toBeVisible();
+ });
+
+ test('logotype panel exposes the full expected control inventory', async ({ page }) => {
+ await expandAllCategories(page);
+
+ const labels = await page.locator('db-control-row .db-control-row-label-text').evaluateAll((nodes) => nodes.map((node) => node.textContent?.trim() ?? '').filter(Boolean));
+
+ for (const expectedLabel of EXPECTED_VISIBLE_CONTROLS) {
+ expect(labels).toContain(expectedLabel);
+ }
+ });
+
+ test('Masking defaults to On – image is hidden and ::before is visible', async ({ page }) => {
+ const logotype = page.locator(LOGOTYPE_TARGET).first();
+ const imageOpacity = await getComputedCss(logotype.locator('.c-logotype__image'), 'opacity');
+ const beforeOpacity = await getPseudoOpacity(logotype, '::before');
+
+ expect(imageOpacity).toBe('0');
+ expect(beforeOpacity).toBe('1');
+ });
+
+ test('setting Masking to Off reveals the image and hides the ::before mask', async ({ page }) => {
+ await expandCategory(page.locator('.db-category-header').filter({ hasText: 'Appearance' }));
+
+ const logotype = page.locator(LOGOTYPE_TARGET).first();
+
+ const initialImageOpacity = await getComputedCss(logotype.locator('.c-logotype__image'), 'opacity');
+ const initialBeforeOpacity = await getPseudoOpacity(logotype, '::before');
+ expect(initialImageOpacity).toBe('0');
+ expect(initialBeforeOpacity).toBe('1');
+
+ await selectControlOption(page, MASKING_LABEL, '0');
+
+ const updatedImageOpacity = await getComputedCss(logotype.locator('.c-logotype__image'), 'opacity');
+ const updatedBeforeOpacity = await getPseudoOpacity(logotype, '::before');
+ expect(updatedImageOpacity).toBe('1');
+ expect(updatedBeforeOpacity).toBe('0');
+ });
+
+ test('setting Masking back to On re-applies the mask', async ({ page }) => {
+ await expandCategory(page.locator('.db-category-header').filter({ hasText: 'Appearance' }));
+
+ await selectControlOption(page, MASKING_LABEL, '0');
+ await selectControlOption(page, MASKING_LABEL, '1');
+
+ const logotype = page.locator(LOGOTYPE_TARGET).first();
+ const imageOpacity = await getComputedCss(logotype.locator('.c-logotype__image'), 'opacity');
+ const beforeOpacity = await getPseudoOpacity(logotype, '::before');
+
+ expect(imageOpacity).toBe('0');
+ expect(beforeOpacity).toBe('1');
+ });
+});
diff --git a/source/design-builder/shared/control-elements/controls/RangeControl.test.ts b/source/design-builder/shared/control-elements/controls/RangeControl.test.ts
index 9499ab449..e4375f9b3 100644
--- a/source/design-builder/shared/control-elements/controls/RangeControl.test.ts
+++ b/source/design-builder/shared/control-elements/controls/RangeControl.test.ts
@@ -107,4 +107,20 @@ describe('RangeControl', () => {
expect(input.step).toBe('2');
expect(input.value).toBe('160');
});
+
+ it('clamps out-of-range values to the configured bounds', () => {
+ const rangeControl = document.createElement('range-control');
+ rangeControl.setAttribute('min', '-9');
+ rangeControl.setAttribute('max', '9');
+ rangeControl.setAttribute('step', '0.5');
+ rangeControl.setAttribute('value', '360');
+ rangeControl.setAttribute('unit', 'deg');
+ document.body.appendChild(rangeControl);
+
+ const input = rangeControl.querySelector('input[type="range"]') as HTMLInputElement;
+ const output = rangeControl.querySelector('output') as HTMLOutputElement;
+
+ expect(input.value).toBe('9');
+ expect(output.textContent).toBe('9 deg');
+ });
});
diff --git a/source/design-builder/shared/control-elements/controls/RangeControl.ts b/source/design-builder/shared/control-elements/controls/RangeControl.ts
index 8bc2c5645..11e7880f0 100644
--- a/source/design-builder/shared/control-elements/controls/RangeControl.ts
+++ b/source/design-builder/shared/control-elements/controls/RangeControl.ts
@@ -25,12 +25,32 @@ class RangeControl extends HTMLElement {
this.render();
}
+ private getClampedValue(value: string, min: string, max: string): string {
+ if (value === '') {
+ return value;
+ }
+
+ const numericValue = Number.parseFloat(value);
+ const numericMin = Number.parseFloat(min);
+ const numericMax = Number.parseFloat(max);
+
+ if (Number.isNaN(numericValue)) {
+ return value;
+ }
+
+ const lowerBound = Number.isNaN(numericMin) ? numericValue : numericMin;
+ const upperBound = Number.isNaN(numericMax) ? numericValue : numericMax;
+ const clampedValue = Math.min(Math.max(numericValue, lowerBound), upperBound);
+
+ return String(clampedValue);
+ }
+
render() {
const isDisabled = this.hasAttribute('locked');
const min = this.getAttribute('min') || '0';
const max = this.getAttribute('max') || '100';
const step = this.getAttribute('step') || '1';
- const value = this.getAttribute('value') || '';
+ const value = this.getClampedValue(this.getAttribute('value') || '', min, max);
const unit = this.getAttribute('unit') || '';
const markup = () =>
@@ -43,7 +63,8 @@ class RangeControl extends HTMLElement {
}
_onInput(e: Event) {
- const value = (e.target as HTMLInputElement).value;
+ const input = e.target as HTMLInputElement;
+ const value = this.getClampedValue(input.value, input.min, input.max);
this.dispatchEvent(
new CustomEvent('change', {
diff --git a/views/layout/master.blade.php b/views/layout/master.blade.php
index 33f1ca378..70b7bcb29 100644
--- a/views/layout/master.blade.php
+++ b/views/layout/master.blade.php
@@ -45,25 +45,6 @@
-
-
-
@@ -173,7 +154,11 @@
'id' => 'main-logo',
'src' => '/assets/img/logotype.svg',
'alt' => 'Go to homepage',
- 'classList' => ['c-header__logotype']
+ 'maskable' => true,
+ 'classList' => ['c-header__logotype'],
+ 'attributeList' => [
+ 'style' => '--c-header--logotype-height: calc(var(--base) * 6);'
+ ],
])
@endlogotype
@endlink
diff --git a/views/layout/partials/doc-nav.blade.php b/views/layout/partials/doc-nav.blade.php
index 51d240227..0afa1a667 100644
--- a/views/layout/partials/doc-nav.blade.php
+++ b/views/layout/partials/doc-nav.blade.php
@@ -15,7 +15,11 @@
@logotype([
'src'=> '/assets/img/logotype.svg',
'alt' => 'Go to homepage',
- 'classList' => ['c-header__logotype']
+ 'maskable' => true,
+ 'classList' => ['c-header__logotype'],
+ 'attributeList' => [
+ 'style' => '--c-header--logotype-height: calc(var(--base) * 6);'
+ ]
])
@endlogotype
@endlink