@blueprintui/cli 0.0.6 → 0.0.9

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control/element.js

@@ -0,0 +1,187 @@
+import { __decorate } from "tslib";
+import { ContextConsumer } from '@lit-labs/context';
+import { html, LitElement } from 'lit';
+import { baseStyles, interactionResponsive, calculateOptimalLayout, syncUpdatedProps, attachInternals, stateControl, associateAriaDescribedBy } from '@blueprintui/components/internals';
+import { syncHTML5Validation } from '../utils/validate.js';
+import { associateInputToDatalist, formLayouts, defaultFormLayout, getStatusIcon, associateInputAndLabel, defaultControlWidth, setupControlMessageStatusUpdates } from '../utils/utils.js';
+import { controlGroupContext, formContext } from '../utils/context.js';
+import styles from './element.css' assert { type: 'css' };
+export var ControlLabelLayout;
+(function (ControlLabelLayout) {
+    ControlLabelLayout["default"] = "default";
+    ControlLabelLayout["ariaLabel"] = "aria-label";
+    ControlLabelLayout["inputGroup"] = "input-group";
+})(ControlLabelLayout || (ControlLabelLayout = {}));
+/**
+ * Generic Control
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>control</label>
+ *   <input type="text" />
+ * </bp-control>
+ * ```
+ * @element bp-control
+ * @slot
+ * @cssprop --background
+ */
+let BpControl = class BpControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** forms automatically collapse to layout that prevents overflow */
+        this.responsive = true;
+        /** default full width or the browser default width */
+        this.controlWidth = defaultControlWidth;
+        /** @private */
+        this.labelLayout = ControlLabelLayout.default;
+    }
+    /**
+     * @property
+     * @type { 'vertical' | 'horizontal' | 'compact' }
+     */
+    get layout() {
+        return this.#layout;
+    }
+    set layout(value) {
+        this.#layout = value ? value.replace('-inline', '') : defaultFormLayout; // auto convert any form-layouts from parent groups
+        this.setAttribute('layout', this.#layout);
+        this.requestUpdate('layout');
+        if (!this.#initialLayout) {
+            this.#initialLayout = this.#layout;
+        }
+    }
+    static get properties() {
+        return {
+            layout: { type: String, reflect: true },
+            responsive: { type: Boolean, reflect: true },
+            controlWidth: { type: String, reflect: true, attribute: 'control-width' },
+            labelLayout: { state: true }
+        };
+    }
+    #layout = defaultFormLayout;
+    #initialLayout;
+    /** @private */
+    get controlLabel() {
+        return this.renderRoot?.querySelector("bp-internal-control-label[action=primary]") ?? null;
+    }
+    get inputContainer() {
+        return this.renderRoot?.querySelector(".input-container") ?? null;
+    }
+    /** @private */
+    get inputControl() {
+        return this.querySelector('input, select, textarea, [bp-control]');
+    }
+    get #label() {
+        return this.querySelector('label');
+    }
+    get #datalist() {
+        return this.querySelector('datalist');
+    }
+    get messages() {
+        return this.querySelectorAll('bp-control-message');
+    }
+    static styles = [baseStyles, styles];
+    render() {
+        return html `
+      <div class="private-host ${this.layout}">
+        ${this.labelLayout === ControlLabelLayout.default ? html `
+        <div class="input-label-container">
+          <bp-internal-control-label>
+            <slot name="label"></slot>
+          </bp-internal-control-label>
+        </div>` : ''}
+        <div class="input-message-container">
+          <div class="input-status-icon-container">
+            <div class="input-container">
+              ${this.prefixTemplate}
+              <slot name="prefix"></slot>
+              ${this.inputTemplate}
+              <slot name="input"></slot>
+              <slot name="suffix"></slot>
+              ${this.suffixTemplate}
+            </div>
+            ${getStatusIcon()}
+          </div>
+          ${this.messages?.length ? html `<slot name="message"></slot>` : ''}
+          ${this.#datalist ? html `<slot name="datalist"></slot>` : ''}
+        </div>
+      </div>
+    `;
+    }
+    get inputTemplate() {
+        return html ``;
+    }
+    get prefixTemplate() {
+        return null;
+    }
+    get suffixTemplate() {
+        return null;
+    }
+    formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
+    controlGroupContext = new ContextConsumer(this, controlGroupContext, (value) => syncUpdatedProps(this, value), true);
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('bp-control', '');
+        attachInternals(this);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.inputControl.slot = 'input';
+        this.#label ? this.#label.slot = 'label' : null;
+        this.#datalist ? this.#datalist.slot = 'datalist' : null;
+        this.#setupResponsive();
+        this.#setupLabelLayout();
+        setupControlMessageStatusUpdates(Array.from(this.messages), this);
+        syncHTML5Validation(this, Array.from(this.messages));
+        this.shadowRoot.addEventListener('slotchange', (e) => {
+            const slotName = e.target.name;
+            if (slotName === 'label') {
+                associateInputAndLabel(this.inputControl, this.#label);
+            }
+            else if (slotName === 'datalist') {
+                associateInputToDatalist(this.inputControl, this.#datalist);
+            }
+            else if (slotName === 'message') {
+                associateAriaDescribedBy(this.inputControl, Array.from(this.messages));
+            }
+        });
+    }
+    /** @private */
+    get layoutStable() {
+        const messageBelowInput = this.shadowRoot.querySelector('.messages')?.getBoundingClientRect().top > this.inputContainer?.getBoundingClientRect().top;
+        const inputBelowLabel = this.inputContainer?.getBoundingClientRect().top > this.controlLabel?.getBoundingClientRect().top;
+        if (this.layout === 'compact' && messageBelowInput) {
+            return false;
+        }
+        if ((this.layout === 'compact' || this.layout === 'horizontal') && inputBelowLabel) {
+            return false;
+        }
+        return true;
+    }
+    #setupResponsive() {
+        if (this.responsive && this.labelLayout === ControlLabelLayout.default) {
+            this.addEventListener('bpResizeChange', () => {
+                calculateOptimalLayout(this, { layouts: formLayouts, initialLayout: this.#initialLayout }).then(updated => {
+                    if (updated) {
+                        this.dispatchEvent(new CustomEvent('layoutChange', { bubbles: true, detail: this.layout }));
+                    }
+                });
+            });
+        }
+    }
+    #setupLabelLayout() {
+        const hasAriaLabelType = this.inputControl.ariaLabel || this.inputControl.hasAttribute('aria-labelledby');
+        if (hasAriaLabelType && this.labelLayout !== ControlLabelLayout.inputGroup) {
+            this.labelLayout = ControlLabelLayout.ariaLabel;
+        }
+    }
+};
+BpControl = __decorate([
+    stateControl(),
+    interactionResponsive()
+], BpControl);
+export { BpControl };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-group/element.d.ts

