placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/dist/components/avatar/avatar.component.js

@@ -1,137 +0,0 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, html } from 'lit';
-import { state, property, customElement } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { watch } from '../../internal/watch.js';
-import { emit } from '../../internal/emit.js';
-import { PcIcon } from '../icon/icon.component.js';
-import { styles } from './avatar.styles.js';
-
-/**
- * @summary Avatars are used to represent a person or object.
- * @status experimental
- * @since 0.1.0
- *
- * @dependency pc-icon
- *
- * @event pc-error — Emitted when the image couldn’t be loaded. This may be because of an invalid URL, a temporary network error or some other unknown cause.
- *
- * @slot icon — The default icon to use when no image or initials are present. Works best with `<pc-icon>`.
- *
- * @csspart base — The component’s base wrapper.
- * @csspart icon — The container that wraps the avatar’s icon.
- * @csspart initials — The container that wraps the avatar’s initials.
- * @csspart image — The avatar image. Only shown when the `image` attribute is set.
- *
- * @cssproperty --size — The size of the avatar.
- */
-let PcAvatar = class PcAvatar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.hasError = false;
-        /** The image source to use for the avatar. */
-        this.image = "";
-        /** A label to use to describe the avatar to assistive devices. */
-        this.label = "";
-        /** Initials to use as a fallback when no image is available (1–2 characters recommended). */
-        this.initials = "";
-        /** Indicates how the browser should load the image. */
-        this.loading = "eager";
-        /** The shape of the avatar. */
-        this.shape = "circle";
-    }
-    /** @internal This is an internal property. */
-    handleImageChange() {
-        this.hasError = false;
-    }
-    handleImageLoadError() {
-        this.hasError = true;
-        emit(this, "pc-error");
-    }
-    render() {
-        const avatarWithImage = html `
-            <img
-                class="image"
-                part="image"
-                src=${this.image}
-                loading=${this.loading}
-                alt=""
-                @error=${this.handleImageLoadError}
-            />
-        `;
-        let avatarWithoutImage = html ``;
-        if (this.initials) {
-            avatarWithoutImage = html `
-                <div class="initials">${this.initials}</div>
-            `;
-        }
-        else {
-            avatarWithoutImage = html `
-                <div class="icon" part="icon" aria-hidden="true">
-                    <slot name="icon">
-                        <pc-icon
-                            library="system"
-                            icon-style="solid"
-                            name="user"
-                        ></pc-icon>
-                    </slot>
-                </div>
-            `;
-        }
-        return html `
-            <div
-                part="base"
-                class=${classMap({
-            avatar: true,
-            circle: this.shape === "circle",
-            rounded: this.shape === "rounded",
-            square: this.shape === "square",
-        })}
-                role="img"
-                aria-label=${this.label}
-            >
-                ${this.image && !this.hasError
-            ? avatarWithImage
-            : avatarWithoutImage}
-            </div>
-        `;
-    }
-};
-PcAvatar.styles = styles;
-/** @internal This is an internal property. */
-PcAvatar.dependencies = { "pc-icon": PcIcon };
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], PcAvatar.prototype, "hasError", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], PcAvatar.prototype, "image", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], PcAvatar.prototype, "label", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], PcAvatar.prototype, "initials", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], PcAvatar.prototype, "loading", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], PcAvatar.prototype, "shape", void 0);
-__decorate([
-    watch("image"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PcAvatar.prototype, "handleImageChange", null);
-PcAvatar = __decorate([
-    customElement("pc-avatar")
-], PcAvatar);
-
-export { PcAvatar };

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

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

package/dist/components/avatar/avatar.styles.js

@@ -1,68 +0,0 @@
-import { css } from 'lit';
-
-const styles = css `
-    :host {
-        --size: 3rem;
-        display: inline-block;
-    }
-
-    .avatar {
-        display: inline-flex;
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        width: var(--size);
-        height: var(--size);
-        background-color: var(--pc-color-neutral-500);
-        color: var(--pc-color-neutral-0);
-        font-family: var(--pc-font-sans);
-        font-size: calc(var(--size) * 0.4);
-        font-weight: var(--pc-font-weight-bold);
-        user-select: none;
-        -webkit-user-select: none;
-        vertical-align: middle;
-        transition: all var(--pc-transition-fast) ease-in-out;
-    }
-
-    .circle,
-    .circle .image {
-        border-radius: var(--pc-border-radius-circle);
-    }
-
-    .rounded,
-    .rounded .image {
-        border-radius: var(--pc-border-radius-m);
-    }
-
-    .square {
-        border-radius: 0;
-    }
-
-    .icon {
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .initials {
-        line-height: 1;
-        text-transform: uppercase;
-    }
-
-    .image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        overflow: hidden;
-    }
-`;
-
-export { styles };

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

@@ -1,21 +0,0 @@
-import { LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @status experimental
- * @since 0.1.0
- *
- * @slot — The badge’s content.
- *
- * @csspart base — The component’s base wrapper.
- */
-export declare class PcBadge extends LitElement {
-    static styles: CSSResultGroup;
-    /** The badge’s appearance. */
-    appearance: "primary" | "success" | "neutral" | "warning" | "danger";
-    /** Gives the badge a rounded rectangle shape. */
-    rounded: boolean;
-    /** Makes the badge pulsate to draw attention. */
-    pulse: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/components/badge/badge.component.js

@@ -1,64 +0,0 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './badge.styles.js';
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @status experimental
- * @since 0.1.0
- *
- * @slot — The badge’s content.
- *
- * @csspart base — The component’s base wrapper.
- */
-let PcBadge = class PcBadge extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The badge’s appearance. */
-        this.appearance = "primary";
-        /** Gives the badge a rounded rectangle shape. */
-        this.rounded = false;
-        /** Makes the badge pulsate to draw attention. */
-        this.pulse = false;
-    }
-    render() {
-        return html `
-            <span
-                part="base"
-                class=${classMap({
-            "badge": true,
-            "badge-primary": this.appearance === "primary",
-            "badge-success": this.appearance === "success",
-            "badge-neutral": this.appearance === "neutral",
-            "badge-warning": this.appearance === "warning",
-            "badge-danger": this.appearance === "danger",
-            "badge-rounded": this.rounded === true,
-            "badge-pulse": this.pulse === true,
-        })}
-                role="status"
-            >
-                <slot></slot>
-            </span>
-        `;
-    }
-};
-PcBadge.styles = styles;
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], PcBadge.prototype, "appearance", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], PcBadge.prototype, "rounded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], PcBadge.prototype, "pulse", void 0);
-PcBadge = __decorate([
-    customElement("pc-badge")
-], PcBadge);
-
-export { PcBadge };

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

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

