@descope/web-components-ui 1.0.62 → 1.0.64

package/src/components/descope-text-area/TextArea.js

@@ -1,20 +1,20 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text-area');
 
 const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
-	required: '::part(required-indicator)::after'
+	required: '::part(required-indicator)::after',
+	host: () => ':host'
 };
 
 let overrides = ``;
@@ -25,7 +25,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: matchHostStyle(),
+			width: { selector: selectors.host },
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -55,6 +55,7 @@ overrides = `
 
 	vaadin-text-area {
 		margin: 0;
+		width: 100%;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {

package/src/components/descope-text-field/TextField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text-field');
 

package/src/components/descope-text-field/textFieldMappings.js

@@ -1,17 +1,15 @@
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-
 const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown'
+	placeholder: '> input:placeholder-shown',
+	host: () => ':host'
 };
 
 export default {
-	color: { selector: selectors.input },
 	backgroundColor: { selector: selectors.input },
 	color: { selector: selectors.input },
-	width: matchHostStyle({}),
+	width: { selector: selectors.host },
 	borderColor: [
 		{ selector: selectors.input },
 		{ selector: selectors.readOnlyInput }

package/src/constants.js

@@ -1 +1,2 @@
 export const DESCOPE_PREFIX = 'descope';
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3

package/src/dev/index.js

@@ -1,2 +1,2 @@
-export {default as defaultTheme} from '../theme';
-export { themeToStyle } from '../themeHelpers';
+export { default as defaultTheme } from '../theme';
+export { themeToStyle } from '../helpers/themeHelpers';

package/src/{componentsHelpers/createProxy/helpers.js → helpers/componentHelpers.js}

@@ -1,3 +1,6 @@
+import { kebabCaseJoin } from '.';
+import { DESCOPE_PREFIX } from '../constants';
+
 const observeAttributes = (
 	ele,
 	callback,
@@ -50,12 +53,17 @@ export const syncAttrs = (ele1, ele2, options) => {
 	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+export const getCssVarName = (...args) =>
+  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+
 export const forwardAttrs = (source, dest, options = {}) => {
-	observeAttributes(
-		source,
-		createSyncAttrsCb(source, dest, options.mapAttrs),
-		options
-	);
+  observeAttributes(
+    source,
+    createSyncAttrsCb(source, dest, options.mapAttrs),
+    options
+  );
 };
 
 export const forwardProps = (src, target, props = []) => {

package/src/{helpers.js → helpers/index.js}

@@ -1,3 +1,4 @@
+
 export const kebabCase = (str) =>
 	str
 		.replace(/([a-z])([A-Z])/g, '$1-$2')
@@ -6,5 +7,7 @@ export const kebabCase = (str) =>
 
 export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-export const getCssVarName = (...args) =>
-	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+export const compose = (...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
+

package/src/helpers/themeHelpers/componentsThemeManager.js

@@ -0,0 +1,40 @@
+
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach(cb => cb?.());
+  };
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => { this.#callbacks.delete(cb); };
+  };
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+}
+
+export const componentsThemeManager = new ComponentsThemeManager()

package/src/{themeHelpers → helpers/themeHelpers}/index.js

@@ -1,8 +1,8 @@
 import merge from 'lodash.merge';
 import set from 'lodash.set';
-import { DESCOPE_PREFIX } from '../constants';
-import { getCssVarName, kebabCase } from '../helpers';
-import { getComponentName } from '../componentsHelpers';
+import { DESCOPE_PREFIX } from '../../constants';
+import { kebabCase } from '..';
+import { getComponentName, getCssVarName } from '../componentHelpers';
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -32,9 +32,9 @@ export const getThemeRefs = (theme, prefix) =>
 export const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-		(acc, entry) => (acc += `${entry.join(':')};\n`),
-		''
-	)}
+	(acc, entry) => (acc += `${entry.join(':')};\n`),
+	''
+)}
 }
 `;
 
@@ -42,10 +42,20 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
 		const [component, ...restPath] = path;
 		const property = restPath.pop();
+		const componentName = getComponentName(component);
+
+		// we need a support for portal components theme (e.g. overlay)
+		// this allows us to generate those themes under different sections
+		// if the theme has root level attribute that starts with #
+		// we are generating a new theme
+		let themeName = 'theme'
+
+		if (restPath[0] && restPath[0].startsWith('#')) {
+			themeName = restPath.shift();
+		}
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
-
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
 			if (section.startsWith('_'))
 				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
