pure-uikit 1.1.31 → 1.1.32

package/cdn/chunks/chunk.2A753MA5.js

@@ -0,0 +1,316 @@
+import {
+  PProgressBar
+} from "./chunk.YHIWQ6LQ.js";
+import {
+  file_upload_styles_default
+} from "./chunk.TF3ZKHDR.js";
+import {
+  hasValidFileSize,
+  hasValidFileType
+} from "./chunk.OC75CHDN.js";
+import {
+  PFileUploadItem
+} from "./chunk.QON455M6.js";
+import {
+  FormControlController
+} from "./chunk.SW6OGP3X.js";
+import {
+  PIconButton
+} from "./chunk.YFYZ7OTR.js";
+import {
+  to
+} from "./chunk.DQNILPUT.js";
+import {
+  Rt
+} from "./chunk.A56LY5J2.js";
+import {
+  LocalizeController
+} from "./chunk.BTMIVMQK.js";
+import {
+  PIcon
+} from "./chunk.ZV3MKUGJ.js";
+import {
+  PureElement,
+  e,
+  n,
+  r
+} from "./chunk.MS3LDSMF.js";
+import {
+  component_styles_default
+} from "./chunk.DNSDK7ZG.js";
+import {
+  D,
+  ke
+} from "./chunk.XHSHLALN.js";
+import {
+  __decorateClass
+} from "./chunk.KIILAQWQ.js";
+
+// src/components/file-upload/file-upload.component.ts
+var PFileUpload = class extends PureElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["p-blur", "p-input", "p-select", "p-change"]
+    });
+    this.localize = new LocalizeController(this);
+    this.isDragover = false;
+    this.files = [];
+    this.disabled = false;
+    this.noButton = false;
+    this.buttonOnly = false;
+    this.noFileList = false;
+    this.accept = "*";
+    this.multiple = false;
+  }
+  get value() {
+    if (this.files.length > 0) {
+      return `C:\\fakepath\\${this.files[0].file.name}`;
+    }
+    return "";
+  }
+  set value(file) {
+    if (file instanceof File) {
+      this.files = [{ file }];
+      return;
+    }
+    this.files = [];
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.fileInput.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.fileInput.validationMessage;
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.fileInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.fileInput.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.fileInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  addFile(file) {
+    if (this.maxFiles && this.files.length >= this.maxFiles) {
+      this.warning = this.localize.term("maxFiles");
+      return;
+    }
+    const fileInfo = {
+      file
+    };
+    if (!hasValidFileType(file, this.accept)) {
+      fileInfo.accepted = false;
+      fileInfo.warning = this.localize.term("fileTypeNotAccepted");
+    } else if (!hasValidFileSize(file, this.maxFileSize)) {
+      fileInfo.accepted = false;
+      fileInfo.warning = this.localize.term("fileSizeExceeded");
+    } else {
+      fileInfo.accepted = true;
+    }
+    this.files = this.multiple ? [...this.files, fileInfo] : [fileInfo];
+    this.emit("p-change", { detail: { files: this.files } });
+  }
+  handleFiles(fileList) {
+    if (!fileList || fileList.length === 0) {
+      return;
+    }
+    this.warning = void 0;
+    if (!this.multiple && fileList.length > 1) {
+      this.warning = this.localize.term("noMultipleFiles");
+      return;
+    }
+    Object.values(fileList).forEach((file) => this.addFile(file));
+  }
+  onDragLeave() {
+    this.isDragover = false;
+  }
+  onDragOver(event) {
+    event.preventDefault();
+    if (!event.dataTransfer) {
+      return;
+    }
+    this.isDragover = true;
+  }
+  onDrop(event) {
+    var _a;
+    event.preventDefault();
+    this.isDragover = false;
+    const files = (_a = event.dataTransfer) == null ? void 0 : _a.files;
+    if (!files || this.disabled) {
+      return;
+    }
+    this.handleFiles(files);
+  }
+  handleBrowseFileClick() {
+    this.fileInput.click();
+  }
+  handleFileInputChange() {
+    this.handleFiles(this.fileInput.files);
+  }
+  handleFileRemove(index) {
+    const fileInfo = this.files[index];
+    this.emit("p-remove", { detail: { file: fileInfo } });
+    this.files = this.files.filter((_, fileIndex) => fileIndex !== index);
+  }
+  get description() {
+    if (this.warning) {
+      return this.warning;
+    }
+    return this.label ? this.label : this.localize.term("dragDrop");
+  }
+  render() {
+    var _a;
+    const browseFilesButton = ke`
+      <div @click="${this.handleBrowseFileClick}">
+        <slot name="button">
+          <p-button
+            part="button"
+            variant=${this.warning ? "warning" : "default"}
+            ?disabled=${this.disabled}
+            size="small"
+          >
+            ${(_a = this.buttonLabel) != null ? _a : this.localize.term("browseFiles")}
+          </p-button>
+        </slot>
+      </div>
+    `;
+    return ke`
+      <div
+        part="base"
+        class=${Rt({
+      "file-upload": true,
+      "file-upload--disabled": this.disabled,
+      "file-upload--warning": !!this.warning,
+      "file-upload--dragged": this.isDragover
+    })}
+      >
+        <input
+          type="file"
+          id="file-input"
+          style="display: none"
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          @change="${this.handleFileInputChange}"
+          value=${this.value}
+        />
+        ${this.buttonOnly ? browseFilesButton : ke`
+              <div id="dropzone" @drop="${this.onDrop}" @dragover="${this.onDragOver}" @dragleave="${this.onDragLeave}">
+                <slot name="label">
+                  <div part="label" class="file-upload__label">
+                    <div class="file-upload__label__container">
+                      <span class="file-upload__icon">
+                        <slot name="image">
+                          <span style="font-size: 20px; position: relative; top: 5px;">
+                            <p-icon name="cloud-upload" size="large"></p-icon>
+                          </span>
+                        </slot>
+                      </span>
+                      <div class="file-upload__label__text">
+                        ${!this.noButton ? browseFilesButton : ""}
+                        <div class="file-upload__label__description">${this.description}</div>
+                      </div>
+                    </div>
+                  </div>
+                </slot>
+              </div>
+            `}
+        ${!this.noFileList ? ke`
+              <div class="file-upload__file-items" id="file-items">
+                ${this.files.map(
+      (fileInfo, index) => ke`
+                    <p-file-upload-item
+                      size=${fileInfo.accepted ? fileInfo.file.size : D}
+                      ?warning=${!fileInfo.accepted}
+                      ?closable=${fileInfo.accepted}
+                      ?loading=${fileInfo.loading}
+                      progress=${to(fileInfo.progress)}
+                      @p-hide=${(event) => {
+        event.stopPropagation();
+        this.handleFileRemove(index);
+      }}
+                    >
+                      ${fileInfo.accepted ? fileInfo.file.name : fileInfo.warning}
+                      <p-icon
+                        name=${fileInfo.warning ? "exclamation-triangle" : "file-earmark"}
+                        slot="image"
+                        library="system"
+                      ></p-icon>
+                    </p-file-upload-item>
+                  `
+    )}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+PFileUpload.styles = [component_styles_default, file_upload_styles_default];
+PFileUpload.dependencies = {
+  "p-icon": PIcon,
+  "p-icon-button": PIconButton,
+  "p-progress-bar": PProgressBar,
+  "p-upload-file-item": PFileUploadItem
+};
+__decorateClass([
+  r()
+], PFileUpload.prototype, "warning", 2);
+__decorateClass([
+  r()
+], PFileUpload.prototype, "isDragover", 2);
+__decorateClass([
+  e("#file-input")
+], PFileUpload.prototype, "fileInput", 2);
+__decorateClass([
+  n({ type: Array })
+], PFileUpload.prototype, "files", 2);
+__decorateClass([
+  n()
+], PFileUpload.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], PFileUpload.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "no-button" })
+], PFileUpload.prototype, "noButton", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "button-only" })
+], PFileUpload.prototype, "buttonOnly", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "no-file-list" })
+], PFileUpload.prototype, "noFileList", 2);
+__decorateClass([
+  n()
+], PFileUpload.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "button-label" })
+], PFileUpload.prototype, "buttonLabel", 2);
+__decorateClass([
+  n()
+], PFileUpload.prototype, "lang", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], PFileUpload.prototype, "accept", 2);
+__decorateClass([
+  n({ type: Number, attribute: "max-file-size" })
+], PFileUpload.prototype, "maxFileSize", 2);
+__decorateClass([
+  n({ type: Number, attribute: "max-files" })
+], PFileUpload.prototype, "maxFiles", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], PFileUpload.prototype, "multiple", 2);
+
+export {
+  PFileUpload
+};

