@type-dom/ui 0.0.1 → 0.0.3

package/src/components/form/td-input/td-input.class.d.ts

@@ -0,0 +1,21 @@
+import { IJsonDataProp } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { TdInputWrapper } from './widget/td-input-wrapper.class';
+import { TdTextareaWrapper } from './widget/td-textarea-wrapper';
+import { ITdInput, ITdInputConfig } from './td-input.interface';
+export declare class TdInput extends UI implements ITdInput {
+    className: 'TdInput';
+    config?: ITdInputConfig;
+    private isWordLimitVisible?;
+    hovering?: boolean;
+    isFocused?: boolean;
+    panel: TdInputWrapper | TdTextareaWrapper;
+    private placeholder?;
+    constructor(config?: ITdInputConfig);
+    setConfig(config?: ITdInputConfig): void;
+    initEvents(): void;
+    setModelValue(value: IJsonDataProp): void;
+    setHovering(hovering: boolean): void;
+    setFocus(isFocused: boolean): void;
+    created(): void;
+}

package/src/components/form/td-input/td-input.class.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInput = void 0;
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_input_wrapper_class_1 = require("./widget/td-input-wrapper.class");
+const td_input_style_1 = require("./td-input.style");
+const td_textarea_wrapper_1 = require("./widget/td-textarea-wrapper");
+class TdInput extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        console.log('TdInput constructor . ');
+        this.className = 'TdInput';
+        this.addAttrName('td-input');
+        this.addStyleObj({
+            position: 'relative',
+            display: 'inline-flex',
+            width: '100%',
+            boxSizing: 'border-box',
+            verticalAlign: 'middle',
+            // fontSize: var(--el-font-size-base),
+            fontSize: var_1.$fontSizes.base,
+            // lineHeight: var(--el-input-height),
+            lineHeight: td_input_style_1.$inputHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            userSelect: 'none',
+        });
+        console.log('config.modelValue is ', config === null || config === void 0 ? void 0 : config.modelValue);
+        if (config === null || config === void 0 ? void 0 : config.modelValue) {
+            this.modelValue = config.modelValue;
+        }
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.width) {
+            this.addWidth(config.width);
+        }
+        //   todo
+        if ((config === null || config === void 0 ? void 0 : config.type) === 'textarea') {
+            config.parent = this;
+            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(config);
+            // this.textareaWrapper = new TdTextareaWrapper(config);
+        }
+        else {
+            this.panel = new td_input_wrapper_class_1.TdInputWrapper(config);
+        }
+        if (config === null || config === void 0 ? void 0 : config.placeholder) {
+            this.placeholder = config.placeholder;
+        }
+        this.panel.setParent(this);
+        this.addChild(this.panel);
+        if (!(config === null || config === void 0 ? void 0 : config.formatter) && (config === null || config === void 0 ? void 0 : config.parser)) {
+            throw new Error('If you set the parser, you also need to set the formatter');
+        }
+    }
+    initEvents() {
+        var _a, _b;
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
+        this.addEvents({
+            mouseleave: (evt) => {
+                var _a;
+                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) { // 会动态设置的。所以要在监听中判断拦截；
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                this.setHovering(false);
+            },
+            mouseenter: (evt, element) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabled) {
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    return;
+                }
+                this.setHovering(true);
+                console.log('mouseenter then showClear . ');
+                if (this.panel instanceof td_input_wrapper_class_1.TdInputWrapper) {
+                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.clearable) {
+                        console.log('this.panel?.showClear is ', (_c = this.panel) === null || _c === void 0 ? void 0 : _c.showClear);
+                        (_d = this.panel) === null || _d === void 0 ? void 0 : _d.setShowClear((_e = this.panel) === null || _e === void 0 ? void 0 : _e.showClear);
+                    }
+                    if ((_f = this.config) === null || _f === void 0 ? void 0 : _f.showPassword) {
+                        (_g = this.panel) === null || _g === void 0 ? void 0 : _g.setShowPassword((_h = this.panel) === null || _h === void 0 ? void 0 : _h.showPwdVisible);
+                    }
+                }
+            }
+        });
+        this.panel.inner.addEvents({
+            change: (evt, element) => {
+                console.log('td-input change', evt, element);
+            },
+            input: (evt, element) => {
+                var _a, _b, _c;
+                console.log('td-input input', evt, element);
+                if (this.modelValue instanceof framework_1.XProxy) {
+                    (_a = this.modelValue) === null || _a === void 0 ? void 0 : _a.setValue((_b = element === null || element === void 0 ? void 0 : element.dom) === null || _b === void 0 ? void 0 : _b.value);
+                }
+                else {
+                    this.modelValue = (_c = element === null || element === void 0 ? void 0 : element.dom) === null || _c === void 0 ? void 0 : _c.value;
+                }
+            }
+        });
+        if (((_b = this.config) === null || _b === void 0 ? void 0 : _b.type) === 'textarea') {
+            return; // ????
+        }
+    }
+    setModelValue(value) {
+        console.log('setModelValue . value is ', value);
+        if ((0, utils_1.isString)(value)) {
+            if ((0, utils_1.isMustache)(value)) {
+                if (this.itemData) {
+                    const originalValue = (0, utils_1.mustache)(value, this.itemData);
+                    this.panel.inner.setValue(originalValue);
+                }
+                else {
+                    this.panel.inner.setValue(value);
+                }
+            }
+            else {
+                this.panel.inner.setValue(value);
+            }
+        }
+        else if (value instanceof framework_1.XProxy) {
+            this.panel.inner.setValue(value.value);
+        }
+        else {
+            //   todo
+        }
+    }
+    setHovering(hovering) {
+        var _a, _b;
+        this.hovering = hovering;
+        if (hovering) {
+            if (!this.isFocused) {
+                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+                    boxShadow: '0 0 0 1px ' + td_input_style_1.$input.hoverBorderColor + ' inset'
+                });
+            }
+        }
+        else {
+            if (!this.isFocused) {
+                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.setStyleObj({
+                    boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
+                });
+            }
+        }
+    }
+    setFocus(isFocused) {
+        var _a, _b;
+        this.isFocused = isFocused;
+        if (isFocused) {
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+                boxShadow: '0 0 0 1px ' + td_input_style_1.$input.focusBorderColor + ' inset'
+            });
+        }
+        else {
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.setStyleObj({
+                boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
+            });
+        }
+    }
+    created() {
+        var _a;
+        // 注： 绑定变量要渲染前处理，而不是创建对象时处理
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.modelValue) {
+            console.log('td-input created . ');
+            console.log('setModelValue ', this.config.modelValue);
+            this.setModelValue(this.config.modelValue);
+        }
+    }
+}
+exports.TdInput = TdInput;

