@nuraly/lumenui 0.1.0

package/dist/src/components/iconpicker/icon-picker.style.js

@@ -0,0 +1,216 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export default css `
+  :host {
+    /* Sizing */
+    --icon-picker-trigger-width: 100%;
+    --icon-picker-trigger-height: auto;
+    --icon-picker-dropdown-width: 320px;
+    --icon-picker-dropdown-max-height: 380px;
+    --icon-picker-grid-gap: 4px;
+    --icon-picker-icon-size: 24px;
+    --icon-picker-icon-padding: 8px;
+    
+    /* Colors - Light mode */
+    --icon-picker-background: var(--nuraly-background-primary, #ffffff);
+    --icon-picker-border: var(--nuraly-border-color, #d0d0d0);
+    --icon-picker-text: var(--nuraly-text-primary, #000000);
+    --icon-picker-hover-bg: var(--nuraly-background-hover, #f5f5f5);
+    --icon-picker-selected-bg: var(--nuraly-primary-light, #e6f7ff);
+    --icon-picker-selected-border: var(--nuraly-primary-color, #1890ff);
+    --icon-picker-placeholder-color: var(--nuraly-text-secondary, #999999);
+    
+    display: inline-block;
+    width: var(--icon-picker-trigger-width);
+    position: relative;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --icon-picker-background: var(--nuraly-background-primary, #1f1f1f);
+      --icon-picker-border: var(--nuraly-border-color, #404040);
+      --icon-picker-text: var(--nuraly-text-primary, #ffffff);
+      --icon-picker-hover-bg: var(--nuraly-background-hover, #2a2a2a);
+      --icon-picker-selected-bg: var(--nuraly-primary-dark, #003a8c);
+      --icon-picker-selected-border: var(--nuraly-primary-color, #40a9ff);
+    }
+  }
+
+  /* Trigger container */
+  .trigger-container {
+    width: 100%;
+  }
+
+  .trigger-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    cursor: pointer;
+  }
+
+  /* Icon preview in trigger */
+  .icon-preview {
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon-name {
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--icon-picker-text);
+  }
+
+  .placeholder {
+    font-size: 0.875rem;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Dropdown content */
+  .dropdown-content {
+    width: var(--icon-picker-dropdown-width);
+    max-height: var(--icon-picker-dropdown-max-height);
+    background: var(--icon-picker-background);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Search container */
+  .search-container {
+    padding: 12px;
+    background: var(--icon-picker-background);
+    border-bottom: 1px solid var(--icon-picker-border);
+    flex-shrink: 0;
+    z-index: 10;
+  }
+
+  /* Icons grid container */
+  .icons-grid-container {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+    background: var(--icon-picker-background);
+  }
+
+  /* Icon grid using lit-virtualizer */
+  .icons-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--icon-picker-grid-gap), 1fr));
+    gap: var(--icon-picker-grid-gap);
+  }
+
+  /* Individual icon item */
+  .icon-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--icon-picker-icon-padding);
+    cursor: pointer;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+    min-width: var(--icon-picker-icon-size);
+    min-height: var(--icon-picker-icon-size);
+  }
+
+  .icon-item:hover {
+    background-color: var(--icon-picker-hover-bg);
+  }
+
+  .icon-item.selected {
+    background-color: var(--icon-picker-selected-bg);
+    border-color: var(--icon-picker-selected-border);
+  }
+
+  .icon-item:focus {
+    outline: 2px solid var(--icon-picker-selected-border);
+    outline-offset: 2px;
+  }
+
+  .icon-item nr-icon {
+    font-size: var(--icon-picker-icon-size);
+    color: var(--icon-picker-text);
+  }
+
+  /* Empty state */
+  .empty-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  .empty-state nr-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
+  .empty-message {
+    font-size: 0.875rem;
+  }
+
+  /* Loading state */
+  .loading-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --icon-picker-icon-size: 20px;
+    --icon-picker-icon-padding: 6px;
+    --icon-picker-dropdown-width: 280px;
+  }
+
+  :host([size="large"]) {
+    --icon-picker-icon-size: 28px;
+    --icon-picker-icon-padding: 10px;
+    --icon-picker-dropdown-width: 360px;
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .icon-item {
+      transition: none;
+    }
+  }
+
+  /* Scrollbar styling */
+  .icons-grid-container::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb {
+    background: var(--icon-picker-border);
+    border-radius: 4px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb:hover {
+    background: var(--icon-picker-text);
+    opacity: 0.5;
+  }
+`;
+//# sourceMappingURL=icon-picker.style.js.map