@@ -65,30 +75,53 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`;
+		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
 		return {
-			[selector]: {
-				[property]: val
+			[componentName]: {
+				[themeName]: {
+					[selector]: {
+						[property]: val
+					}
+				}
 			}
 		};
 	});
 
-export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
-	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+
+export const createComponentsTheme = (componentsTheme) => {
+	const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+	return Object.keys(styleObj).reduce(
+		(acc, componentName) => {
+			const componentThemes = styleObj[componentName];
+
+			return Object.assign(acc, {
+				[componentName]: Object.keys(componentThemes)
+					.reduce((acc, theme) =>
+						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+						{})
+			})
+		},
+		{}
+	);
+}
+
+const componentsThemeToStyle = (componentsTheme) =>
+	Object.entries(componentsTheme).reduce(
 		(acc, [selector, vars]) =>
-			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
-				vars
-			)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(';\n')} \n}\n\n`),
+		(acc += `${selector} { \n${Object.entries(
+			vars
+		)
+			.map(([key, val]) => `${key}: ${val}`)
+			.join(';\n')} \n}\n\n`),
 		''
 	);
 
-export const themeToStyle = ({ globals, components }, themeName) => `
-${globalsThemeToStyle(globals, themeName)}
-${componentsThemeToStyle(components, themeName)}
-`;
+export const themeToStyle = ({ globals, components }, themeName) => ({
+	globals: globalsThemeToStyle(globals, themeName),
+	components: createComponentsTheme(components)
+});
 
 const useVar = (varName) => `var(${varName})`;
 
@@ -107,3 +140,5 @@ export const createHelperVars = (theme, prefix) => {
 
 	return [res.theme, res.useVars, res.vars];
 };
+
+export { componentsThemeManager } from './componentsThemeManager'

package/src/index.cjs.js

@@ -1,3 +1,3 @@
 // CJS is used by screen-renderer-service, we cannot load vaadin there,
 // so we are exporting only the css generation stuff
-export * from './themeHelpers';
+export * from './helpers/themeHelpers';

package/src/index.js

@@ -2,7 +2,6 @@ import './components/descope-button';
 import './components/descope-checkbox';
 import './components/descope-loader-linear';
 import './components/descope-loader-radial';
-import './components/descope-combo';
 import './components/descope-container';
 import './components/descope-date-picker';
 import './components/descope-divider';
@@ -19,8 +18,9 @@ import './components/descope-text-field';
 
 export {
 	globalsThemeToStyle,
-	componentsThemeToStyle,
-	themeToStyle
-} from './themeHelpers';
-export { genColor } from './themeHelpers/processColors';
+	createComponentsTheme,
+	themeToStyle,
+	componentsThemeManager
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { default as defaultTheme } from './theme';

package/src/index.umd.js

