@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -6,7 +6,7 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, ValidationRule, InputValidationResult } from './input.types.js';
 import { InputValidationHost, InputEventHost } from './controllers/index.js';
-declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (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;
+declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Versatile input component with validation, multiple types, and interactive features.
  *
@@ -27,9 +27,23 @@ declare const NrInputElement_base: (new (...args: any[]) => import("./mixins/num
  * @slot helper-text - Helper text
  * @slot addon-before - Content before input
  * @slot addon-after - Content after input
+ * @slot prefix - Content inside the input before the text
+ * @slot suffix - Content inside the input after the text
+ *
+ * @csspart container - The root flex column wrapper
+ * @csspart input-wrapper - The row wrapper containing addons and input container
+ * @csspart input-container - The bordered container around the actual input element
+ * @csspart input - The native input element
+ * @csspart prefix - Prefix slot wrapper inside the input container
+ * @csspart suffix - Suffix slot wrapper inside the input container
+ * @csspart addon-before - Addon wrapper before the input
+ * @csspart addon-after - Addon wrapper after the input
+ * @csspart label - Slot wrapper for the label
+ * @csspart helper-text - Slot wrapper for helper text
  */
 export declare class NrInputElement extends NrInputElement_base implements InputValidationHost, InputEventHost {
-    static styles: import("lit").CSSResult[];
+    static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     private validationController;
     private eventController;
     /** Disables the input */
@@ -108,7 +122,6 @@ export declare class NrInputElement extends NrInputElement_base implements Input
     updated(_changedProperties: PropertyValues): void;
     firstUpdated(): void;
     private _checkInitialSlotContent;
-    private _handleSlotChange;
     private _handleKeyDown;
     private _valueChange;
     private _focusEvent;

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

@@ -46,6 +46,19 @@ import { InputValidationController, InputEventController } from './controllers/i
  * @slot helper-text - Helper text
  * @slot addon-before - Content before input
  * @slot addon-after - Content after input
+ * @slot prefix - Content inside the input before the text
+ * @slot suffix - Content inside the input after the text
+ *
+ * @csspart container - The root flex column wrapper
+ * @csspart input-wrapper - The row wrapper containing addons and input container
+ * @csspart input-container - The bordered container around the actual input element
+ * @csspart input - The native input element
+ * @csspart prefix - Prefix slot wrapper inside the input container
+ * @csspart suffix - Suffix slot wrapper inside the input container
+ * @csspart addon-before - Addon wrapper before the input
+ * @csspart addon-after - Addon wrapper after the input
+ * @csspart label - Slot wrapper for the label
+ * @csspart helper-text - Slot wrapper for helper text
  */
 let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement)))) {
     constructor() {
@@ -134,7 +147,7 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
         };
     }
     get _input() {
-        return this.shadowRoot.querySelector('#input');
+        return this.renderRoot.querySelector('#input');
     }
     get characterCountDisplay() {
         const currentLength = this.value.length;
@@ -218,20 +231,11 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
         this._checkInitialSlotContent();
     }
     _checkInitialSlotContent() {
-        const addonBeforeElements = this.querySelectorAll('[slot="addon-before"]');
-        this.hasAddonBefore = addonBeforeElements.length > 0;
-        const addonAfterElements = this.querySelectorAll('[slot="addon-after"]');
-        this.hasAddonAfter = addonAfterElements.length > 0;
-    }
-    _handleSlotChange(e) {
-        const slot = e.target;
-        const slotName = slot.name;
-        if (slotName === 'addon-before') {
-            this.hasAddonBefore = slot.assignedElements().length > 0;
-        }
-        else if (slotName === 'addon-after') {
-            this.hasAddonAfter = slot.assignedElements().length > 0;
-        }
+        var _a, _b;
+        const addonBeforeSlot = this.renderRoot.querySelector('slot[name="addon-before"]');
+        this.hasAddonBefore = ((_a = addonBeforeSlot === null || addonBeforeSlot === void 0 ? void 0 : addonBeforeSlot.assignedElements()) !== null && _a !== void 0 ? _a : []).length > 0;
+        const addonAfterSlot = this.renderRoot.querySelector('slot[name="addon-after"]');
+        this.hasAddonAfter = ((_b = addonAfterSlot === null || addonAfterSlot === void 0 ? void 0 : addonAfterSlot.assignedElements()) !== null && _b !== void 0 ? _b : []).length > 0;
     }
     _onCopy() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -253,8 +257,8 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
     _getAriaDescribedBy() {
         var _a;
         const describedBy = [];
-        const helperSlot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="helper-text"]');
-        if (helperSlot && helperSlot.assignedNodes().length > 0) {
+        const helperSlot = this.renderRoot.querySelector('slot[name="helper-text"]');
+        if (((_a = helperSlot === null || helperSlot === void 0 ? void 0 : helperSlot.assignedElements()) !== null && _a !== void 0 ? _a : []).length > 0) {
             describedBy.push('helper-text');
         }
         return describedBy.join(' ') || '';
@@ -342,14 +346,19 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
         const validationClasses = this.getValidationClasses();
         const validationRenderState = this.validationController.getValidationRenderState();
         return html `
-      <slot name="label"></slot>
-      <div class="input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}" 
-           part="input-wrapper" 
-           data-theme="${this.currentTheme}"
+      <slot name="label" part="label"></slot>
+      <div class="input-wrapper ${Object.entries(validationClasses).filter(([, value]) => value).map(([key]) => key).join(' ')}"
+           part="input-wrapper"
            ?data-validating="${validationRenderState.isValidating}">
-        ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e) => this._handleSlotChange(e))}
+        ${this.hasAddonBefore ? html `
+          <div class="input-addon-before" part="addon-before">
+            <slot name="addon-before"></slot>
+          </div>
+        ` : ''}
         <div data-size=${this.size} id="input-container" part="input-container">
-          ${InputRenderUtils.renderPrefix()}
+          <div class="input-prefix" part="prefix" style="display: contents;">
+            <slot name="prefix"></slot>
+          </div>
           <input
             id="input"
             part="input"
@@ -366,7 +375,9 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
             @blur=${this._blurEvent}
             @keydown=${this._handleKeyDown}
           />
-          ${InputRenderUtils.renderSuffix()}
+          <div class="input-suffix" part="suffix" style="display: contents;">
+            <slot name="suffix"></slot>
+          </div>
           ${InputRenderUtils.renderCopyIcon(this.withCopy, this.disabled, this.readonly, () => this._onCopy(), (e) => this._handleIconKeydown(e))}
           ${InputRenderUtils.renderClearIcon(this.allowClear, this.value, this.disabled, this.readonly, () => this._onClear(), (e) => this._handleIconKeydown(e))}
           ${validationRenderState.hasValidationFeedback ? this.renderValidationIcon() : InputRenderUtils.renderStateIcon(this.state)}
@@ -374,12 +385,16 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
           ${InputRenderUtils.renderPasswordIcon(this.type, this.inputType, this.disabled, this.readonly, () => this._togglePasswordIcon(), (e) => this._handleIconKeydown(e))}
           ${InputRenderUtils.renderNumberIcons(this.type, this.state, this.disabled, this.readonly, () => this._increment(), () => this._decrement(), (e) => this._handleIconKeydown(e))}
         </div>
-        ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e) => this._handleSlotChange(e))}
+        ${this.hasAddonAfter ? html `
+          <div class="input-addon-after" part="addon-after">
+            <slot name="addon-after"></slot>
+          </div>
+        ` : ''}
       </div>
-      <slot name="helper-text"></slot>
+      <slot name="helper-text" part="helper-text"></slot>
       ${this.renderValidationMessage()}
       ${this.showCount ? html `
-        <div class="character-count" part="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
+        <div class="character-count" ?data-over-limit=${this.isOverCharacterLimit}>
           ${this.characterCountDisplay}
         </div>
       ` : ''}
@@ -387,6 +402,7 @@ let NrInputElement = class NrInputElement extends NumberMixin(FocusMixin(Selecti
     }
 };
 NrInputElement.styles = styles;
+NrInputElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrInputElement.prototype, "disabled", void 0);

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

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