package/src/components/form/td-input/td-input.interface.d.ts

@@ -0,0 +1,133 @@
+import { IJsonDataProp, InputEnum, IObDataProp, Span, TypeSvgSvg } from '@type-dom/framework';
+import { ISize } from '../../../styles/size';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdInput } from './td-input.class';
+export interface ITdInput extends IUI {
+    className: 'TdInput';
+}
+export interface ITdInputConfig extends IUIConfig {
+    parent?: TdInput;
+    /**
+     * @description native input id
+     */
+    id?: string;
+    /**
+     * @description input box size
+     */
+    size?: ISize;
+    /**
+     * @description whether to disable
+     */
+    disabled?: boolean;
+    /**
+     * @description binding value
+     */
+    modelValue?: IJsonDataProp;
+    /**
+     * @description same as `maxlength` in native input
+     */
+    maxlength?: string | number;
+    /**
+     * @description same as `minlength` in native input
+     */
+    minlength?: string | number;
+    /**
+     * @description type of input
+     * default text
+     */
+    type?: keyof typeof InputEnum | 'textarea';
+    /**
+     * @description control the resizability
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    /**
+     * @description whether textarea has an adaptive height
+     *     default: false,
+     */
+    autosize?: boolean;
+    /**
+     * @description native input autocomplete
+     *     default: 'off',
+     */
+    autocomplete?: string;
+    /**
+     * @description format content
+     */
+    formatter?: (value: string) => string;
+    /**
+     * @description parse content
+     */
+    parser?: (value: string) => string;
+    /**
+     * @description placeholder
+     */
+    placeholder?: IObDataProp;
+    /**
+     * @description native input form
+     */
+    form?: string;
+    /**
+     * @description native input readonly
+     *     default: false,
+     */
+    readonly?: boolean;
+    /**
+     * @description native input readonly
+     *     default: false,
+     */
+    clearable?: boolean;
+    /**
+     * @description toggleable password input
+     *     default: false,
+     */
+    showPassword?: boolean;
+    /**
+     * @description word count
+     *     default: false,
+     */
+    showWordLimit?: boolean;
+    /**
+     * @description suffix icon
+     */
+    suffixIcon?: TypeSvgSvg;
+    /**
+     * @description prefix icon
+     */
+    prefixIcon?: TypeSvgSvg;
+    /**
+     * @description container role, internal properties provided for use by the picker component
+     *     default: undefined,
+     */
+    containerRole?: string;
+    /**
+     * @description native input aria-label
+     *     default: undefined,
+     */
+    label?: string;
+    /**
+     * @description input tabindex
+     *     default: 0,
+     */
+    tabindex?: string | number;
+    /**
+     * @description whether to trigger form validation
+     *     default: true,
+     */
+    validateEvent?: boolean;
+    /**
+     * @description input or textarea element style
+     */
+    /**
+     * @description native input autofocus
+     *     default: false,
+     */
+    autofocus?: boolean;
+    prepend?: boolean;
+    append?: boolean;
+    prefix?: Span;
+    suffixVisible?: boolean;
+    passwordVisible?: boolean;
+    width?: number;
+    suffix?: Span;
+}
+export type TargetElement = HTMLInputElement | HTMLTextAreaElement;

