igniteui-webcomponents 5.0.2 → 5.1.1

package/components/validation-container/validation-container.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, type TemplateResult, nothing } from 'lit';
+import type { IgcFormControl } from '../common/mixins/forms/types.js';
+interface ValidationContainerConfig {
+    /** The id attribute for the validation container. */
+    id?: string;
+    /** Project the validation container to the given slot inside the host shadow DOM. */
+    slot?: string;
+    /** Additional part(s) that should be bound to the validation container. */
+    part?: string;
+    /** Whether the validation container should expose a helper-text slot. */
+    hasHelperText?: boolean;
+}
+/**
+ * @element igc-validator
+ *
+ * @csspart helper-text - The base wrapper
+ * @csspart validation-message - The validation error message container
+ * @csspart validation-icon - The validation error icon
+ */
+export default class IgcValidationContainerComponent extends LitElement {
+    static readonly tagName = "igc-validator";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    static create(host: IgcFormControl, config?: ValidationContainerConfig): TemplateResult;
+    private _target;
+    private _hasSlottedContent;
+    invalid: boolean;
+    set target(value: IgcFormControl);
+    get target(): IgcFormControl;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    handleEvent({ type }: Event): void;
+    protected renderValidationMessage(slotName: string): TemplateResult<1>;
+    protected renderValidationSlots(validity: ValidityState, projected?: boolean): Generator<TemplateResult<1>, void, unknown>;
+    protected renderHelper(): TemplateResult<1> | typeof nothing;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-validator': IgcValidationContainerComponent;
+    }
+}
+export {};

package/components/validation-container/validation-container.js

