vira 20.0.9 → 21.0.0

package/LICENSE-MIT

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 electrovir
+Copyright (c) 2024 electrovir
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/elements/vira-input.element.d.ts

@@ -1,13 +1,20 @@
 import { ViraIconSvg } from '../icons';
 import { SharedTextInputElementInputs } from './shared-text-input-logic';
 export * from './shared-text-input-logic';
+export declare enum ViraInputType {
+    Default = "text",
+    Password = "password",
+    Email = "email"
+}
 export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
     icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
     /** A suffix that, if provided, is shown following the user input field. */
     suffix?: string | undefined;
     showClearButton?: boolean | undefined;
+    type?: ViraInputType;
 } & SharedTextInputElementInputs, {
     forcedInputWidth: number;
+    showPassword: boolean;
 }, {
     /**
      * Fires whenever a user input created a new value. Does not fire if all input letters are
@@ -20,4 +27,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefinedTypedEventNameDefinition<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-clear-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly string[]>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly string[]>;

package/dist/elements/vira-input.element.js

@@ -1,4 +1,5 @@
 import { css, defineElementEvent, html, listen, onResize, renderIf, } from 'element-vir';
+import { EyeClosed24Icon, EyeOpen24Icon } from '../icons';
 import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles';
 import { createFocusStyles, viraFocusCssVars } from '../styles/focus';
@@ -8,6 +9,12 @@ import { defineViraElement } from './define-vira-element';
 import { filterTextInputValue, textInputListener, } from './shared-text-input-logic';
 import { ViraIcon } from './vira-icon.element';
 export * from './shared-text-input-logic';
+export var ViraInputType;
+(function (ViraInputType) {
+    ViraInputType["Default"] = "text";
+    ViraInputType["Password"] = "password";
+    ViraInputType["Email"] = "email";
+})(ViraInputType || (ViraInputType = {}));
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     hostClasses: {
@@ -21,9 +28,11 @@ export const ViraInput = defineViraElement()({
         'vira-input-border-color': '#cccccc',
         'vira-input-focus-border-color': '#59b1ff',
         'vira-input-text-selection-color': '#cfe9ff',
-        'vira-input-clear-button-color': '#aaaaaa',
+        'vira-input-action-button-color': '#aaaaaa',
         'vira-input-clear-button-hover-color': '#ff0000',
         'vira-input-clear-button-active-color': '#b30000',
+        'vira-input-show-password-button-hover-color': '#0a89ff',
+        'vira-input-show-password-button-active-color': '#0261ba',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
     },
@@ -193,25 +202,39 @@ export const ViraInput = defineViraElement()({
                 ${noUserSelect};
             }
 
-            .close-x-button {
+            button {
                 ${noNativeFormStyles};
-                color: ${cssVars['vira-input-clear-button-color'].value};
                 cursor: pointer;
                 display: flex;
-                transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+                transition: color
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            }
+
+            .clear-x-button,
+            .show-password-button {
+                color: ${cssVars['vira-input-action-button-color'].value};
             }
 
-            .close-x-button:hover {
+            .clear-x-button:hover {
                 color: ${cssVars['vira-input-clear-button-hover-color'].value};
             }
 
-            .close-x-button:active {
+            .clear-x-button:active {
                 color: ${cssVars['vira-input-clear-button-active-color'].value};
             }
+
+            .show-password-button:hover {
+                color: ${cssVars['vira-input-show-password-button-hover-color'].value};
+            }
+
+            .show-password-button:active {
+                color: ${cssVars['vira-input-show-password-button-active-color'].value};
+            }
         `;
     },
     stateInitStatic: {
         forcedInputWidth: 0,
+        showPassword: false,
     },
     renderCallback: ({ inputs, dispatch, state, updateState, events }) => {
         const { filtered: filteredValue } = filterTextInputValue({
@@ -243,6 +266,7 @@ export const ViraInput = defineViraElement()({
                         </span>
                     `)}
                 <input
+                    type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${inputs.disableBrowserHelps ? 'off' : ''}
                     autocorrect=${inputs.disableBrowserHelps ? 'off' : ''}
@@ -267,8 +291,8 @@ export const ViraInput = defineViraElement()({
                 />
                 ${renderIf(!!(inputs.showClearButton && inputs.value), html `
                         <button
-                            class="close-x-button"
-                            title="clear input"
+                            class="clear-x-button"
+                            title="clear"
                             ${listen('click', (event) => {
             /** Prevent focus of the input. */
             event.stopImmediatePropagation();
@@ -279,6 +303,22 @@ export const ViraInput = defineViraElement()({
                             <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
                         </button>
                     `)}
+                ${renderIf(!!(inputs.type === ViraInputType.Password), html `
+                        <button
+                            class="show-password-button"
+                            title="show password"
+                            ${listen('click', (event) => {
+            /** Prevent focus of the input. */
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            updateState({ showPassword: !state.showPassword });
+        })}
+                        >
+                            <${ViraIcon.assign({
+            icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
+        })}></${ViraIcon}>
+                        </button>
+                    `)}
                 ${renderIf(!!inputs.suffix, html `
                         <div class="suffix">${inputs.suffix}</div>
                     `)}
@@ -292,3 +332,9 @@ export const ViraInput = defineViraElement()({
         `;
     },
 });
+function calculateEffectiveInputType(type, showPassword) {
+    if (type === ViraInputType.Password && showPassword) {
+        return ViraInputType.Default;
+    }
+    return type || ViraInputType.Default;
+}

package/dist/icons/icon-svgs/eye-closed-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const EyeClosed24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/eye-closed-24.icon.js