package/src/components/form/td-input/td-input.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-input/td-input.style.d.ts

@@ -0,0 +1,53 @@
+export declare const $input: {
+    textColor: string;
+    hoverBorder: string;
+    focusBorder: string;
+    transparentBorder: string;
+    borderColor: string;
+    borderRadius: string;
+    bgColor: string;
+    iconColor: string;
+    placeholderColor: string;
+    hoverBorderColor: string;
+    clearHoverColor: string;
+    focusBorderColor: string;
+    width: string;
+};
+export declare const $inputDisabled: {
+    fill: string;
+    border: string;
+    textColor: string;
+    placeholderColor: string;
+};
+export declare const $inputFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $inputHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $inputLineHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $inputNumberWidth: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $inputPaddingHorizontal: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $wrapperPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $inputTextColor: string;
+export declare const $inputInnerHeight: string;

package/src/components/form/td-input/td-input.style.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$inputInnerHeight = exports.$inputTextColor = exports.$wrapperPadding = exports.$inputPaddingHorizontal = exports.$inputNumberWidth = exports.$inputLineHeight = exports.$inputHeight = exports.$inputFontSize = exports.$inputDisabled = exports.$input = void 0;
+const var_1 = require("../../../styles/var");
+// Input
+// css3 var in packages/theme-chalk/src/input.scss
+exports.$input = {
+    textColor: var_1.$textColor.regular,
+    // 'border': $border, // getCssVar('border'),
+    hoverBorder: var_1.$borderColorHover, // getCssVar('border-color-hover'),
+    focusBorder: var_1.$colors.primary.base, // getCssVar('color-primary'),
+    transparentBorder: '0 0 0 1px transparent inset',
+    borderColor: var_1.$borderColor.base, // getCssVar('border-color'),
+    borderRadius: var_1.$borderRadius.base, // getCssVar('border-radius-base'),
+    bgColor: var_1.$fillColor.blank, // getCssVar('fill-color', 'blank'),
+    iconColor: var_1.$textColor.placeholder, // getCssVar('text-color-placeholder'),
+    placeholderColor: var_1.$textColor.placeholder, // getCssVar('text-color-placeholder'),
+    hoverBorderColor: var_1.$borderColorHover, // getCssVar('border-color-hover'),
+    clearHoverColor: var_1.$textColor.secondary, // getCssVar('text-color-secondary'),
+    focusBorderColor: var_1.$colors.primary.base, // getCssVar('color-primary'),
+    width: '100%'
+};
+exports.$inputDisabled = {
+    fill: var_1.$disabled.bgColor,
+    border: var_1.$disabled.borderColor,
+    textColor: var_1.$disabled.textColor,
+    placeholderColor: var_1.$textColor.placeholder
+};
+exports.$inputFontSize = {
+    large: '14px',
+    default: '14px',
+    small: '12px'
+};
+exports.$inputHeight = var_1.$commonComponentSize;
+exports.$inputLineHeight = var_1.$commonComponentSize;
+exports.$inputNumberWidth = {
+    large: '180px',
+    default: '150px',
+    small: '120px'
+};
+exports.$inputPaddingHorizontal = {
+    large: '16px',
+    default: '12px',
+    small: '8px'
+};
+exports.$wrapperPadding = {
+    large: var_1.$borderWidth +
+        ' ' +
+        (parseFloat(exports.$inputPaddingHorizontal.large.slice(0, -2)) -
+            parseFloat(var_1.$borderWidth.slice(0, -2))) +
+        'px',
+    default: var_1.$borderWidth +
+        ' ' +
+        (parseFloat(exports.$inputPaddingHorizontal.default.slice(0, -2)) -
+            parseFloat(var_1.$borderWidth.slice(0, -2))) +
+        'px',
+    small: var_1.$borderWidth +
+        ' ' +
+        (parseFloat(exports.$inputPaddingHorizontal.small.slice(0, -2)) -
+            parseFloat(var_1.$borderWidth.slice(0, -2))) +
+        'px'
+};
+exports.$inputTextColor = var_1.$textColor.primary;
+exports.$inputInnerHeight = parseFloat(var_1.$commonComponentSize.default.slice(0, -2)) -
+    parseFloat(var_1.$borderWidth.slice(0, -2)) * 2 +
+    'px';