package/cdn/chunks/chunk.2QKTR5OI.js

@@ -0,0 +1,11 @@
+import {
+  PSplitPanel
+} from "./chunk.XPITDOII.js";
+
+// src/components/split-panel/split-panel.ts
+var split_panel_default = PSplitPanel;
+PSplitPanel.define("p-split-panel");
+
+export {
+  split_panel_default
+};

package/cdn/chunks/chunk.2TUTWSI4.js

@@ -0,0 +1,120 @@
+import {
+  PIcon
+} from "./chunk.ZV3MKUGJ.js";
+import {
+  watch
+} from "./chunk.FA5RT4K4.js";
+import {
+  PureElement,
+  e,
+  n,
+  r
+} from "./chunk.MS3LDSMF.js";
+import {
+  component_styles_default
+} from "./chunk.DNSDK7ZG.js";
+import {
+  animated_image_styles_default
+} from "./chunk.MKTYGTX7.js";
+import {
+  ke
+} from "./chunk.XHSHLALN.js";
+import {
+  __decorateClass
+} from "./chunk.KIILAQWQ.js";
+
+// src/components/animated-image/animated-image.component.ts
+var PAnimatedImage = class extends PureElement {
+  constructor() {
+    super(...arguments);
+    this.isLoaded = false;
+  }
+  handleClick() {
+    this.play = !this.play;
+  }
+  handleLoad() {
+    const canvas = document.createElement("canvas");
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL("image/gif");
+    if (!this.isLoaded) {
+      this.emit("p-load");
+      this.isLoaded = true;
+    }
+  }
+  handleError() {
+    this.emit("p-error");
+  }
+  handlePlayChange() {
+    if (this.play) {
+      this.animatedImage.src = "";
+      this.animatedImage.src = this.src;
+    }
+  }
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+  render() {
+    return ke`
+      <div class="animated-image">
+        <img
+          class="animated-image__animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${this.play ? "false" : "true"}
+          @click=${this.handleClick}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded ? ke`
+              <img
+                class="animated-image__frozen"
+                src=${this.frozenFrame}
+                alt=${this.alt}
+                aria-hidden=${this.play ? "true" : "false"}
+                @click=${this.handleClick}
+              />
+
+              <div part="control-box" class="animated-image__control-box">
+                <slot name="play-icon"><p-icon name="play-fill" library="system"></p-icon></slot>
+                <slot name="pause-icon"><p-icon name="pause-fill" library="system"></p-icon></slot>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+PAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
+PAnimatedImage.dependencies = { "p-icon": PIcon };
+__decorateClass([
+  e(".animated-image__animated")
+], PAnimatedImage.prototype, "animatedImage", 2);
+__decorateClass([
+  r()
+], PAnimatedImage.prototype, "frozenFrame", 2);
+__decorateClass([
+  r()
+], PAnimatedImage.prototype, "isLoaded", 2);
+__decorateClass([
+  n()
+], PAnimatedImage.prototype, "src", 2);
+__decorateClass([
+  n()
+], PAnimatedImage.prototype, "alt", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], PAnimatedImage.prototype, "play", 2);
+__decorateClass([
+  watch("play", { waitUntilFirstUpdate: true })
+], PAnimatedImage.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("src")
+], PAnimatedImage.prototype, "handleSrcChange", 1);
+
+export {
+  PAnimatedImage
+};