@@ -1,3 +1,5 @@
+const { componentsThemeManager } = require("./helpers/themeHelpers/componentsThemeManager");
+
 const components = import.meta.webpackContext('./components', {
 	recursive: true,
 	regExp: /index.js$/,
@@ -14,3 +16,5 @@ module.exports = components.keys().reduce((acc, key) => {
 
 	return acc;
 }, {});
+
+module.exports.componentsThemeManager = componentsThemeManager

package/src/{componentsHelpers/createProxy/index.js → mixins/createProxy.js}

@@ -1,7 +1,7 @@
-import compose from '../compose';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
-import { hoverableMixin } from '../hoverableMixin';
-import { syncAttrs, forwardProps } from './helpers';
+import { DescopeBaseClass } from '../baseClasses/DescopeBaseClass';
+import { compose } from '../helpers';
+import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
+import { hoverableMixin } from './hoverableMixin';
 
 export const createProxy = ({
 	componentName,

package/src/{componentsHelpers → mixins}/createStyleMixin/helpers.js

@@ -1,4 +1,5 @@
-import { getCssVarName, kebabCase } from '../../helpers';
+import { kebabCase } from '../../helpers';
+import { getCssVarName } from '../../helpers/componentHelpers';
 
 const createCssVarFallback = (first, ...rest) =>
 	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -9,11 +10,10 @@ const createCssSelector = (
 ) =>
 	typeof relativeSelectorOrSelectorFn === 'function'
 		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${
-				/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-					? ` ${relativeSelectorOrSelectorFn}`
-					: relativeSelectorOrSelectorFn
-		  }`;
+		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+			? ` ${relativeSelectorOrSelectorFn}`
+			: relativeSelectorOrSelectorFn
+		}`;
 
 class StyleBuilder {
 	constructor() {
@@ -34,9 +34,9 @@ class StyleBuilder {
 	toString() {
 		return Array.from(this.styleMap.entries()).reduce(
 			(style, [selector, propValArr]) =>
-				(style += `${selector} { \n${propValArr
-					.map(({ property, value }) => `${property}: ${value}`)
-					.join(';\n')} \n}\n\n`),
+			(style += `${selector} { \n${propValArr
+				.map(({ property, value }) => `${property}: ${value}`)
+				.join(';\n')} \n}\n\n`),
 			''
 		);
 	}
@@ -82,9 +82,8 @@ export const createCssVarsList = (componentName, mappings) =>
 		{}
 	);
 
-// match the host selector with the inner element selector
-// e.g. when we want to set the same size for the host & the inner element this can be useful
-export const matchHostStyle = (mappingObj = {}) => [
-	mappingObj,
-	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
-];
+// on some cases we need a selector to be more specific than another
+// for this we have this fn that generate a class selector multiple times
+export const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRepeats)
+	.fill(`.${className}`)
+	.join('')

package/src/mixins/createStyleMixin/index.js

@@ -0,0 +1,109 @@
+import { CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
+import { kebabCaseJoin } from '../../helpers';
+import { getCssVarName } from '../../helpers/componentHelpers';
+import { componentsThemeManager } from '../../helpers/themeHelpers/componentsThemeManager';
+import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
+
+export const createStyleMixin =
+	({ mappings = {} }) =>
+		(superclass) => {
+			const styleAttributes = Object.keys(mappings).map((key) =>
+				kebabCaseJoin('st', key)
+			);
+			return class CustomStyleMixinClass extends superclass {
+				static get observedAttributes() {
+					const superAttrs = superclass.observedAttributes || [];
+					return [...superAttrs, ...styleAttributes];
+				}
+
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, {
+						...mappings,
+					});
+				}
+
+				#overrideStyleEle = null;
+				#themeStyleEle = null;
+				#disconnectThemeManager
+
+				constructor() {
+					super();
+
+					this.classList.add(superclass.componentName)
+
+					this.#createComponentStyle();
+					this.#createComponentTheme();
+					this.#createAttrOverrideStyle();
+				}
+
+				get componentTheme() {
+					return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+				}
+
+				onComponentThemeChange() {
+					this.#themeStyleEle.innerHTML = this.componentTheme.theme
+				}
+
+				#createComponentTheme() {
+					this.#themeStyleEle = document.createElement('style');
+					this.#themeStyleEle.id = 'style-mixin-component-theme';
+					this.shadowRoot.prepend(this.#themeStyleEle);
+					this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.onComponentThemeChange.bind(this))
+					this.onComponentThemeChange()
+				}
+
+				#createAttrOverrideStyle() {
+					this.#overrideStyleEle = document.createElement('style');
+					this.#overrideStyleEle.id = 'style-mixin-overrides';
+
+					const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+					this.shadowRoot.append(this.#overrideStyleEle);
+				}
+
+				#updateAttrOverrideStyle(attrName, value) {
+					const style = this.#overrideStyleEle.sheet?.cssRules[0].style;
+					const varName = getCssVarName(
+						superclass.componentName,
+						attrName.replace(/^st-/, '')
+					);
+
+					if (value) style?.setProperty(varName, value);
+					else style?.removeProperty(varName);
+				}
+
+				#createComponentStyle() {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = 'style-mixin-component';
+					themeStyle.innerHTML = createStyle(
+						superclass.componentName,
+						this.baseSelector,
+						mappings
+					);
+					this.shadowRoot.prepend(themeStyle);
+				}
+
+				attributeChangedCallback(attrName, oldValue, newValue) {
+					super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+					if (styleAttributes.includes(attrName)) {
+						this.#updateAttrOverrideStyle(attrName, newValue);
+					}
+				}
+
+				connectedCallback() {
+					super.connectedCallback?.();
+					if (this.shadowRoot.isConnected) {
+						Array.from(this.attributes).forEach((attr) => {
+							if (styleAttributes.includes(attr.nodeName)) {
+								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
+							}
+						});
+					}
+				}
+
+				disconnectedCallback() {
+					this.#disconnectThemeManager?.();
+				}
+			};
+		};

package/src/{componentsHelpers → mixins}/index.js

@@ -1,11 +1,7 @@
-import { DESCOPE_PREFIX } from '../constants';
-import { kebabCaseJoin } from '../helpers';
-
-export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
-
 export { createStyleMixin } from './createStyleMixin';
 export { draggableMixin } from './draggableMixin';
 export { createProxy } from './createProxy';
 export { proxyInputMixin } from './proxyInputMixin';
 export { componentNameValidationMixin } from './componentNameValidationMixin';
-export { default as compose } from './compose'
+export { hoverableMixin } from './hoverableMixin';
+export { inputMixin } from './inputMixin'

package/src/theme/components/button.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs, createHelperVars } from '../../themeHelpers';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import Button, { componentName } from '../../components/descope-button/Button';
 
 const globalRefs = getThemeRefs(globals);
