placer-toolkit 0.5.1

package/dist/components/animation/animation.component.js

@@ -0,0 +1,247 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { queryAsync, property, customElement } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import * as index from '../../animations/index.js';
+import { styles } from './animation.styles.js';
+import { easings } from '../../animations/easings/easings.js';
+
+/**
+ * @summary Animate elements declaratively with nearly 100 baked‐in presets, or roll your own with custom keyframes. These animations are powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+ * @status experimental
+ * @since 0.4.0
+ *
+ * @event pc-cancel — Emitted when the animation is cancelled.
+ * @event pc-finish — Emitted when the animation finishes.
+ * @event pc‐start — Emitted when the animation starts or restarts.
+ *
+ * @slot — The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<pc-animation>` elements.
+ */
+let PcAnimation = class PcAnimation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasStarted = false;
+        /** The name of the built‐in animation to use. For custom animations, use the `keyframes` prop. */
+        this.name = "none";
+        /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets cancelled. */
+        this.play = false;
+        /** The number of milliseconds to delay the start of the animation. */
+        this.delay = 0;
+        /** Determines the direction of playback as well as the behaviour when reaching the end of an iteration. Learn more about the CSS [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) property. */
+        this.direction = "normal";
+        /** The number of milliseconds each iteration of the animation takes to complete. */
+        this.duration = 1000;
+        /** The easing function to use for the animation. This can be an easing function name like `easeInSine` or a custom easing function like `cubic-bezier(0.12, 0, 0.39, 0)`. */
+        this.easing = "ease-in-out";
+        /** The number of milliseconds to delay after the active period of an animation sequence. */
+        this.endDelay = 0;
+        /** Sets how the animation applies styles to its target before and after its execution. */
+        this.fill = "auto";
+        /** The number of iterations to run before the animation completes. */
+        this.iterations = Infinity;
+        /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
+        this.iterationStart = 0;
+        /** Sets the animation’s playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation’s speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart. */
+        this.playbackRate = 1;
+        this.handleAnimationFinish = () => {
+            this.play = false;
+            this.hasStarted = false;
+            emit(this, "pc-finish");
+        };
+        this.handleAnimationCancel = () => {
+            this.play = false;
+            this.hasStarted = false;
+            emit(this, "pc-cancel");
+        };
+    }
+    /** Gets and sets the current animation time. */
+    get currentTime() {
+        return this.animation?.currentTime ?? 0;
+    }
+    set currentTime(time) {
+        if (this.animation) {
+            this.animation.currentTime = time;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.createAnimation();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyAnimation();
+    }
+    handleSlotChange() {
+        this.destroyAnimation();
+        this.createAnimation();
+    }
+    async createAnimation() {
+        const easing = easings[this.easing] ?? this.easing;
+        const keyframes = this.keyframes ??
+            index[this.name];
+        const slot = await this.defaultSlot;
+        const element = slot.assignedElements()[0];
+        if (!element || !keyframes) {
+            return false;
+        }
+        this.destroyAnimation();
+        this.animation = element.animate(keyframes, {
+            delay: this.delay,
+            direction: this.direction,
+            duration: this.duration,
+            easing,
+            endDelay: this.endDelay,
+            fill: this.fill,
+            iterationStart: this.iterationStart,
+            iterations: this.iterations,
+        });
+        this.animation.playbackRate = this.playbackRate;
+        this.animation.addEventListener("cancel", this.handleAnimationCancel);
+        this.animation.addEventListener("finish", this.handleAnimationFinish);
+        if (this.play) {
+            this.hasStarted = true;
+            emit(this, "pc-start");
+        }
+        else {
+            this.animation.pause();
+        }
+        return true;
+    }
+    destroyAnimation() {
+        if (this.animation) {
+            this.animation.cancel();
+            this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+            this.animation.removeEventListener("finish", this.handleAnimationFinish);
+            this.hasStarted = false;
+        }
+    }
+    /** @internal This is an internal property. */
+    handleAnimationChange() {
+        if (!this.hasUpdated) {
+            return;
+        }
+        this.createAnimation();
+    }
+    /** @internal This is an internal property. */
+    handlePlayChange() {
+        if (this.animation) {
+            if (this.play && !this.hasStarted) {
+                this.hasStarted = true;
+                emit(this, "pc-start");
+            }
+            if (this.play) {
+                this.animation.play();
+            }
+            else {
+                this.animation.pause();
+            }
+            return true;
+        }
+        return false;
+    }
+    /** @internal This is an internal property. */
+    handlePlaybackRateChange() {
+        if (this.animation) {
+            this.animation.playbackRate = this.playbackRate;
+        }
+    }
+    /** Clears all keyframes caused by this animation and aborts its playback. */
+    cancel() {
+        this.animation?.cancel();
+    }
+    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+    finish() {
+        this.animation?.finish();
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+};
+PcAnimation.styles = styles;
+__decorate([
+    queryAsync("slot"),
+    __metadata("design:type", Promise)
+], PcAnimation.prototype, "defaultSlot", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "play", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "delay", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcAnimation.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "duration", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "easing", void 0);
+__decorate([
+    property({ attribute: "end-delay", type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "endDelay", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcAnimation.prototype, "fill", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "iterations", void 0);
+__decorate([
+    property({ attribute: "iteration-start", type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "iterationStart", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], PcAnimation.prototype, "keyframes", void 0);
+__decorate([
+    property({ attribute: "playback-rate", type: Number }),
+    __metadata("design:type", Object)
+], PcAnimation.prototype, "playbackRate", void 0);
+__decorate([
+    watch([
+        "name",
+        "delay",
+        "direction",
+        "duration",
+        "easing",
+        "endDelay",
+        "fill",
+        "iterations",
+        "iterationsStart",
+        "keyframes",
+    ]),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcAnimation.prototype, "handleAnimationChange", null);
+__decorate([
+    watch("play"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcAnimation.prototype, "handlePlayChange", null);
+__decorate([
+    watch("playbackRate"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcAnimation.prototype, "handlePlaybackRateChange", null);
+PcAnimation = __decorate([
+    customElement("pc-animation")
+], PcAnimation);
+
+export { PcAnimation };

package/dist/components/animation/animation.d.ts

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

package/dist/components/animation/animation.js

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

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

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

package/dist/components/animation/animation.styles.js

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: contents;
+    }
+`;
+
+export { styles };

package/dist/components/animation/animations.d.ts

@@ -0,0 +1,4 @@
+import * as animations from "../../animations/index.js";
+export { animations };
+export declare function getAnimationNames(): string[];
+export declare function getEasingNames(): string[];

package/dist/components/animation/animations.js

@@ -0,0 +1,13 @@
+import * as index from '../../animations/index.js';
+import { easings } from '../../animations/easings/easings.js';
+
+function getAnimationNames() {
+    return Object.entries(index)
+        .filter(([name]) => name !== "easings")
+        .map(([name]) => name);
+}
+function getEasingNames() {
+    return Object.entries(easings).map(([name]) => name);
+}
+
+export { index as animations, getAnimationNames, getEasingNames };

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

@@ -0,0 +1,43 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.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.
+ */
+export declare class PcAvatar extends LitElement {
+    static styles: CSSResultGroup;
+    /** @internal This is an internal property. */
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    private hasError;
+    /** The image source to use for the avatar. */
+    image: string;
+    /** A label to use to describe the avatar to assistive devices. */
+    label: string;
+    /** Initials to use as a fallback when no image is available (1–2 characters recommended). */
+    initials: string;
+    /** Indicates how the browser should load the image. */
+    loading: "eager" | "lazy";
+    /** The shape of the avatar. */
+    shape: "circle" | "rounded" | "square";
+    /** @internal This is an internal property. */
+    handleImageChange(): void;
+    private handleImageLoadError;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,137 @@
+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.d.ts

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

package/dist/components/avatar/avatar.js

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

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

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

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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,64 @@
+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.d.ts

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

package/dist/components/badge/badge.js

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

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

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