package/src/components/form/td-input/widget/prefix.d.ts

@@ -0,0 +1,10 @@
+import { TypeSpan } from '@type-dom/framework';
+import { ITdInputConfig } from '../td-input.interface';
+import { TdInputWrapper } from './td-input-wrapper.class';
+export declare class TdInputPrefix extends TypeSpan {
+    className: 'TdInputPrefix';
+    parent: TdInputWrapper;
+    private prefixInner;
+    private prefixIcon?;
+    constructor(parent: TdInputWrapper, config?: ITdInputConfig);
+}

package/src/components/form/td-input/widget/prefix.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInputPrefix = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const td_input_style_1 = require("../td-input.style");
+class TdInputPrefix extends framework_1.TypeSpan {
+    constructor(parent, config) {
+        super();
+        this.parent = parent;
+        this.className = 'TdInputPrefix';
+        this.addStyleObj({
+            display: (config === null || config === void 0 ? void 0 : config.prefixIcon) ? 'inline-flex' : 'none',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            flexWrap: 'nowrap',
+            height: '100%',
+            textAlign: 'center',
+            //   color: var,
+            //     #{getCssVarName('input-icon-color')},
+            //     map.get($input, 'icon-color',
+            // ),
+            color: td_input_style_1.$input.iconColor,
+            // transition: all getCssVar('transition-duration'),
+            transition: 'all 0.3s',
+            pointerEvents: 'none'
+        });
+        this.prefixInner = new framework_1.Span({
+            attrObj: {
+                name: 'prefix-inner'
+            },
+            styleObj: {
+                pointerEvents: 'all',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginRight: '8px'
+            }
+        });
+        this.addChild(this.prefixInner);
+        if (config === null || config === void 0 ? void 0 : config.prefixIcon) {
+            this.prefixIcon = new td_icon_class_1.TdIcon({
+                svgObj: config.prefixIcon,
+                attrObj: {
+                    name: 'prefix-icon'
+                },
+                styleObj: {
+                    display: 'inline-flex',
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+                    // cursor: StyleCursor.pointer,
+                },
+                events: {
+                    click: (evt, icon) => {
+                        console.log('prefixIcon click . ');
+                        this.parent.inner.focus();
+                    }
+                }
+            });
+            this.prefixInner.addChild(this.prefixIcon);
+        }
+    }
+}
+exports.TdInputPrefix = TdInputPrefix;

package/src/components/form/td-input/widget/suffix.d.ts