@@ -17,7 +17,7 @@ const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
 
 const button = {
 	...helperTheme,
-
+	[vars.width]: 'fit-content',
 	size: {
 		xs: {
 			[vars.height]: '10px',

package/src/theme/components/checkbox.js

@@ -3,7 +3,8 @@ import Checkbox from '../../components/descope-checkbox/Checkbox';
 const vars = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars.cursor]: 'pointer'
+	[vars.cursor]: 'pointer',
+	[vars.width]: 'fit-content'
 };
 
 export default checkbox;

package/src/theme/components/container.js

@@ -1,5 +1,5 @@
 import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../themeHelpers";
+import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
 import Container from "../../components/descope-container/Container";
 
 const globalRefs = getThemeRefs(globals);
@@ -27,7 +27,7 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars.display]: 'flex',
+	[vars.width]: '100%',
 	verticalPadding: {
 		sm: { [vars.verticalPadding]: '5px' },
 		md: { [vars.verticalPadding]: '10px' },

package/src/theme/components/divider.js

@@ -1,26 +1,34 @@
-import Divider from '../../components/descope-divider/Divider';
+import Divider, { componentName } from '../../components/descope-divider/Divider';
+import { createHelperVars } from '../../helpers/themeHelpers';
 
 const vars = Divider.cssVarList;
 
+const thickness = '2px'
+const textPaddingSize = '10px'
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
+
+
 const divider = {
+	...helperTheme,
 	[vars.alignItems]: 'center',
-	[vars.height]: '2px',
+	[vars.dividerHeight]: helperRefs.thickness,
 	[vars.backgroundColor]: 'currentColor',
 	[vars.opacity]: '0.2',
-	[vars.padding]: '0 10px',
+	[vars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
 	[vars.width]: '100%',
 	[vars.flexDirection]: 'row',
 	[vars.alignSelf]: 'strech',
 	[vars.textWidth]: 'fit-content',
+	[vars.maxTextWidth]: 'calc(100% - 100px)',
 	_vertical: {
-		[vars.width]: '2px',
-		[vars.padding]: '10px 0',
+		[vars.padding]: `0 calc(${thickness} * 3)`,
+		[vars.width]: 'fit-content',
+		[vars.textPadding]: `${helperRefs.textPaddingSize} 0`,
 		[vars.flexDirection]: 'column',
 		[vars.minHeight]: '200px',
-		[vars.textWidth]: 'max-content'
-	},
-	_italic: {
-		[vars.fontStyle]: 'italic'
+		[vars.textWidth]: 'fit-content',
+		[vars.dividerWidth]: helperRefs.thickness,
+		[vars.maxTextWidth]: '100%',
 	}
 };
 

package/src/theme/components/link.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import Link from '../../components/descope-link/Link';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/loader/loaderLinear.js

@@ -1,5 +1,5 @@
 import LoaderLinear from '../../../components/descope-loader-linear/LoaderLinear';
-import { getThemeRefs } from '../../../themeHelpers';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/loader/loaderRadial.js

@@ -1,5 +1,5 @@
 import LoaderRadial from '../../../components/descope-loader-radial/LoaderRadial';
-import { getThemeRefs } from '../../../themeHelpers';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/text.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import Text from '../../components/descope-text/Text';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/textArea.js

@@ -1,11 +1,12 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import TextArea from '../../components/descope-text-area/TextArea';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextArea.cssVarList;
 
 const textArea = {
+	[vars.width]: '100%',
 	[vars.color]: globalRefs.colors.primary.main,
 	[vars.backgroundColor]: globalRefs.colors.surface.light,
 	[vars.resize]: 'vertical',