package/dist/src/components/iconpicker/icon-picker.types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const enum IconPickerSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export declare const enum IconPickerPlacement {
+    Auto = "auto",
+    Top = "top",
+    Bottom = "bottom",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    Left = "left",
+    Right = "right"
+}
+export declare const enum IconPickerTrigger {
+    Click = "click",
+    Hover = "hover",
+    Manual = "manual"
+}
+export declare const enum IconType {
+    Solid = "solid",
+    Regular = "regular",
+    Brands = "brands"
+}
+export interface IconPickerIcon {
+    name: string;
+    type: IconType;
+    keywords?: string[];
+    category?: string;
+    iconName?: string;
+}
+export interface IconPickerSearchOptions {
+    caseSensitive?: boolean;
+    matchMode?: 'contains' | 'startsWith' | 'exact';
+    categories?: string[];
+}
+export interface IconPickerChangeEvent {
+    value: string;
+    icon: IconPickerIcon | null;
+}
+export declare const EMPTY_STRING = "";
+//# sourceMappingURL=icon-picker.types.d.ts.map

package/dist/src/components/iconpicker/icon-picker.types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export const EMPTY_STRING = '';
+//# sourceMappingURL=icon-picker.types.js.map

package/dist/src/components/iconpicker/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrIconPickerElement } from './icon-picker.component.js';
+export * from './icon-picker.types.js';
+export * from './icon-picker.constant.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/iconpicker/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrIconPickerElement } from './icon-picker.component.js';
+export * from './icon-picker.types.js';
+export * from './icon-picker.constant.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/iconpicker/react.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrIconPickerElement } from './icon-picker.component.js';
+export declare const NrIconPicker: import("@lit-labs/react").ReactWebComponent<NrIconPickerElement, {
+    onChange: string;
+    onOpen: string;
+    onClose: string;
+    onSearch: string;
+    onClear: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/iconpicker/react.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import * as React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrIconPickerElement } from './icon-picker.component.js';
+export const NrIconPicker = createComponent({
+    tagName: 'nr-icon-picker',
+    elementClass: NrIconPickerElement,
+    react: React,
+    events: {
+        onChange: 'nr-icon-picker-change',
+        onOpen: 'nr-icon-picker-open',
+        onClose: 'nr-icon-picker-close',
+        onSearch: 'nr-icon-picker-search',
+        onClear: 'nr-icon-picker-clear',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/image/bundle.js

@@ -0,0 +1,98 @@
+import{css as i,LitElement as t,html as r}from"lit";import{property as e,state as o,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var g=i`
+img{
+    border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
+    border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
+    border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
+    border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
+}
+.image-container {
+    position: relative;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    animation: zoomIn 0.3s ease;
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s;
+  }
+
+  .preview-close:hover {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`,c=function(i,t,r,e){for(var o,s=arguments.length,a=s<3?t:null===e?e=Object.getOwnPropertyDescriptor(t,r):e,l=i.length-1;l>=0;l--)(o=i[l])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let n=class extends(d(t)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.alt="",this.previewable=!1,this.block=!1,this.currentSrc="",this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg=="}willUpdate(i){i.has("src")&&(this.currentSrc=this.src,this.hasError=!1)}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-image-error",{bubbles:!0,composed:!0,detail:{error:`Error loading image: ${this.currentSrc}`,src:this.currentSrc}})),this.fallback&&this.currentSrc!==this.fallback&&this.currentSrc!==this.defaultFallback?this.currentSrc=this.fallback:this.currentSrc!==this.defaultFallback&&(this.currentSrc=this.defaultFallback)}handleLoad(){this.hasError=!1,this.dispatchEvent(new CustomEvent("nr-image-load",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-image-preview-open",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-image-preview-close",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}render(){const i={"image-container":!0,"image--previewable":this.previewable,"image--error":this.hasError},t={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.fit&&(t["object-fit"]=this.fit),r`
+      <div class=${a(i)}>
+        <img
+          src=${this.currentSrc}
+          alt=${this.alt}
+          style=${l(t)}
+          @error=${this.handleError}
+          @load=${this.handleLoad}
+          @click=${this.showPreviewModal}
+        />
+        ${this.showPreview?r`
+          <div class="preview-modal" @click=${this.closePreviewModal}>
+            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+            <img src="${this.currentSrc}" alt="${this.alt}" />
+          </div>
+        `:""}
+      </div>
+    `}};n.styles=g,c([e({type:String})],n.prototype,"src",void 0),c([e({type:String})],n.prototype,"fallback",void 0),c([e({type:String})],n.prototype,"width",void 0),c([e({type:String})],n.prototype,"height",void 0),c([e({type:String})],n.prototype,"alt",void 0),c([e({type:Boolean})],n.prototype,"previewable",void 0),c([e({type:String})],n.prototype,"fit",void 0),c([e({type:Boolean,reflect:!0})],n.prototype,"block",void 0),c([o()],n.prototype,"currentSrc",void 0),c([o()],n.prototype,"showPreview",void 0),c([o()],n.prototype,"hasError",void 0),n=c([s("nr-image")],n);export{n as NrImageElement};

package/dist/src/components/image/image.component.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type PropertyValues } from "lit";
+import { ImageFit } from "./image.types.js";
+declare const NrImageElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+export declare class NrImageElement extends NrImageElement_base {
+    static styles: import("lit").CSSResult;
+    src: string;
+    fallback?: string;
+    width: string;
+    height: string;
+    alt: string;
+    previewable: boolean;
+    fit?: ImageFit;
+    block: boolean;
+    private currentSrc;
+    private showPreview;
+    private hasError;
+    private readonly defaultFallback;
+    willUpdate(changedProperties: PropertyValues): void;
+    private handleError;
+    private handleLoad;
+    private showPreviewModal;
+    private closePreviewModal;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-image': NrImageElement;
+    }
+}
+export {};
+//# sourceMappingURL=image.component.d.ts.map

package/dist/src/components/image/image.component.js

@@ -0,0 +1,143 @@
+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;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import styles from "./image.style.js";
+let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.width = 'auto';
+        this.height = 'auto';
+        this.alt = '';
+        this.previewable = false;
+        this.block = false;
+        this.currentSrc = '';
+        this.showPreview = false;
+        this.hasError = false;
+        this.defaultFallback = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('src')) {
+            this.currentSrc = this.src;
+            this.hasError = false;
+        }
+    }
+    handleError() {
+        this.hasError = true;
+        this.dispatchEvent(new CustomEvent('nr-image-error', {
+            bubbles: true,
+            composed: true,
+            detail: { error: `Error loading image: ${this.currentSrc}`, src: this.currentSrc }
+        }));
+        if (this.fallback && this.currentSrc !== this.fallback && this.currentSrc !== this.defaultFallback) {
+            this.currentSrc = this.fallback;
+        }
+        else if (this.currentSrc !== this.defaultFallback) {
+            this.currentSrc = this.defaultFallback;
+        }
+    }
+    handleLoad() {
+        this.hasError = false;
+        this.dispatchEvent(new CustomEvent('nr-image-load', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.currentSrc }
+        }));
+    }
+    showPreviewModal() {
+        if (this.previewable && !this.hasError) {
+            this.showPreview = true;
+            this.dispatchEvent(new CustomEvent('nr-image-preview-open', {
+                bubbles: true,
+                composed: true,
+                detail: { src: this.currentSrc }
+            }));
+        }
+    }
+    closePreviewModal() {
+        this.showPreview = false;
+        this.dispatchEvent(new CustomEvent('nr-image-preview-close', {
+            bubbles: true,
+            composed: true,
+            detail: { src: this.currentSrc }
+        }));
+    }
+    render() {
+        const containerClasses = {
+            'image-container': true,
+            'image--previewable': this.previewable,
+            'image--error': this.hasError
+        };
+        const imageStyles = {
+            width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+            height: typeof this.height === 'number' ? `${this.height}px` : this.height,
+        };
+        if (this.fit) {
+            imageStyles['object-fit'] = this.fit;
+        }
+        return html `
+      <div class=${classMap(containerClasses)}>
+        <img
+          src=${this.currentSrc}
+          alt=${this.alt}
+          style=${styleMap(imageStyles)}
+          @error=${this.handleError}
+          @load=${this.handleLoad}
+          @click=${this.showPreviewModal}
+        />
+        ${this.showPreview ? html `
+          <div class="preview-modal" @click=${this.closePreviewModal}>
+            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+            <img src="${this.currentSrc}" alt="${this.alt}" />
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+};
+NrImageElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "fallback", void 0);
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "alt", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrImageElement.prototype, "previewable", void 0);
+__decorate([
+    property({ type: String })
+], NrImageElement.prototype, "fit", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrImageElement.prototype, "block", void 0);
+__decorate([
+    state()
+], NrImageElement.prototype, "currentSrc", void 0);
+__decorate([
+    state()
+], NrImageElement.prototype, "showPreview", void 0);
+__decorate([
+    state()
+], NrImageElement.prototype, "hasError", void 0);
+NrImageElement = __decorate([
+    customElement('nr-image')
+], NrImageElement);
+export { NrImageElement };
+//# sourceMappingURL=image.component.js.map

package/dist/src/components/image/image.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=image.style.d.ts.map