@flitsmeister/design-system 2.2.36 → 3.0.0

package/dist/fm-input/fm-input.js

@@ -0,0 +1,343 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var FmInput_1;
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FmIcon } from '../fm-icon/fm-icon.js';
+import '../fm-icon/icons/bold-check.js';
+import '../fm-icon/icons/bold-warning.js';
+import '../fm-icon/icons/bold-spinner.js';
+import { fmInputStyle } from './fm-input.style.js';
+if (!customElements.get('fm-icon')) {
+    customElements.define('fm-icon', FmIcon);
+}
+/**
+ * Flitsmeister input web component. Text input with floating label and optional validation.
+ * Bij validatie toont het component standaard een primary check bij succes en een danger
+ * uitroepteken (warning) bij fout; geen icon hoeft te worden meegegeven.
+ *
+ * @element fm-input
+ *
+ * @fires fm-input - Fired when the value changes. Detail: `{ value: string }`.
+ * @fires fm-focus - Fired when the input receives focus. Detail: `{ originalEvent: FocusEvent }`.
+ * @fires fm-blur - Fired when the input loses focus. Detail: `{ originalEvent: FocusEvent }`.
+ *
+ * @csspart error-message - Validation error message.
+ *
+ * @example
+ * ```html
+ * <fm-input placeholder="Email" type="email"></fm-input>
+ * ```
+ *
+ * @example
+ * Controlled with validation:
+ * ```html
+ * <fm-input
+ *   .value=${this.email}
+ *   @fm-input=${(e: CustomEvent<{ value: string }>) => { this.email = e.detail.value; }}
+ *   .rules=${[(v) => (!v ? 'Required' : undefined)]}
+ *   placeholder="Email"
+ * ></fm-input>
+ * ```
+ */
+let FmInput = class FmInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Input type: 'text' | 'search' | 'email' | 'number' | 'password' | 'tel'. Default `'text'`. */
+        this.type = 'text';
+        /** Floating label text. */
+        this.placeholder = '';
+        /** Current value (controlled). */
+        this.value = '';
+        /** Validation rules: array of functions (value) => error string | undefined. */
+        this.rules = [];
+        /** Disabled state. */
+        this.disabled = false;
+        /** Read-only state. */
+        this.readonly = false;
+        /** Loading state: shows spinner and neutral border. */
+        this.loading = false;
+        /** Gray border in default state (not hover, not focused). */
+        this.grayBorder = false;
+        /** Max length. Omit or 0 for no limit. */
+        this.maxLength = null;
+        /** Letter spacing in em units. */
+        this.letterSpacing = 0;
+        /** Autocomplete attribute. */
+        this.autocomplete = '';
+        /** Extra CSS classes on the wrapper. */
+        this.customClass = '';
+        /** Extra CSS classes on the input. */
+        this.inputClass = '';
+        this.errorMessage = '';
+        this.statusIcon = '';
+        this.displayedIcon = '';
+        this.displayedLoading = false;
+        this.loadingIconEntering = false;
+        this.iconClass = 'icon-default';
+        this.isFocused = false;
+        this.iconLeaveTimeout = null;
+        this.loadingLeaveTimeout = null;
+        this.loadingEnterRaf = null;
+    }
+    static { FmInput_1 = this; }
+    static { this.ICON_TRANSITION_MS = 350; }
+    get inputStateClass() {
+        return this.errorMessage && !this.isFocused ? 'input--danger' : '';
+    }
+    get labelFilledClass() {
+        return this.value && String(this.value).length > 0 ? 'label-filled' : '';
+    }
+    /** Run validation and update error state. Call from host if needed after external value change. */
+    validate() {
+        this.runValidation(this.value);
+    }
+    handleInput(e) {
+        const target = e.target;
+        const value = target.value;
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('fm-input', {
+            detail: { value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleFocus(e) {
+        this.isFocused = true;
+        this.iconClass = 'icon-default';
+        this.statusIcon = '';
+        this.dispatchEvent(new CustomEvent('fm-focus', {
+            detail: { originalEvent: e },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleBlur(e) {
+        this.isFocused = false;
+        this.runValidation(this.value);
+        this.dispatchEvent(new CustomEvent('fm-blur', {
+            detail: { originalEvent: e },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    runValidation(value) {
+        const str = value != null ? String(value) : '';
+        for (const rule of this.rules) {
+            const error = rule(str);
+            if (error) {
+                this.errorMessage = error;
+                this.iconClass = 'icon-danger';
+                this.statusIcon = 'warning';
+                return;
+            }
+        }
+        this.errorMessage = '';
+        if (this.rules.length > 0 && str.length > 0) {
+            this.iconClass = 'icon-success';
+            this.statusIcon = 'check';
+        }
+        else {
+            this.statusIcon = '';
+            this.iconClass = 'icon-default';
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value && this.value.length > 0 && !this.isFocused) {
+            this.runValidation(this.value);
+        }
+    }
+    willUpdate(changed) {
+        if (changed.has('value') && !this.isFocused && this.value?.length > 0) {
+            this.runValidation(this.value);
+        }
+        if (changed.has('statusIcon')) {
+            if (this.statusIcon) {
+                if (this.iconLeaveTimeout) {
+                    clearTimeout(this.iconLeaveTimeout);
+                    this.iconLeaveTimeout = null;
+                }
+                this.displayedIcon = this.statusIcon;
+            }
+            else {
+                this.iconLeaveTimeout = setTimeout(() => {
+                    this.displayedIcon = '';
+                    this.iconLeaveTimeout = null;
+                }, FmInput_1.ICON_TRANSITION_MS);
+            }
+        }
+        if (changed.has('loading')) {
+            if (this.loading) {
+                if (this.loadingLeaveTimeout) {
+                    clearTimeout(this.loadingLeaveTimeout);
+                    this.loadingLeaveTimeout = null;
+                }
+                this.displayedLoading = true;
+                this.loadingIconEntering = true;
+            }
+            else {
+                this.loadingLeaveTimeout = setTimeout(() => {
+                    this.displayedLoading = false;
+                    this.loadingLeaveTimeout = null;
+                }, FmInput_1.ICON_TRANSITION_MS);
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('loading') && this.loading && this.loadingIconEntering) {
+            this.loadingEnterRaf = requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.loadingIconEntering = false;
+                    this.loadingEnterRaf = null;
+                });
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.iconLeaveTimeout) {
+            clearTimeout(this.iconLeaveTimeout);
+            this.iconLeaveTimeout = null;
+        }
+        if (this.loadingLeaveTimeout) {
+            clearTimeout(this.loadingLeaveTimeout);
+            this.loadingLeaveTimeout = null;
+        }
+        if (this.loadingEnterRaf != null) {
+            cancelAnimationFrame(this.loadingEnterRaf);
+            this.loadingEnterRaf = null;
+        }
+    }
+    render() {
+        const inputClasses = [
+            'input',
+            'fmx-input-border',
+            'fmx-input-autofill',
+            this.placeholder ? 'input--with-placeholder' : 'input--no-placeholder',
+            this.inputStateClass,
+            this.loading ? 'input--loading' : '',
+            this.grayBorder ? 'input--gray-border' : '',
+            this.inputClass
+        ].filter(Boolean).join(' ');
+        const labelClasses = [
+            'label',
+            'label-text',
+            this.labelFilledClass
+        ].filter(Boolean).join(' ');
+        return html `
+      <div
+        class="inputgroup w-full mb-6 ${this.customClass} ${this.isFocused ? 'inputgroup--focused' : ''}"
+        data-inputgroup-type=${this.type}
+      >
+        <div class="relative">
+          <input
+            type=${this.type}
+            .value=${this.value}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            maxlength=${this.maxLength ?? undefined}
+            autocomplete=${this.autocomplete}
+            class=${inputClasses}
+            style="letter-spacing: ${this.letterSpacing}em;"
+          />
+          ${this.placeholder
+            ? html `<label class=${labelClasses}>${this.placeholder}</label>`
+            : ''}
+          <span
+            class="iconwrapper icon icon-scale-enter-active icon-scale-leave-active ${this.displayedLoading ? `icon-loading ${this.loadingIconEntering ? 'icon-scale-enter-from icon-scale-leave-to' : this.loading ? 'icon-scale-enter-to icon-scale-leave-from' : 'icon-scale-leave-to icon-scale-enter-from'}` : `${this.iconClass} ${this.statusIcon ? 'icon-scale-enter-to icon-scale-leave-from' : 'icon-scale-enter-from icon-scale-leave-to'}`}"
+          >
+            ${this.displayedLoading
+            ? html `<fm-icon name="spinner" variant="bold" size="sm"></fm-icon>`
+            : this.displayedIcon
+                ? html `
+                    <fm-icon
+                      name=${this.displayedIcon}
+                      variant="bold"
+                      size="sm"
+                      color=${this.displayedIcon === 'warning' ? 'danger' : 'primary'}
+                    ></fm-icon>
+                  `
+                : ''}
+          </span>
+        </div>
+        ${this.errorMessage && !this.isFocused
+            ? html `<p class="error-message" part="error-message">${this.errorMessage}</p>`
+            : ''}
+      </div>
+    `;
+    }
+    static { this.styles = [fmInputStyle]; }
+};
+__decorate([
+    property({ type: String })
+], FmInput.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], FmInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], FmInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FmInput.prototype, "rules", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmInput.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'gray-border', reflect: true })
+], FmInput.prototype, "grayBorder", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-length' })
+], FmInput.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'letter-spacing' })
+], FmInput.prototype, "letterSpacing", void 0);
+__decorate([
+    property({ type: String })
+], FmInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String, attribute: 'custom-class' })
+], FmInput.prototype, "customClass", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-class' })
+], FmInput.prototype, "inputClass", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "statusIcon", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "displayedIcon", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "displayedLoading", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "loadingIconEntering", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "iconClass", void 0);
+__decorate([
+    state()
+], FmInput.prototype, "isFocused", void 0);
+FmInput = FmInput_1 = __decorate([
+    customElement('fm-input')
+], FmInput);
+export { FmInput };
+//# sourceMappingURL=fm-input.js.map