package/dist/components/badge/badge.styles.js

@@ -1,76 +0,0 @@
-import { css } from 'lit';
-
-const styles = css `
-    :host {
-        display: inline-flex;
-    }
-
-    .badge {
-        padding: var(--pc-spacing-xxxs) 0.625rem;
-        font-family: var(--pc-font-sans);
-        font-size: var(--pc-font-size-xs);
-        font-weight: var(--pc-font-weight-bold);
-        color: var(--pc-color-neutral-0);
-        border: 1px solid transparent;
-        border-radius: var(--pc-border-radius-pill);
-        user-select: none;
-        -webkit-user-select: none;
-        cursor: inherit;
-        transition: all var(--pc-transition-fast) ease-in-out;
-    }
-
-    .badge,
-    .badge-primary {
-        --pulse-color: var(--pc-color-primary-600);
-        background-color: var(--pc-color-primary-500);
-        border: 1px solid var(--pc-color-primary-400);
-    }
-
-    .badge.badge-success {
-        --pulse-color: var(--pc-color-success-600);
-        background-color: var(--pc-color-success-500);
-        border: 1px solid var(--pc-color-success-400);
-    }
-
-    .badge.badge-neutral {
-        --pulse-color: var(--pc-color-neutral-600);
-        background-color: var(--pc-color-neutral-500);
-        border: 1px solid var(--pc-color-neutral-400);
-    }
-
-    .badge.badge-warning {
-        --pulse-color: var(--pc-color-warning-600);
-        background-color: var(--pc-color-warning-500);
-        border: 1px solid var(--pc-color-warning-400);
-    }
-
-    .badge.badge-danger {
-        --pulse-color: var(--pc-color-danger-600);
-        background-color: var(--pc-color-danger-500);
-        border: 1px solid var(--pc-color-danger-400);
-    }
-
-    .badge-rounded {
-        border-radius: var(--pc-border-radius-s);
-    }
-
-    .badge-pulse {
-        animation: pulse 1.5s cubic-bezier(0, 0.55, 0.45, 1) infinite;
-    }
-
-    @keyframes pulse {
-        0% {
-            box-shadow: 0 0 0 0 var(--pulse-color);
-        }
-
-        70% {
-            box-shadow: 0 0 0 0.5rem transparent;
-        }
-
-        100% {
-            box-shadow: 0 0 0 0 transparent;
-        }
-    }
-`;
-
-export { styles };

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