@@ -0,0 +1,56 @@
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { LitElement, PropertyValues } from 'lit';
+import { BpControl } from '../control/element.js';
+import { FormLayout, ControlWidth } from '../utils/interfaces.js';
+import { BpInternalControlLabel } from '../control-label/element.js';
+/**
+ * Internal Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-group>
+ *   <label>...</label>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ * </bp-internal-control-group>
+ * ```
+ *
+ * @element bp-internal-control-group
+ * @property layoutChange
+ * @slot - For projecting control group
+ */
+export declare class BpInternalControlGroup extends LitElement {
+    #private;
+    /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+    layout: FormLayout;
+    /** Adjust the control from the default full width or the browser default width */
+    controlWidth: ControlWidth;
+    responsive: boolean;
+    protected get controls(): NodeListOf<BpControl>;
+    /** @private */
+    controlLabel: BpInternalControlLabel;
+    protected formContext: ContextConsumer<{
+        __context__: import("../utils/context.js").FormContext;
+    }, this>;
+    protected controlGroupContext: ContextProvider<{
+        __context__: import("../utils/context.js").FormContext;
+    }>;
+    protected isInlineControlGroup: boolean;
+    /** @private */
+    _internals: ElementInternals;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<any>): void;
+    get layoutStable(): boolean;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-group/element.js

