placer-toolkit 0.5.1

package/dist/components/icon-button/icon-button.component.js

@@ -0,0 +1,151 @@
+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 { emit } from '../../internal/emit.js';
+import { PcIcon } from '../icon/icon.component.js';
+import { styles } from './icon-button.styles.js';
+
+let PcIconButton = class PcIconButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasFocus = false;
+        this.disabled = false;
+        this.label = "";
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+    click() {
+        this.button.click();
+    }
+    focus(options) {
+        this.button.focus(options);
+    }
+    blur() {
+        this.button.blur();
+    }
+    render() {
+        const isLink = this.href ? true : false;
+        return html `
+            ${isLink
+            ? html `
+                      <a
+                          part="base"
+                          class=${classMap({
+                "icon-button": true,
+                "icon-button-disabled": this.disabled === true,
+                "icon-button-focused": this.hasFocus === true,
+            })}
+                          href=${ifDefined(this.href)}
+                          target=${ifDefined(this.target)}
+                          download=${ifDefined(this.download)}
+                          rel=${ifDefined(this.target ? "noreferrer noopener" : undefined)}
+                          aria-label=${this.label}
+                          tabindex=${this.disabled ? "-1" : "0"}
+                          @click=${this.handleClick}
+                          @focus=${this.handleFocus}
+                          @blur=${this.handleBlur}
+                      >
+                          <pc-icon
+                              class="icon"
+                              library=${ifDefined(this.library)}
+                              icon-style=${ifDefined(this.iconStyle)}
+                              name=${ifDefined(this.name)}
+                              src=${ifDefined(this.src)}
+                              aria-hidden="true"
+                          ></pc-icon>
+                      </a>
+                  `
+            : html `
+                      <button
+                          part="base"
+                          class=${classMap({
+                "icon-button": true,
+                "icon-button-disabled": this.disabled === true,
+                "icon-button-focused": this.hasFocus === true,
+            })}
+                          type="button"
+                          aria-label=${this.label}
+                          aria-disabled=${this.disabled ? "true" : "false"}
+                          tabindex=${this.disabled ? "-1" : "0"}
+                          @click=${this.handleClick}
+                          @focus=${this.handleFocus}
+                          @blur=${this.handleBlur}
+                      >
+                          <pc-icon
+                              class="icon"
+                              library=${ifDefined(this.library)}
+                              icon-style=${ifDefined(this.iconStyle)}
+                              name=${ifDefined(this.name)}
+                              src=${ifDefined(this.src)}
+                              aria-hidden="true"
+                          ></pc-icon>
+                      </button>
+                  `}
+        `;
+    }
+};
+PcIconButton.styles = styles;
+PcIconButton.dependencies = { "pc-icon": PcIcon };
+__decorate([
+    query(".icon-button"),
+    __metadata("design:type", Object)
+], PcIconButton.prototype, "button", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcIconButton.prototype, "hasFocus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcIconButton.prototype, "disabled", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "download", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "href", void 0);
+__decorate([
+    property({ attribute: "icon-style" }),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "iconStyle", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcIconButton.prototype, "label", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "library", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "name", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "src", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIconButton.prototype, "target", void 0);
+PcIconButton = __decorate([
+    customElement("pc-icon-button")
+], PcIconButton);
+
+export { PcIconButton };

package/dist/components/icon-button/icon-button.d.ts

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

package/dist/components/icon-button/icon-button.js

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

package/dist/components/icon-button/icon-button.styles.d.ts

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

package/dist/components/icon-button/icon-button.styles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: inline-flex;
+        color: var(--pc-color-neutral-600);
+    }
+
+    .icon-button {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        background: transparent;
+        border: none;
+        border-radius: var(--pc-border-radius-m);
+        font-size: inherit;
+        color: inherit;
+        padding: var(--pc-spacing-s);
+        cursor: pointer;
+        -webkit-appearance: none;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .icon-button:hover:not(.icon-button-disabled),
+    .icon-button:focus-visible:not(.icon-button-disabled) {
+        background-color: var(--pc-color-neutral-200);
+    }
+
+    .icon-button:active:not(.icon-button-disabled) {
+        background-color: var(--pc-color-neutral-100);
+        color: var(--pc-color-neutral-500);
+    }
+
+    .icon-button:focus {
+        outline: none;
+    }
+
+    .icon-button-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .icon-button:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .icon {
+        pointer-events: none;
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,78 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.js";
+export declare class PcInput extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    input: HTMLInputElement;
+    private hasFocus;
+    title: string;
+    private __numberInput;
+    private __dateInput;
+    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
+    autocomplete?: string;
+    autocorrect: "off" | "on";
+    autofocus: boolean;
+    clearable: boolean;
+    disabled: boolean;
+    defaultValue: string;
+    enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+    filled: boolean;
+    form: string;
+    hint: string;
+    inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
+    label: string;
+    min?: number | string;
+    minlength?: number;
+    max?: number | string;
+    maxlength?: number;
+    name: string;
+    noSpinButtons: boolean;
+    passwordToggle: boolean;
+    pattern?: string;
+    passwordVisible: boolean;
+    pill: boolean;
+    placeholder: string;
+    readonly: boolean;
+    required: boolean;
+    size: "small" | "medium" | "large";
+    spellcheck: boolean;
+    step?: number | "any";
+    type: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
+    value: string;
+    get valueAsDate(): Date | null;
+    set valueAsDate(newValue: Date | null);
+    get valueAsNumber(): number;
+    set valueAsNumber(newValue: number);
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    firstUpdated(): void;
+    private handleFocus;
+    private handleBlur;
+    private handleChange;
+    private handleInput;
+    private handleClearClick;
+    private handleKeyDown;
+    private handlePasswordToggle;
+    private handleInvalid;
+    handleDisabledChange(): void;
+    handleStepChange(): void;
+    handleValueChange(): Promise<void>;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    select(): void;
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none"): void;
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void;
+    showPicker(): void;
+    stepUp(): void;
+    stepDown(): void;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}