@@ -0,0 +1,13 @@
+import { TypeSpan } from '@type-dom/framework';
+import { ITdInputConfig } from '../td-input.interface';
+import { TdIcon } from '@type-dom/ui';
+import { TdInputWrapper } from './td-input-wrapper.class';
+export declare class TdInputSuffix extends TypeSpan {
+    className: 'TdInputSuffix';
+    parent: TdInputWrapper;
+    private suffixInner;
+    private suffixIcon?;
+    clearIcon?: TdIcon;
+    passwordIcon?: TdIcon;
+    constructor(parent: TdInputWrapper, config?: ITdInputConfig);
+}

package/src/components/form/td-input/widget/suffix.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInputSuffix = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_1 = require("@type-dom/ui");
+const svgs_1 = require("@type-dom/svgs");
+const td_input_style_1 = require("../td-input.style");
+class TdInputSuffix extends framework_1.TypeSpan {
+    constructor(parent, config) {
+        super();
+        this.parent = parent;
+        this.className = 'TdInputSuffix';
+        this.addStyleObj({
+            display: this.parent.suffixVisible ? 'inline-flex' : 'none',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            flexWrap: 'nowrap',
+            height: '100%',
+            textAlign: 'center',
+            //   color: var,
+            //     #{getCssVarName('input-icon-color')},
+            //     map.get($input, 'icon-color',
+            // ),
+            color: td_input_style_1.$input.iconColor,
+            // transition: all getCssVar('transition-duration'),
+            transition: 'all 0.3s',
+            pointerEvents: 'none'
+        });
+        this.suffixInner = new framework_1.Span({
+            attrObj: {
+                name: 'suffix-inner'
+            },
+            styleObj: {
+                pointerEvents: 'all',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginLeft: '8px'
+            }
+        });
+        this.addChild(this.suffixInner);
+        if (config === null || config === void 0 ? void 0 : config.clearable) {
+            this.clearIcon = new ui_1.TdIcon({
+                svgObj: new svgs_1.ElCircleCloseSvg(),
+                attrObj: {
+                    name: 'suffix-icon'
+                },
+                styleObj: {
+                    display: 'none',
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                    cursor: framework_1.StyleCursor.pointer
+                },
+                events: {
+                    click: (evt, icon) => {
+                        console.log('click icon is ', icon);
+                        this.parent.inner.setValue('');
+                        this.parent.setShowClear(false);
+                        this.parent.inner.focus();
+                    },
+                    mousedown: (evt, icon) => {
+                        console.log('mousedown, icon is ', icon);
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                    }
+                }
+            });
+            this.suffixInner.addChild(this.clearIcon);
+        }
+        if (config === null || config === void 0 ? void 0 : config.showPassword) {
+            this.passwordIcon = new ui_1.TdIcon({
+                svgObj: new svgs_1.ElHideSvg(),
+                styleObj: {
+                    display: this.parent.showPwdVisible ? 'inline-flex' : 'none',
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                    cursor: framework_1.StyleCursor.pointer
+                },
+                events: {
+                    click: () => {
+                        var _a;
+                        console.log('click showPassword ');
+                        this.parent.passwordVisible = !this.parent.passwordVisible;
+                        (_a = this.passwordIcon) === null || _a === void 0 ? void 0 : _a.replaceSvg(this.parent.passwordVisible ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
+                        if (this.parent.passwordVisible) {
+                            this.parent.inner.setAttrObj({
+                                type: 'text'
+                            });
+                        }
+                        else {
+                            this.parent.inner.setAttrObj({
+                                type: 'password'
+                            });
+                        }
+                        this.parent.inner.focus();
+                    }
+                }
+            });
+            this.suffixInner.addChild(this.passwordIcon);
+        }
+        if (config === null || config === void 0 ? void 0 : config.suffixIcon) {
+            this.suffixIcon = new ui_1.TdIcon({
+                svgObj: config.suffixIcon,
+                attrObj: {
+                    name: 'suffix-icon'
+                },
+                styleObj: {
+                    display: 'inline-flex',
+                    fontSize: td_input_style_1.$inputFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+                    // cursor: StyleCursor.pointer,
+                },
+                events: {
+                    click: (evt, icon) => {
+                        console.log('suffixIcon click . ');
+                        this.parent.inner.focus();
+                    }
+                }
+            });
+            this.suffixInner.addChild(this.suffixIcon);
+        }
+    }
+}
+exports.TdInputSuffix = TdInputSuffix;