placer-toolkit 0.5.1

package/dist/components/input/input.component.js

@@ -0,0 +1,513 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, state, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { FormControlController } from '../../internal/form.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { defaultValue } from '../../internal/default-value.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcIcon } from '../icon/icon.component.js';
+import { styles } from './input.styles.js';
+
+let PcInput = class PcInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        // @ts-expect-error
+        this.formControlController = new FormControlController(this, {
+            assumeInteractionOn: ["pc-blur", "pc-input"],
+        });
+        this.hasSlotController = new HasSlotController(this, "hint", "label");
+        this.hasFocus = false;
+        this.title = "";
+        this.__numberInput = Object.assign(document.createElement("input"), {
+            type: "number",
+        });
+        this.__dateInput = Object.assign(document.createElement("input"), {
+            type: "date",
+        });
+        this.autocapitalize = "none";
+        this.autocorrect = "off";
+        this.clearable = false;
+        this.disabled = false;
+        this.defaultValue = "";
+        this.enterkeyhint = "enter";
+        this.filled = false;
+        this.form = "";
+        this.hint = "";
+        this.inputmode = "text";
+        this.label = "";
+        this.name = "";
+        this.noSpinButtons = false;
+        this.passwordToggle = false;
+        this.passwordVisible = false;
+        this.pill = false;
+        this.placeholder = "";
+        this.readonly = false;
+        this.required = false;
+        this.size = "medium";
+        this.spellcheck = true;
+        this.type = "text";
+        this.value = "";
+    }
+    get valueAsDate() {
+        this.__dateInput.type = this.type;
+        this.__dateInput.value = this.value;
+        return this.input?.valueAsDate || this.__dateInput.valueAsDate;
+    }
+    set valueAsDate(newValue) {
+        this.__dateInput.type = this.type;
+        this.__dateInput.valueAsDate = newValue;
+        this.value = this.__dateInput.value;
+    }
+    get valueAsNumber() {
+        this.__numberInput.value = this.value;
+        return this.input?.valueAsNumber || this.__numberInput.valueAsNumber;
+    }
+    set valueAsNumber(newValue) {
+        this.__numberInput.valueAsNumber = newValue;
+        this.value = this.__numberInput.value;
+    }
+    get validity() {
+        return this.input.validity;
+    }
+    get validationMessage() {
+        return this.input.validationMessage;
+    }
+    firstUpdated() {
+        this.formControlController.updateValidity();
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+    handleChange() {
+        this.value = this.input.value;
+        emit(this, "pc-change");
+    }
+    handleInput() {
+        this.value = this.input.value;
+        this.formControlController.updateValidity();
+        emit(this, "pc-input");
+    }
+    handleClearClick(event) {
+        event.preventDefault();
+        if (this.value !== "") {
+            this.value = "";
+            emit(this, "pc-clear");
+            emit(this, "pc-input");
+            emit(this, "pc-change");
+        }
+        this.input.focus();
+    }
+    handleKeyDown(event) {
+        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+        if (event.key === "Enter" && !hasModifier) {
+            setTimeout(() => {
+                if (!event.defaultPrevented && !event.isComposing) {
+                    this.formControlController.submit();
+                }
+            });
+        }
+    }
+    handlePasswordToggle() {
+        this.passwordVisible = !this.passwordVisible;
+    }
+    handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    handleDisabledChange() {
+        this.formControlController.setValidity(this.disabled);
+    }
+    handleStepChange() {
+        this.input.step = String(this.step);
+        this.formControlController.updateValidity();
+    }
+    async handleValueChange() {
+        await this.updateComplete;
+        this.formControlController.updateValidity();
+    }
+    focus(options) {
+        this.input.focus(options);
+    }
+    blur() {
+        this.input.blur();
+    }
+    select() {
+        this.input.select();
+    }
+    setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+        this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    }
+    setRangeText(replacement, start, end, selectMode = "preserve") {
+        const selectionStart = start ?? this.input.selectionStart;
+        const selectionEnd = end ?? this.input.selectionEnd;
+        this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
+        if (this.value !== this.input.value) {
+            this.value = this.input.value;
+        }
+    }
+    showPicker() {
+        if ("showPicker" in HTMLInputElement.prototype) {
+            this.input.showPicker();
+        }
+    }
+    stepUp() {
+        this.input.stepUp();
+        if (this.value !== this.input.value) {
+            this.value = this.input.value;
+        }
+    }
+    stepDown() {
+        this.input.stepDown();
+        if (this.value !== this.input.value) {
+            this.value = this.input.value;
+        }
+    }
+    checkValidity() {
+        return this.input.checkValidity();
+    }
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    reportValidity() {
+        return this.input.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.input.setCustomValidity(message);
+        this.formControlController.updateValidity();
+    }
+    render() {
+        const hasLabelSlot = this.hasSlotController.test("label");
+        const hasHintSlot = this.hasSlotController.test("hint");
+        const hasLabel = this.label ? true : !!hasLabelSlot;
+        const hasHint = this.hint ? true : !!hasHintSlot;
+        const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+        const isClearIconVisible = hasClearIcon &&
+            (typeof this.value === "number" || this.value.length > 0);
+        return html `
+            <div
+                part="form-control"
+                class=${classMap({
+            "form-control": true,
+            "form-control-small": this.size === "small",
+            "form-control-medium": this.size === "medium",
+            "form-control-large": this.size === "large",
+            "form-control-has-label": hasLabel === true,
+            "form-control-has-hint": hasHint === true,
+        })}
+            >
+                <label
+                    part="label"
+                    class="label"
+                    for="input"
+                    aria-hidden=${hasLabel ? "false" : "true"}
+                >
+                    <slot name="label">${this.label}</slot>
+                </label>
+
+                <div part="form-control-input" class="form-control-input">
+                    <div
+                        part="base"
+                        class=${classMap({
+            "input": true,
+            "input-small": this.size === "small",
+            "input-medium": this.size === "medium",
+            "input-large": this.size === "large",
+            "input-pill": this.pill === true,
+            "input-standard": this.filled === false,
+            "input-filled": this.filled === true,
+            "input-disabled": this.disabled === true,
+            "input-focused": this.hasFocus === true,
+            "input-empty": !this.value,
+            "input-no-spin-buttons": this.noSpinButtons,
+        })}
+                    >
+                        <span part="prefix" class="prefix">
+                            <slot name="prefix"></slot>
+                        </span>
+
+                        <input
+                            part="input"
+                            class="input-control"
+                            id="input"
+                            type=${this.type === "password" &&
+            this.passwordVisible
+            ? "text"
+            : this.type}
+                            title=${this.title}
+                            name=${ifDefined(this.name)}
+                            ?disabled=${this.disabled}
+                            ?readonly=${this.readonly}
+                            ?required=${this.required}
+                            placeholder=${ifDefined(this.placeholder)}
+                            min=${ifDefined(this.min)}
+                            minlength=${ifDefined(this.minlength)}
+                            max=${ifDefined(this.max)}
+                            maxlength=${ifDefined(this.maxlength)}
+                            step=${ifDefined(this.step)}
+                            .value=${live(this.value)}
+                            autocapitalize=${ifDefined(this.autocapitalize)}
+                            autocomplete=${ifDefined(this.autocomplete)}
+                            autocorrect=${ifDefined(this.autocorrect)}
+                            ?autofocus=${this.autofocus}
+                            spellcheck=${this.spellcheck}
+                            pattern=${ifDefined(this.pattern)}
+                            enterkeyhint=${ifDefined(this.enterkeyhint)}
+                            inputmode=${ifDefined(this.inputmode)}
+                            aria-describedby="hint"
+                            @focus=${this.handleFocus}
+                            @blur=${this.handleBlur}
+                            @change=${this.handleChange}
+                            @input=${this.handleInput}
+                            @keydown=${this.handleKeyDown}
+                            @invalid=${this.handleInvalid}
+                        />
+
+                        ${isClearIconVisible
+            ? html `
+                                  <button
+                                      class="clear-input-button"
+                                      part="clear-button"
+                                      type="button"
+                                      aria-label="Clear input"
+                                      @click=${this.handleClearClick}
+                                      tabindex="-1"
+                                  >
+                                      <slot name="clear-icon">
+                                          <pc-icon
+                                              library="system"
+                                              icon-style="regular"
+                                              name="circle-xmark"
+                                          ></pc-icon>
+                                      </slot>
+                                  </button>
+                              `
+            : ""}
+                        ${this.passwordToggle && !this.disabled
+            ? html `
+                                  <button
+                                      class="password-toggle-button"
+                                      part="password-toggle-button"
+                                      type="button"
+                                      aria-label=${this.passwordVisible
+                ? "Hide password"
+                : "Show password"}
+                                      @click=${this.handlePasswordToggle}
+                                      tabindex="-1"
+                                  >
+                                      ${this.passwordVisible
+                ? html `
+                                                <slot name="show-password-icon">
+                                                    <pc-icon
+                                                        library="system"
+                                                        icon-style="regular"
+                                                        name="eye-slash"
+                                                    ></pc-icon>
+                                                </slot>
+                                            `
+                : html `
+                                                <slot name="hide-password-icon">
+                                                    <pc-icon
+                                                        library="system"
+                                                        icon-style="regular"
+                                                        name="eye"
+                                                    ></pc-icon>
+                                                </slot>
+                                            `}
+                                  </button>
+                              `
+            : ""}
+
+                        <span part="suffix" class="suffix">
+                            <slot name="suffix"></slot>
+                        </span>
+                    </div>
+                </div>
+
+                <div
+                    part="hint"
+                    class="hint"
+                    id="hint"
+                    aria-hidden=${hasHint ? "false" : "true"}
+                >
+                    <slot name="hint">${this.hint}</slot>
+                </div>
+            </div>
+        `;
+    }
+};
+PcInput.styles = styles;
+PcInput.dependencies = { "pc-icon": PcIcon };
+__decorate([
+    query(".input-control"),
+    __metadata("design:type", HTMLInputElement)
+], PcInput.prototype, "input", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "hasFocus", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "title", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "autocapitalize", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "autocomplete", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "autocorrect", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], PcInput.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "disabled", void 0);
+__decorate([
+    defaultValue(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "defaultValue", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "enterkeyhint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "filled", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "form", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "hint", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "inputmode", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "label", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "min", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Number)
+], PcInput.prototype, "minlength", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "max", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Number)
+], PcInput.prototype, "maxlength", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "name", void 0);
+__decorate([
+    property({ attribute: "no-spin-buttons", type: Boolean }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "noSpinButtons", void 0);
+__decorate([
+    property({ attribute: "password-toggle", type: Boolean }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "passwordToggle", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcInput.prototype, "pattern", void 0);
+__decorate([
+    property({ attribute: "password-visible", type: Boolean }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "passwordVisible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "pill", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcInput.prototype, "size", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: {
+            fromAttribute: (value) => !value || value === "false" ? false : true,
+            toAttribute: (value) => (value ? "true" : "false"),
+        },
+    }),
+    __metadata("design:type", Object)
+], PcInput.prototype, "spellcheck", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcInput.prototype, "type", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcInput.prototype, "value", void 0);
+__decorate([
+    watch("disabled", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcInput.prototype, "handleDisabledChange", null);
+__decorate([
+    watch("step", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcInput.prototype, "handleStepChange", null);
+__decorate([
+    watch("value", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcInput.prototype, "handleValueChange", null);
+PcInput = __decorate([
+    customElement("pc-input")
+], PcInput);
+
+export { PcInput };

package/dist/components/input/input.d.ts

@@ -0,0 +1,8 @@
+import { PcInput } from "./input.component.js";
+export * from "./input.component.js";
+export default PcInput;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-input": PcInput;
+    }
+}

package/dist/components/input/input.js

@@ -0,0 +1,5 @@
+import { PcInput as PcInput$1 } from './input.component.js';
+
+var PcInput = PcInput$1;
+
+export { PcInput$1 as PcInput, PcInput as default };

package/dist/components/input/input.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;