@@ -0,0 +1,160 @@
+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 IgcValidationContainerComponent_1;
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { isEmpty, partNameMap, toKebabCase } from '../common/util.js';
+import IgcIconComponent from '../icon/icon.js';
+import { styles as shared } from './themes/shared/validator.common.css.js';
+import { all } from './themes/themes.js';
+import { styles } from './themes/validator.base.css.js';
+function getValidationSlots(element) {
+    return element.renderRoot.querySelectorAll("slot:not([name='helper-text'])");
+}
+function hasProjection(element) {
+    return Array.from(element.renderRoot.querySelectorAll('slot')).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));
+}
+function hasProjectedValidation(element, slotName) {
+    const config = { flatten: true };
+    const slots = Array.from(getValidationSlots(element));
+    return slotName
+        ? slots
+            .filter((slot) => slot.name === slotName)
+            .some((slot) => slot.assignedElements(config).length > 0)
+        : slots.some((slot) => slot.assignedElements(config).length > 0);
+}
+let IgcValidationContainerComponent = IgcValidationContainerComponent_1 = class IgcValidationContainerComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._hasSlottedContent = false;
+        this.invalid = false;
+    }
+    static register() {
+        registerComponent(IgcValidationContainerComponent_1, IgcIconComponent);
+    }
+    static create(host, config = {
+        id: 'helper-text',
+        hasHelperText: true,
+    }) {
+        const { renderValidationSlots } = IgcValidationContainerComponent_1.prototype;
+        const helperText = config.hasHelperText
+            ? html `<slot name="helper-text" slot="helper-text"></slot>`
+            : null;
+        return html `
+      <igc-validator
+        id=${ifDefined(config.id)}
+        part=${ifDefined(config.part)}
+        slot=${ifDefined(config.slot)}
+        .target=${host}
+        ?invalid=${host.invalid}
+        exportparts="helper-text validation-message validation-icon"
+      >
+        ${helperText}${renderValidationSlots(host.validity, true)}
+      </igc-validator>
+    `;
+    }
+    set target(value) {
+        if (this._target === value) {
+            return;
+        }
+        this._target?.removeEventListener('invalid', this);
+        this._target = value;
+        this._target.addEventListener('invalid', this);
+    }
+    get target() {
+        return this._target;
+    }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', this);
+        return root;
+    }
+    handleEvent({ type }) {
+        const isInvalid = type === 'invalid';
+        const isSlotChange = type === 'slotchange';
+        if (isInvalid || isSlotChange) {
+            this.invalid = isInvalid ? true : this.invalid;
+            this._hasSlottedContent = hasProjectedValidation(this);
+        }
+        this.requestUpdate();
+    }
+    renderValidationMessage(slotName) {
+        const icon = hasProjectedValidation(this, slotName)
+            ? html `
+          <igc-icon
+            aria-hidden="true"
+            name="error"
+            collection="default"
+            part="validation-icon"
+          ></igc-icon>
+        `
+            : null;
+        const parts = partNameMap({
+            'validation-message': true,
+            empty: !icon,
+        });
+        return html `
+      <div part=${parts}>
+        ${icon}
+        <slot name=${slotName}></slot>
+      </div>
+    `;
+    }
+    *renderValidationSlots(validity, projected = false) {
+        for (const key in validity) {
+            if (key === 'valid' && !validity[key]) {
+                yield projected
+                    ? html `<slot name="invalid" slot="invalid"></slot>`
+                    : this.renderValidationMessage('invalid');
+            }
+            else if (validity[key]) {
+                const name = toKebabCase(key);
+                yield projected
+                    ? html `<slot name=${name} slot=${name}></slot>`
+                    : this.renderValidationMessage(name);
+            }
+        }
+    }
+    renderHelper() {
+        return this.invalid && this._hasSlottedContent
+            ? nothing
+            : html `<slot name="helper-text"></slot>`;
+    }
+    render() {
+        const parts = partNameMap({
+            'helper-text': true,
+            empty: hasProjection(this),
+        });
+        return html `
+      <div part=${parts}>
+        ${this.invalid
+            ? this.renderValidationSlots(this.target.validity)
+            : nothing}
+        ${this.renderHelper()}
+      </div>
+    `;
+    }
+};
+IgcValidationContainerComponent.tagName = 'igc-validator';
+IgcValidationContainerComponent.styles = [styles, shared];
+__decorate([
+    state()
+], IgcValidationContainerComponent.prototype, "_hasSlottedContent", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcValidationContainerComponent.prototype, "invalid", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcValidationContainerComponent.prototype, "target", null);
+IgcValidationContainerComponent = IgcValidationContainerComponent_1 = __decorate([
+    themes(all)
+], IgcValidationContainerComponent);
+export default IgcValidationContainerComponent;
+//# sourceMappingURL=validation-container.js.map