package/dist/fm-input/fm-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-input.js","sourceRoot":"","sources":["../../src/fm-input/fm-input.ts"],"names":[],"mappings":"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"}

package/dist/fm-input/fm-input.style.d.ts

@@ -0,0 +1,2 @@
+export declare const fmInputStyle: import("lit").CSSResult;
+//# sourceMappingURL=fm-input.style.d.ts.map

package/dist/fm-input/fm-input.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-input.style.d.ts","sourceRoot":"","sources":["../../src/fm-input/fm-input.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA0NxB,CAAC"}

package/dist/fm-input/fm-input.style.js

@@ -0,0 +1,221 @@
+import { css } from "lit";
+export const fmInputStyle = css `
+  :host {
+    display: block;
+    min-width: 100px;
+  }
+
+  .inputgroup {
+    min-width: 100px;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .input {
+    width: 100%;
+    height: var(--button-height-lg);
+    font-size: var(--font-size-lg);
+    background: var(--color-surface-neutral-default-highest);
+    color: var(--color-content-neutral-default);
+    border: var(--stroke-sm) solid transparent;
+    border-radius: var(--radius-md);
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-xl);
+    transition:
+      border-color 0.3s ease,
+      padding 0.3s ease;
+    outline: none;
+    box-sizing: border-box;
+    font-family: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .input:focus {
+    border-color: var(--color-outline-brand-brand);
+    text-overflow: clip;
+  }
+
+  .input:hover:not(:focus):not(:disabled):not(:read-only){
+  border-color: var(--color-outline-brand-brand);
+}
+  .input.input--danger {
+    border-color: var(--color-outline-functional-danger);
+  }
+
+  .input.input--loading {
+    border-color: color-mix(
+      in srgb,
+      var(--color-content-neutral-default-alt) 20%,
+      transparent
+    );
+  }
+
+  .input.input--gray-border:not(:focus):not(:hover):not(.input--danger) {
+    border-color: var(--color-outline-neutral-default);
+  }
+
+
+
+  .input.fmx-input-autofill:-webkit-autofill,
+  .input.fmx-input-autofill:autofill {
+    color: var(--color-content-neutral-default) !important;
+    -webkit-text-fill-color: var(
+      --color-content-neutral-default
+    ) !important;
+  }
+
+  .label {
+    position: absolute;
+    top: 50%;
+    left: var(--spacing-md);
+    color: var(--color-content-neutral-default-alt);
+    transition: all 0.2s ease;
+    transform-origin: left;
+    transform: translateY(-50%);
+    font-weight: var(--font-weight-medium);
+    pointer-events: none;
+  }
+
+  .input--with-placeholder {
+    padding-top: var(--spacing-md);
+    padding-left: 14px;
+  }
+
+  .input--no-placeholder {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .label-text {
+    font-size: var(--text-lg);
+  }
+
+  .inputgroup--focused .label,
+  .label-filled {
+    top: var(--spacing-sm);
+    left: var(--spacing-md);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-bold);
+    transform: translateY(0);
+  }
+
+  .inputgroup .fmx-input-autofill:-webkit-autofill,
+  .inputgroup .fmx-input-autofill:autofill {
+    padding-top: var(--spacing-md);
+    padding-bottom: var(--spacing-xxs);
+    font-size: var(--text-lg);
+  }
+
+  .iconwrapper {
+    position: absolute;
+    display: block;
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  .iconwrapper.icon-scale-enter-active,
+  .iconwrapper.icon-scale-leave-active {
+    transition: transform 0.3s cubic-bezier(0.66, -0.22, 0.28, 1.18);
+    transform-origin: 100% 0;
+  }
+
+  .iconwrapper.icon-scale-enter-from,
+  .iconwrapper.icon-scale-leave-to {
+    transform: scale(0) translateY(-50%);
+    pointer-events: none;
+  }
+
+  .iconwrapper.icon-scale-enter-to,
+  .iconwrapper.icon-scale-leave-from {
+    transform: scale(1) translateY(-50%);
+  }
+
+  .iconwrapper svg,
+  .iconwrapper fm-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon {
+    right: var(--spacing-xs);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .icon-default {
+    color: currentColor;
+  }
+
+  .icon-danger {
+    color: var(--color-content-functional-danger);
+  }
+
+  .icon-success {
+    color: var(--color-content-brand-brand);
+  }
+
+  .iconwrapper.icon-loading {
+    color: var(--color-content-neutral-default-alt);
+  }
+
+  .iconwrapper.icon-loading fm-icon {
+    animation: fm-input-spinner-rotate 0.8s linear infinite;
+  }
+
+  @keyframes fm-input-spinner-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .error-message {
+    color: var(--color-content-functional-danger);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-bold);
+    margin-top: var(--spacing-xxs);
+    margin-bottom: var(--spacing-none);
+  }
+
+  .input[type="number"]::-webkit-inner-spin-button,
+  .input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: var(--spacing-none);
+  }
+  .input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .input[type="search"]::-webkit-search-cancel-button,
+  .input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+
+  .input:disabled {
+  cursor: not-allowed;
+  background: var(--color-surface-neutral-default); /* of een donkerdere token */
+  border-color: var(--color-outline-neutral-default);
+  color: var(--color-content-neutral-default-alt);
+}
+
+.input:read-only {
+  cursor: default;
+}
+
+.input:focus:disabled,
+.input:focus:read-only {
+  border-color: var(--color-outline-neutral-default); 
+}
+
+`;
+//# sourceMappingURL=fm-input.style.js.map