@@ -0,0 +1,21 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const EyeClosed24Icon = defineIcon({
+    name: 'EyeClosed24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M4 20 20 4M18.4 8.54C20 10.28 21 12 21 12s-4.03 7-9 7a6.53 6.53 0 0 1-3.16-.9M5.6 15.46C4 13.72 3 12 3 12s4.03-7 9-7c1.11 0 2.18.35 3.16.9"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/eye-open-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const EyeOpen24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/eye-open-24.icon.js

@@ -0,0 +1,22 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const EyeOpen24Icon = defineIcon({
+    name: 'EyeOpen24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M12 5c5 0 9 7 9 7s-4 7-9 7-9-7-9-7 4-7 9-7Zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z"
+            />
+        </svg>
+    `,
+});
+// xml:space="preserve"

package/dist/icons/index.d.ts

@@ -4,6 +4,8 @@ export * from './icon-svg';
 export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
+export * from './icon-svgs/eye-closed-24.icon';
+export * from './icon-svgs/eye-open-24.icon';
 export * from './icon-svgs/loader-24.icon';
 export * from './icon-svgs/loader-animated-24.icon';
 export * from './icon-svgs/options-24.icon';
@@ -14,6 +16,8 @@ export declare const allIconsByName: {
     readonly CloseX24Icon: import("./icon-svg").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg").ViraIconSvg;
+    readonly EyeClosed24Icon: import("./icon-svg").ViraIconSvg;
+    readonly EyeOpen24Icon: import("./icon-svg").ViraIconSvg;
     readonly Loader24Icon: import("./icon-svg").ViraIconSvg;
     readonly LoaderAnimated24Icon: import("./icon-svg").ViraIconSvg;
     readonly Options24Icon: import("./icon-svg").ViraIconSvg;

package/dist/icons/index.js

@@ -2,6 +2,8 @@
 import { CloseX24Icon } from './icon-svgs/close-x-24.icon';
 import { Element16Icon } from './icon-svgs/element-16.icon';
 import { Element24Icon } from './icon-svgs/element-24.icon';
+import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon';
+import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon';
 import { Loader24Icon } from './icon-svgs/loader-24.icon';
 import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon';
 import { Options24Icon } from './icon-svgs/options-24.icon';
@@ -13,6 +15,8 @@ export * from './icon-svg';
 export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
+export * from './icon-svgs/eye-closed-24.icon';
+export * from './icon-svgs/eye-open-24.icon';
 export * from './icon-svgs/loader-24.icon';
 export * from './icon-svgs/loader-animated-24.icon';
 export * from './icon-svgs/options-24.icon';
@@ -23,6 +27,8 @@ export const allIconsByName = {
     CloseX24Icon,
     Element16Icon,
     Element24Icon,
+    EyeClosed24Icon,
+    EyeOpen24Icon,
     Loader24Icon,
     LoaderAnimated24Icon,
     Options24Icon,

package/dist/styles/color.js

@@ -10,7 +10,7 @@ export function getAssertedValidColor(input) {
     catch (caught) {
         const stringInput = String(input);
         const inputForMessage = stringInput.toLowerCase().match(/\[\s*object\s+object\s*\]/)
-            ? wrapInTry({ callback: () => JSON.stringify(input), fallbackValue: stringInput })
+            ? wrapInTry(() => JSON.stringify(input), { fallbackValue: stringInput })
             : stringInput;
         throw new Error(`Invalid color: ${inputForMessage}`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "20.0.9",
+    "version": "21.0.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -32,33 +32,33 @@
         "test": "virmator test-web"
     },
     "dependencies": {
-        "@augment-vir/browser": "^23.3.4",
-        "@augment-vir/common": "^23.3.4",
-        "colorjs.io": "^0.4.5",
-        "date-vir": "^5.1.2",
-        "lit-css-vars": "^3.0.8",
-        "spa-router-vir": "^3.0.3",
-        "type-fest": "^4.10.2"
+        "@augment-vir/browser": "^26.2.1",
+        "@augment-vir/common": "^26.2.1",
+        "colorjs.io": "^0.5.0",
+        "date-vir": "^5.1.3",
+        "lit-css-vars": "^3.0.9",
+        "spa-router-vir": "^3.0.4",
+        "type-fest": "^4.14.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^23.3.4",
-        "@augment-vir/node-js": "^23.3.4",
+        "@augment-vir/browser-testing": "^26.2.1",
+        "@augment-vir/node-js": "^26.2.1",
         "@open-wc/testing": "^4.0.0",
-        "@types/chai": "^4.3.11",
+        "@types/chai": "^4.3.14",
         "@types/mocha": "^10.0.6",
         "@web/dev-server-esbuild": "^1.0.2",
-        "@web/test-runner": "^0.18.0",
+        "@web/test-runner": "^0.18.1",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.9.0",
-        "esbuild": "^0.20.1",
+        "esbuild": "^0.20.2",
         "istanbul-smart-text-reporter": "^1.1.4",
         "markdown-code-example-inserter": "^1.0.0",
-        "run-time-assertions": "^1.0.0",
-        "typedoc": "^0.25.8",
-        "typescript": "^5.3.3",
+        "run-time-assertions": "^1.2.0",
+        "typedoc": "^0.25.12",
+        "typescript": "5.3.3",
         "vite": "^4.5.0",
-        "vite-tsconfig-paths": "^4.3.1"
+        "vite-tsconfig-paths": "^4.3.2"
     },
     "peerDependencies": {
         "element-vir": ">=17"