package/components/validation-container/validation-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-container.js","sourceRoot":"","sources":["../../../src/components/validation-container/validation-container.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { IgcFormControl } from '../common/mixins/forms/types.js';\nimport { isEmpty, partNameMap, toKebabCase } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { styles as shared } from './themes/shared/validator.common.css.js';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/validator.base.css.js';\n\ninterface ValidationContainerConfig {\n  /** The id attribute for the validation container. */\n  id?: string;\n  /** Project the validation container to the given slot inside the host shadow DOM. */\n  slot?: string;\n  /** Additional part(s) that should be bound to the validation container. */\n  part?: string;\n  /** Whether the validation container should expose a helper-text slot. */\n  hasHelperText?: boolean;\n}\n\nfunction getValidationSlots(element: IgcValidationContainerComponent) {\n  return element.renderRoot.querySelectorAll<HTMLSlotElement>(\n    \"slot:not([name='helper-text'])\"\n  );\n}\n\nfunction hasProjection(element: IgcValidationContainerComponent) {\n  return Array.from(\n    element.renderRoot.querySelectorAll<HTMLSlotElement>('slot')\n  ).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));\n}\n\nfunction hasProjectedValidation(\n  element: IgcValidationContainerComponent,\n  slotName?: string\n) {\n  const config: AssignedNodesOptions = { flatten: true };\n  const slots = Array.from(getValidationSlots(element));\n  return slotName\n    ? slots\n        .filter((slot) => slot.name === slotName)\n        .some((slot) => slot.assignedElements(config).length > 0)\n    : slots.some((slot) => slot.assignedElements(config).length > 0);\n}\n\n/* blazorSuppress */\n/**\n * @element igc-validator\n *\n * @csspart helper-text - The base wrapper\n * @csspart validation-message - The validation error message container\n * @csspart validation-icon - The validation error icon\n */\n@themes(all)\nexport default class IgcValidationContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-validator';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcValidationContainerComponent, IgcIconComponent);\n  }\n\n  public static create(\n    host: IgcFormControl,\n    config: ValidationContainerConfig = {\n      id: 'helper-text',\n      hasHelperText: true,\n    }\n  ): TemplateResult {\n    const { renderValidationSlots } = IgcValidationContainerComponent.prototype;\n    const helperText = config.hasHelperText\n      ? html`<slot name=\"helper-text\" slot=\"helper-text\"></slot>`\n      : null;\n\n    return html`\n      <igc-validator\n        id=${ifDefined(config.id)}\n        part=${ifDefined(config.part)}\n        slot=${ifDefined(config.slot)}\n        .target=${host}\n        ?invalid=${host.invalid}\n        exportparts=\"helper-text validation-message validation-icon\"\n      >\n        ${helperText}${renderValidationSlots(host.validity, true)}\n      </igc-validator>\n    `;\n  }\n\n  private _target!: IgcFormControl;\n\n  @state()\n  private _hasSlottedContent = false;\n\n  @property({ type: Boolean })\n  public invalid = false;\n\n  @property({ attribute: false })\n  public set target(value: IgcFormControl) {\n    if (this._target === value) {\n      return;\n    }\n\n    this._target?.removeEventListener('invalid', this);\n    this._target = value;\n    this._target.addEventListener('invalid', this);\n  }\n\n  public get target() {\n    return this._target;\n  }\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this);\n    return root;\n  }\n\n  public handleEvent({ type }: Event) {\n    const isInvalid = type === 'invalid';\n    const isSlotChange = type === 'slotchange';\n\n    if (isInvalid || isSlotChange) {\n      this.invalid = isInvalid ? true : this.invalid;\n      this._hasSlottedContent = hasProjectedValidation(this);\n    }\n\n    this.requestUpdate();\n  }\n\n  protected renderValidationMessage(slotName: string) {\n    const icon = hasProjectedValidation(this, slotName)\n      ? html`\n          <igc-icon\n            aria-hidden=\"true\"\n            name=\"error\"\n            collection=\"default\"\n            part=\"validation-icon\"\n          ></igc-icon>\n        `\n      : null;\n\n    const parts = partNameMap({\n      'validation-message': true,\n      empty: !icon,\n    });\n\n    return html`\n      <div part=${parts}>\n        ${icon}\n        <slot name=${slotName}></slot>\n      </div>\n    `;\n  }\n\n  protected *renderValidationSlots(validity: ValidityState, projected = false) {\n    for (const key in validity) {\n      if (key === 'valid' && !validity[key]) {\n        yield projected\n          ? html`<slot name=\"invalid\" slot=\"invalid\"></slot>`\n          : this.renderValidationMessage('invalid');\n      } else if (validity[key as keyof ValidityState]) {\n        const name = toKebabCase(key);\n\n        yield projected\n          ? html`<slot name=${name} slot=${name}></slot>`\n          : this.renderValidationMessage(name);\n      }\n    }\n  }\n\n  protected renderHelper() {\n    return this.invalid && this._hasSlottedContent\n      ? nothing\n      : html`<slot name=\"helper-text\"></slot>`;\n  }\n\n  protected override render() {\n    const parts = partNameMap({\n      'helper-text': true,\n      empty: hasProjection(this),\n    });\n    return html`\n      <div part=${parts}>\n        ${this.invalid\n          ? this.renderValidationSlots(this.target.validity)\n          : nothing}\n        ${this.renderHelper()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-validator': IgcValidationContainerComponent;\n  }\n}\n"]}