package/dist/fm-input/fm-input.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-input.style.js","sourceRoot":"","sources":["../../src/fm-input/fm-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0N9B,CAAC"}

package/dist/fm-radio-input/fm-radio-input.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * Flitsmeister radio-card web component. Wraps a native radio input with label,
+ * media and description slots.
+ *
+ * @element fm-radio-input
+ *
+ * @fires fm-radio-input - Bij selectie van deze optie. Detail: `{ name: string, value: string }`.
+ *
+ * @slot default - Label (hoofdtekst).
+ * @slot media - Logo, prijs of extra element. Standaard `append` (helemaal rechts); zet `media-placement="prepend"` voor media links tegen de tekst.
+ * @slot description - Secundaire tekst onder het label.
+ *
+ * @example
+ * ```html
+ * <fm-radio-input name="plan" value="basic" .checked=${true}>
+ *   <span>Basis</span>
+ *   <span slot="media">€ 0</span>
+ *   <span slot="description">Tot 10 routes per maand</span>
+ * </fm-radio-input>
+ * <fm-radio-input name="x" value="y">
+ *   <span>Label</span>
+ *   <span slot="media">€ 9,99</span>
+ * </fm-radio-input>
+ * <fm-radio-input media-placement="prepend" name="x" value="y">
+ *   <span>Label</span>
+ *   <span slot="media">Logo</span>
+ * </fm-radio-input>
+ * ```
+ */
+export type FmRadioInputMediaPlacement = 'prepend' | 'append';
+export declare class FmRadioInput extends LitElement {
+    /** Radio group name forwarded to the native input. */
+    name: string;
+    /** Submitted value for this radio option. */
+    value: string;
+    /** Checked state. */
+    checked: boolean;
+    /** Disabled state. */
+    disabled: boolean;
+    /** Gray border in default state (not hover, not focused, not checked). */
+    grayBorder: boolean;
+    /** Media slot placement: 'prepend' | 'append'. Default `'append'`. */
+    mediaPlacement: FmRadioInputMediaPlacement;
+    private handleChange;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'fm-radio-input': FmRadioInput;
+    }
+}
+//# sourceMappingURL=fm-radio-input.d.ts.map

package/dist/fm-radio-input/fm-radio-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-radio-input.d.ts","sourceRoot":"","sources":["../../src/fm-radio-input/fm-radio-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAItC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE7D,qBACa,YAAa,SAAQ,UAAU;IAC1C,sDAAsD;IAC1B,IAAI,SAAK;IAErC,6CAA6C;IACjB,KAAK,SAAK;IAEtC,qBAAqB;IACuB,OAAO,UAAQ;IAE3D,sBAAsB;IACsB,QAAQ,UAAQ;IAE5D,0EAA0E;IACJ,UAAU,UAAQ;IAExF,sEAAsE;IAEtE,cAAc,EAAE,0BAA0B,CAAW;IAErD,OAAO,CAAC,YAAY;IAcpB,MAAM;IA6BN,MAAM,CAAC,MAAM,4BAAsB;CACpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAA;KAC/B;CACF"}