@@ -0,0 +1,135 @@
+import { __decorate } from "tslib";
+import { ContextConsumer, ContextProvider } from '@lit-labs/context';
+import { html, LitElement } from 'lit';
+import { baseStyles, calculateOptimalLayout, interactionResponsive, createId, syncUpdatedProps, associateAriaDescribedBy } from '@blueprintui/components/internals';
+import { getStatusIcon, formLayouts, defaultFormLayout, inlineControlListIsWrapped, setupControlMessageStatusUpdates } from '../utils/utils.js';
+import { controlGroupContext, formContext } from '../utils/context.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Internal Control Group
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-group>
+ *   <label>...</label>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ *   <bp-control>
+ *     <label></label>
+ *     <input ... />
+ *   </bp-control>
+ * </bp-internal-control-group>
+ * ```
+ *
+ * @element bp-internal-control-group
+ * @property layoutChange
+ * @slot - For projecting control group
+ */
+let BpInternalControlGroup = class BpInternalControlGroup extends LitElement {
+    static properties = {
+        layout: { type: String, reflect: true },
+        controlWidth: { type: String, reflect: true, attribute: 'control-width' },
+        responsive: { type: Boolean, reflect: true }
+    };
+    constructor() {
+        super(...arguments);
+        /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+        this.layout = defaultFormLayout;
+        this.responsive = true;
+    }
+    get controls() {
+        return this.querySelectorAll('bp-control, [bp-control]');
+    }
+    get #label() {
+        return this.querySelector('label');
+    }
+    get #messages() {
+        return this.querySelectorAll('bp-control-message');
+    }
+    /** @private */
+    get controlLabel() {
+        return this.__controlLabel ??= this.renderRoot?.querySelector("bp-internal-control-label[action=primary]") ?? null;
+    }
+    formContext = new ContextConsumer(this, formContext, (value) => syncUpdatedProps(this, value), true);
+    controlGroupContext = new ContextProvider(this, controlGroupContext, {});
+    isInlineControlGroup = false;
+    /** @private */
+    _internals = this.attachInternals();
+    static styles = [baseStyles, styles];
+    render() {
+        return html `
+      <div class="private-host ${this.isInlineControlGroup ? 'inline-control-group' : ''}">
+        <div class="control-label-container">
+          <bp-internal-control-label action="primary">
+            <slot name="label"></slot>
+          </bp-internal-control-label>
+        </div>
+        <div class="control-message-container">
+          <div class="input-container">
+            <div class="controls">
+              <slot></slot>
+            </div>
+          </div>
+          <div ?hidden=${this.#messages.length === 0} class="messages-container">
+            ${getStatusIcon()}
+            <div class="messages">
+              <slot name="message" @slotchange=${() => associateAriaDescribedBy(this, Array.from(this.#messages))}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._internals.role = 'group';
+        this.setAttribute('bp-control-group', '');
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.#label ? this.#label.slot = 'label' : null;
+        this.#associateLabelAndGroup();
+        this.#setupResponsive();
+        setupControlMessageStatusUpdates(Array.from(this.#messages), this);
+    }
+    updated(props) {
+        super.updated(props);
+        this.controlGroupContext.setValue({ layout: this.layout, responsive: this.responsive, controlWidth: this.controlWidth });
+    }
+    get layoutStable() {
+        const messageBelowInput = this.shadowRoot.querySelector('.messages-container')?.getBoundingClientRect().top > this.shadowRoot.querySelector('.controls').getBoundingClientRect().top;
+        const inputBelowLabel = this.shadowRoot.querySelector('.controls').getBoundingClientRect().top > this.controlLabel?.getBoundingClientRect().top + 12;
+        if (this.layout === 'compact' && (messageBelowInput || inputBelowLabel)) {
+            return false;
+        }
+        if (this.layout === 'horizontal-inline' && inlineControlListIsWrapped(Array.from(this.controls), this.layout)) {
+            return false;
+        }
+        if (this.layout === 'horizontal' && inputBelowLabel) {
+            return false;
+        }
+        if (this.layout === 'vertical-inline' && inlineControlListIsWrapped(Array.from(this.controls), this.layout)) {
+            return false;
+        }
+        return true;
+    }
+    #associateLabelAndGroup() {
+        this.#label.id = this.#label.id?.length ? this.#label.id : createId();
+        this.setAttribute('aria-labelledby', this.#label.id);
+    }
+    #setupResponsive() {
+        if (this.responsive) {
+            const layoutConfig = { layouts: formLayouts, initialLayout: this.layout };
+            this.addEventListener('bpResizeChange', () => calculateOptimalLayout(this, layoutConfig).then(() => this.dispatchEvent(new CustomEvent('layoutChange', { bubbles: true, detail: this.layout }))));
+        }
+    }
+};
+BpInternalControlGroup = __decorate([
+    interactionResponsive()
+], BpInternalControlGroup);
+export { BpInternalControlGroup };

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-inline/element.d.ts

@@ -0,0 +1,22 @@
+import { BpControl } from '../control/element.js';
+/**
+ * Internal Control Inline
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-inline>
+ *   <label>inline</label>
+ *   <input type="radio" />
+ * </bp-internal-control-inline>
+ * ```
+ * @element bp-internal-control-inline
+ * @event checkedChange
+ * @slot - For projecting inline input and label
+ */
+export declare class BpInternalControlInline extends BpControl {
+    static get styles(): CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-inline/element.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import { BpControl, ControlLabelLayout } from '../control/element.js';
+import { getStatusIcon } from '../utils/utils.js';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Internal Control Inline
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-inline>
+ *   <label>inline</label>
+ *   <input type="radio" />
+ * </bp-internal-control-inline>
+ * ```
+ * @element bp-internal-control-inline
+ * @event checkedChange
+ * @slot - For projecting inline input and label
+ */
+export class BpInternalControlInline extends BpControl {
+    static get styles() {
+        return [...super.styles, styles];
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <div class="control-inline-label-container">
+          <slot name="input"></slot>
+          ${this.labelLayout !== ControlLabelLayout.ariaLabel ? html `
+          <bp-internal-control-label action="secondary">
+            <slot name="label"></slot>
+          </bp-internal-control-label>` : ''}
+        </div>
+        ${this.messages?.length ? html `
+        <div class="control-inline-messages-container">
+          ${getStatusIcon()}
+          <slot name="message"></slot>
+        </div>` : ''}
+      </div>
+    `;
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-label/element.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * Label
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-label status="primary | secondary">
+ *   <label>...</label>
+ * </bp-internal-control-label>
+ * ```
+ *
+ * @element bp-internal-control-label
+ * @slot - For projecting label text
+ * @cssprop --label-width
+ */
+export declare class BpInternalControlLabel extends LitElement {
+    action: 'primary' | 'secondary';
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-label/element.js

@@ -0,0 +1,42 @@
+import { html, LitElement } from 'lit';
+import { baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Label
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-internal-control-label status="primary | secondary">
+ *   <label>...</label>
+ * </bp-internal-control-label>
+ * ```
+ *
+ * @element bp-internal-control-label
+ * @slot - For projecting label text
+ * @cssprop --label-width
+ */
+export class BpInternalControlLabel extends LitElement {
+    static properties = {
+        action: { type: String, reflect: true }
+    };
+    static styles = [baseStyles, styles];
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        this.action = 'primary';
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-message/element.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-control-message>helper text</bp-control-message>
+ * </bp-control>
+ * ```
+ *
+ * @element bp-control-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export declare class BpControlMessage extends LitElement {
+    /** Set the status of form control message validation */
+    status: 'neutral' | 'error' | 'success';
+    /** HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
+    error: keyof ValidityState;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/control-message/element.js

@@ -0,0 +1,50 @@
+import { html, LitElement } from 'lit';
+import { baseStyles } from '@blueprintui/components/internals';
+import styles from './element.css' assert { type: 'css' };
+/**
+ * Control Message
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-control>
+ *   <label>Test</label>
+ *   <input type="text" />
+ *   <bp-control-message>helper text</bp-control-message>
+ * </bp-control>
+ * ```
+ *
+ * @element bp-control-message
+ * @slot - For projecting helper message text
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --max-width
+ * @cssprop --min-width
+ */
+export class BpControlMessage extends LitElement {
+    static properties = {
+        status: { type: String },
+        error: { type: String, reflect: true }
+    };
+    static styles = [baseStyles, styles];
+    //__BLANK_LINE_PLACEHOLDER_G1JVXUEBNCL6YN5NFE13MD1PT3H9OIHB__
+    constructor() {
+        super();
+        /** Set the status of form control message validation */
+        this.status = 'neutral';
+    }
+    render() {
+        return html `
+      <div class="private-host">
+        <slot></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'message';
+    }
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprintui/components/dist/lib/forms/form-group/element.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, PropertyValues } from 'lit';
+import { FormLayout, ControlWidth } from '../utils/interfaces.js';
+/**
+ * Form
+ *
+ * ```typescript
+ * import '@blueprintui/components/include/forms.js';
+ * ```
+ *
+ * ```html
+ * <bp-form-group layout="horizontal">
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ *
+ *   <bp-input>
+ *     <label>Test</label>
+ *     <input type="text" />
+ *   </bp-input>
+ * </bp-form-group>
+ * ```
+ *
+ * @element bp-form-group
+ * @slot - For projecting input controls
+ * @cssprop --label-width
+ */
+export declare class BpFormGroup extends LitElement {
+    #private;
+    /** @type {horizontal | horizontal-inline | vertical | vertical-inline | compact} */
+    layout: FormLayout;
+    controlWidth: ControlWidth;
+    responsive: boolean;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}