@@ -1,104 +0,0 @@
-import { LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import { PcIcon } from "../icon/icon.js";
-/**
- * @summary Buttons represent actions that are available to the user.
- * @status experimental
- * @since 0.1.0
- *
- * @dependency pc-icon
- *
- * @slot — The button’s label.
- * @slot prefix — A presentational prefix icon or similar element.
- * @slot suffix — A presentational suffix icon or similar element.
- *
- * @event pc-focus — Emitted when the button gains focus.
- * @event pc-blur — Emitted when the button loses focus (i.e. is blurred).
- * @event pc-invalid — Emitted when the form control has been checked for validity and its constraints aren’t satisfied.
- *
- * @csspart base — The component’s base wrapper.
- * @csspart prefix — The container that wraps the prefix.
- * @csspart label — The button’s label.
- * @csspart suffix — The container that wraps the suffix.
- */
-export declare class PcButton extends LitElement {
-    static styles: CSSResultGroup;
-    /** @internal This is an internal property. */
-    static dependencies: {
-        "pc-icon": typeof PcIcon;
-    };
-    private readonly formControlController;
-    private readonly hasSlotController;
-    /** @internal This is an internal property. */
-    button: HTMLButtonElement | HTMLLinkElement;
-    private hasFocus;
-    /** @internal This is an internal property. */
-    invalid: boolean;
-    /** @internal This is an internal property. */
-    title: string;
-    /** The button’s appearance. */
-    appearance: "default" | "primary" | "success" | "warning" | "danger" | "text";
-    /** The button’s size. */
-    size: "small" | "medium" | "large";
-    /** Disables the button. */
-    disabled: boolean;
-    /** Draws an outlined button. */
-    outlined: boolean;
-    /** Draws a pill‐style button. */
-    pill: boolean;
-    /** The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form. */
-    type: "button" | "submit" | "reset";
-    /** The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. */
-    name: string;
-    /** The value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter. This attribute is ignored when the `href` attribute is present. */
-    value: string;
-    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-    href: string;
-    /** Tells the browser where to open the link. It should only be used when the `href` attribute is present. */
-    target?: "_blank" | "_parent" | "_self" | "_top";
-    /** When using the `href` attribute, this attribute will map to the underlying link’s `rel` attribute. Unlike regular links, the default set for this attribute is `noreferrer noopener` to prevent security exploits. However, if you’re using `target` to point to a specific tab or window, this will prevent that from working properly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively. */
-    rel: string;
-    /** Tells the browser to download the linked file as this file name. Only used when the `href` attribute is present. */
-    download?: string;
-    /** This is the “form owner” to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button. */
-    form?: string;
-    /** Used to override the form owner’s `action` attribute. */
-    formAction?: string;
-    /** Used to override the form owner’s `enctype` attribute. */
-    formEnctype?: "application/x-www-form-url-encoded" | "multipart/form-data" | "text/plain";
-    /** Used to override the form owner’s `method` attribute. */
-    formMethod?: "GET" | "POST";
-    /** Used to override the form owner’s `novalidate` attribute. */
-    formNoValidate?: boolean;
-    /** Used to override the form owner’s `target` attribute. */
-    formTarget?: "_self" | "_blank" | "_parent" | "_top" | string;
-    private direction;
-    /** Gets the validity state object. */
-    get validity(): ValidityState;
-    /** Gets the validation message. */
-    get validationMessage(): string;
-    firstUpdated(): void;
-    private handleClick;
-    private handleFocus;
-    private handleBlur;
-    private handleInvalid;
-    private isButton;
-    private isLink;
-    /** @internal This is an internal property. */
-    handleDisabledChange(): void;
-    /** Simulates a click on the button. */
-    click(): void;
-    /** Focuses the button. */
-    focus(options?: FocusOptions): void;
-    /** Unfocuses the button (i.e. blurs it). */
-    blur(): void;
-    /** Checks for validity but doesn’t show a validation message. Returns `true` when valid and `false` when invalid. */
-    checkValidity(): boolean;
-    /** Gets the associated form if one exists. */
-    getForm(): HTMLFormElement | null;
-    /** Checks for validity and shows the browser’s validation message if the control is invalid. */
-    reportValidity(): boolean;
-    /** Sets a custom validation message. Pass an empty string to restore validity. */
-    setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
-}