package/cdn/chunks/chunk.34IWOQII.js

@@ -0,0 +1,11 @@
+import {
+  PAvatar
+} from "./chunk.7RQFIDQN.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = PAvatar;
+PAvatar.define("p-avatar");
+
+export {
+  avatar_default
+};

package/cdn/chunks/chunk.34NSZ2AI.js

@@ -0,0 +1,24 @@
+import {
+  PMenu
+} from "./chunk.5VVT4R6D.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "p-menu";
+PMenu.define("p-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PMenu,
+  react: React,
+  events: {
+    onPSelect: "p-select"
+  },
+  displayName: "PMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

package/cdn/chunks/chunk.37DB6O5W.js

@@ -0,0 +1,89 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.VMI5YPYC.js";
+import {
+  to
+} from "./chunk.DQNILPUT.js";
+import {
+  HasSlotController
+} from "./chunk.MLXUTV4G.js";
+import {
+  Rt
+} from "./chunk.A56LY5J2.js";
+import {
+  PureElement,
+  n
+} from "./chunk.MS3LDSMF.js";
+import {
+  component_styles_default
+} from "./chunk.DNSDK7ZG.js";
+import {
+  ke
+} from "./chunk.XHSHLALN.js";
+import {
+  __decorateClass
+} from "./chunk.KIILAQWQ.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+var PBreadcrumbItem = class extends PureElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.rel = "noreferrer noopener";
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    return ke`
+      <div
+        part="base"
+        class=${Rt({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${isLink ? ke`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${to(this.target ? this.target : void 0)}"
+                rel=${to(this.target ? this.rel : void 0)}
+              >
+                <slot></slot>
+              </a>
+            ` : ke`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot></slot>
+              </button>
+            `}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+PBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+__decorateClass([
+  n()
+], PBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], PBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], PBreadcrumbItem.prototype, "rel", 2);
+
+export {
+  PBreadcrumbItem
+};

package/cdn/chunks/chunk.3GV4RH3L.js

@@ -0,0 +1,28 @@
+import {
+  PColorPicker
+} from "./chunk.7P4HT5RF.js";
+
+// src/react/color-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "p-color-picker";
+PColorPicker.define("p-color-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PColorPicker,
+  react: React,
+  events: {
+    onPBlur: "p-blur",
+    onPChange: "p-change",
+    onPFocus: "p-focus",
+    onPInput: "p-input",
+    onPInvalid: "p-invalid"
+  },
+  displayName: "PColorPicker"
+});
+var color_picker_default = reactWrapper;
+
+export {
+  color_picker_default
+};