@neu-ui/web-components

{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "index.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./src/index.js\"" } } ] }, { "kind": "javascript-module", "path": "src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/button/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/label/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/input/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/textarea/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/checkbox/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./components/card/index.js\"" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "\"./styles/index.js\"" } } ] }, { "kind": "javascript-module", "path": "test/test.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/styles/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "neumorphicDarkStyles", "declaration": { "name": "neumorphicDarkStyles", "module": "\"./neu-ui-dark.js\"" } }, { "kind": "js", "name": "neumorphicLightStyles", "declaration": { "name": "neumorphicLightStyles", "module": "\"./neu-ui-light.js\"" } }, { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "\"./styles.js\"" } } ] }, { "kind": "javascript-module", "path": "src/styles/neu-ui-dark.js", "declarations": [ { "kind": "variable", "name": "neumorphicDarkStyles", "default": "css` ${variables} :root { /* Drop shadow variations */ --drop-dark-shadow-1: -2.5px -2.5px 5px rgba(250, 251, 255, 0.4), 2.5px 2.5px 5px #35373e; --drop-dark-shadow-2: -5px -5px 10px rgba(250, 251, 255, 0.4), 5px 5px 10px #35373e; --drop-dark-shadow-3: -10px -10px 20px rgba(250, 251, 255, 0.4), 10px 10px 20px #35373e; --drop-dark-shadow-4: -15px -15px 30px rgba(250, 251, 255, 0.4), 15px 15px 30px #35373e; /* Inner shadow variations */ --inner-dark-shadow-1: inset 2.5px 2.5px 5px #35373e; --inner-dark-shadow-2: inset -5px -5px 10px rgba(250, 251, 255, 0.1), inset 5px 5px 10px #35373e; --inner-dark-shadow-3: inset -10px -10px 20px rgba(250, 251, 255, 0.1), inset 10px 10px 20px #35373e; --inner-dark-shadow-4: inset -15px -15px 30px rgba(250, 251, 255, 0.1), inset 15px 15px 30px #35373e; /* Default shadow depth */ --drop-dark-shadow: var(--drop-dark-shadow-1); --inner-dark-shadow: var(--inner-dark-shadow-1); } `" } ], "exports": [ { "kind": "js", "name": "neumorphicDarkStyles", "declaration": { "name": "neumorphicDarkStyles", "module": "src/styles/neu-ui-dark.js" } } ] }, { "kind": "javascript-module", "path": "src/styles/neu-ui-light.js", "declarations": [ { "kind": "variable", "name": "neumorphicLightStyles", "default": "css` ${variables} :host { /* Drop shadow variations */ --drop-light-shadow-1: -2.5px -2.5px 5px #fafbff, 2.5px 2.5px 5px #a6abbd; --drop-light-shadow-2: -5px -5px 10px #fafbff, 5px 5px 10px #a6abbd; --drop-light-shadow-3: -10px -10px 20px #fafbff, 10px 10px 20px #a6abbd; --drop-light-shadow-4: -15px -15px 30px #fafbff, 15px 15px 30px #a6abbd; /* Inner shadow variations */ --inner-light-shadow-1: inset -2.5px -2.5px 5px #fafbff, inset 2.5px 2.5px 5px #a6abbd; --inner-light-shadow-2: inset -5px -5px 10px #fafbff, inset 5px 5px 10px #a6abbd; --inner-light-shadow-3: inset -10px -10px 20px #fafbff, inset 10px 10px 20px #a6abbd; --inner-light-shadow-4: inset -15px -15px 30px #fafbff, inset 15px 15px 30px #a6abbd; /* Default shadow depth */ --drop-light-shadow: var(--drop-light-shadow-1); --inner-light-shadow: var(--inner-light-shadow-1); } `" } ], "exports": [ { "kind": "js", "name": "neumorphicLightStyles", "declaration": { "name": "neumorphicLightStyles", "module": "src/styles/neu-ui-light.js" } } ] }, { "kind": "javascript-module", "path": "src/styles/styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` :host { --font-family: \"Roboto\", sans-serif; --font-size: 1rem; --font-size-small: 0.875rem; --font-size-large: 1.25rem; --font-weight: 400; --line-height: 1.5; --gap: 0.25rem; --color: #212529; --color-white: #ffffff; --border-radius: 0.375rem; --padding: 0.375rem 0.75rem; --padding-small: 0.25rem 0.55rem; --padding-large: 0.5rem 1rem; --border: 1px solid #e7ebf0; --background-light: linear-gradient( 317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18% ), #e7ebf0; --background-primary: linear-gradient( 317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18% ), #2485FF; --background-blend-mode: soft-light, normal; --body-background-color: #e7ebf0; // Add your new color variables here --color-primary': '#2485FF', // Primary blue } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/styles/styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.definition.js", "declarations": [ { "kind": "variable", "name": "CardDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-card\", template, styles, attributes: [], }" } ], "exports": [ { "kind": "js", "name": "CardDefinition", "declaration": { "name": "CardDefinition", "module": "src/components/card/card.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.js", "declarations": [ { "kind": "class", "description": "", "name": "Card", "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "Card", "declaration": { "name": "Card", "module": "src/components/card/card.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/card/card.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/card/card.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/card/card.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; position: relative; width: 100%; } :host .card { display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--gap) * 4); width: auto; font-size: var(--font-size); font-weight: var(--font-weight); font-family: var(--font-family); line-height: var(--line-height); color: var(--color); text-decoration: none; vertical-align: middle; padding: var(--padding); border-radius: var(--border-radius); border: var(--border); background: var(--background-light); background-blend-mode: var(--background-blend-mode); box-shadow: var(--drop-light-shadow); /* Default drop shadow */ } :host .card:focus-visible { outline: none; box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .card .header { border-bottom: 1px solid black; width: 100%; } :host .card .footer { border-top: 1px solid black; width: 100%; } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/card/card.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <div class=\"card\" part=\"card\"> <span class=\"avatar\" part=\"avatar\"> <slot name=\"avatar\"></slot> </span> <span class=\"header\" part=\"header\"> <slot name=\"header\"></slot> </span> <slot class=\"content\" part=\"content\"></slot> <span class=\"footer\" part=\"footer\"> <slot name=\"footer\"></slot> </span> </div> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/card/card.template.js" } } ] }, { "kind": "javascript-module", "path": "src/components/card/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "Card", "declaration": { "name": "Card", "module": "\"./card.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.definition.js", "declarations": [ { "kind": "variable", "name": "ButtonDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-button\", template, styles, attributes: [ { attribute: \"disabled\", property: \"disabled\", mode: \"boolean\" }, { attribute: \"expand\", property: \"expand\", mode: \"boolean\" }, { attribute: \"size\", property: \"size\", mode: \"reflect\" }, ], }" } ], "exports": [ { "kind": "js", "name": "ButtonDefinition", "declaration": { "name": "ButtonDefinition", "module": "src/components/button/button.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.js", "declarations": [ { "kind": "class", "description": "", "name": "Button", "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "expand", "type": { "text": "boolean" }, "default": "false" } ], "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "Button", "declaration": { "name": "Button", "module": "src/components/button/button.js" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/button/button.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/button/button.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/button/button.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; position: relative; width: 100%; cursor: pointer; } :host .button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--gap); width: auto; font-size: var(--font-size); font-weight: var(--font-weight); font-family: var(--font-family); line-height: var(--line-height); color: var(--color); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; padding: var(--padding); border-radius: var(--border-radius); border: var(--border); background: var(--background-light); background-blend-mode: var(--background-blend-mode); box-shadow: var(--drop-light-shadow); /* Default drop shadow */ } :host .button:active:not([disabled]) { box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .button:focus-visible { outline: none; box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .button .start { } :host .button .content { display: flex; justify-content: center; flex: 1; } :host .button .end { } /* Disabled Style */ :host .button[disabled] { cursor: not-allowed; opacity: 0.6; } /* Expand Style */ :host .button[expand] { width: 100%; } /* Size Style */ :host .button[size=\"s\"] { padding: var(--padding-small); font-size: var(--font-size-small); } :host .button[size=\"l\"] { padding: var(--padding-large); font-size: var(--font-size-large); } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/button/button.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <button type=\"button\" class=\"button\" part=\"button\" ?disabled=\"${(x) => x.disabled}\" ?expand=\"${(x) => x.expand}\" size=\"${(x) => x.size}\" > <slot name=\"start\" class=\"start\" part=\"start\"></slot> <slot class=\"content\" part=\"content\"></slot> <slot name=\"end\" class=\"end\" part=\"end\"></slot> </button> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/button/button.template.js" } } ] }, { "kind": "javascript-module", "path": "src/components/button/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "Button", "declaration": { "name": "Button", "module": "\"./button.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.definition.js", "declarations": [ { "kind": "variable", "name": "CheckboxDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-checkbox\", template, styles, attributes: [ { attribute: \"disabled\", property: \"disabled\", mode: \"boolean\" }, { attribute: \"checked\", property: \"checked\", mode: \"boolean\" }, { attribute: \"value\", property: \"value\", mode: \"reflect\" }, { attribute: \"id\", property: \"id\", mode: \"reflect\" }, { attribute: \"size\", property: \"size\", mode: \"reflect\" }, ], }" } ], "exports": [ { "kind": "js", "name": "CheckboxDefinition", "declaration": { "name": "CheckboxDefinition", "module": "src/components/checkbox/checkbox.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.js", "declarations": [ { "kind": "class", "description": "", "name": "Checkbox", "members": [ { "kind": "method", "name": "handleChange", "parameters": [ { "name": "event" } ] }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "default": "\"\"" } ], "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "Checkbox", "declaration": { "name": "Checkbox", "module": "src/components/checkbox/checkbox.js" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/checkbox/checkbox.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/checkbox/checkbox.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; flex-direction: row-reverse; gap: var(--gap); position: relative; width: auto; cursor: pointer; } :host .checkbox-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); position: relative; } :host .checkbox { appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: var(--border); background: var(--background-light); background-blend-mode: var(--background-blend-mode); box-shadow: var(--drop-light-shadow); /* Default drop shadow */ cursor: pointer; } :host .tick-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.0625rem; font-size: 14px; fill: var(--color-white); display: none; pointer-events: none; } :host .checkbox:checked + .tick-icon { display: block; } :host .checkbox:checked { background: var(--background-primary); background-blend-mode: soft-light, normal; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset -2.5px -2.5px 5px rgba(250, 251, 255, 0.1), inset 2.5px 2.5px 5px #366cbd; } :host .checkbox:focus-visible { outline: none; box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .checkbox:checked:focus-visible { background: var(--background-primary); background-blend-mode: soft-light, normal; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset -2.5px -2.5px 5px rgba(250, 251, 255, 0.1), inset 2.5px 2.5px 5px #366cbd; outline: none; } :host .checkbox[disabled] { cursor: not-allowed; opacity: 0.6; } /* Size Style */ :host([size=\"s\"]) { font-size: var(--font-size-small); } :host .checkbox[size=\"s\"] { width: 1rem; height: 1rem; font-size: var(--font-size-small); } :host([size=\"l\"]) { font-size: var(--font-size-large); } :host .checkbox[size=\"l\"] { width: 1.5rem; height: 1.5rem; font-size: var(--font-size-large); } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/checkbox/checkbox.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <slot name=\"label\"></slot> <div class=\"checkbox-wrapper\" part=\"checkbox-wrapper\" ?disabled=\"${(x) => x.disabled}\" > <slot name=\"start\"></slot> <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\" :checked=\"${(x) => x.checked}\" id=\"${(x) => x.id}\" ?disabled=\"${(x) => x.disabled}\" size=\"${(x) => x.size}\" @change=\"${(x, c) => x.handleChange(c.event)}\" /> <svg class=\"tick-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" >  <path d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\" /> </svg> <slot name=\"end\"></slot> </div> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/checkbox/checkbox.template.js" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "Checkbox", "declaration": { "name": "Checkbox", "module": "\"./Checkbox.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/input/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "Input", "declaration": { "name": "Input", "module": "\"./input.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.definition.js", "declarations": [ { "kind": "variable", "name": "InputDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-input\", template, styles, attributes: [ { attribute: \"disabled\", property: \"disabled\", mode: \"boolean\" }, { attribute: \"required\", property: \"required\", mode: \"boolean\" }, { attribute: \"value\", property: \"value\", mode: \"reflect\" }, { attribute: \"placeholder\", property: \"placeholder\", mode: \"reflect\" }, { attribute: \"type\", property: \"type\", mode: \"reflect\" }, { attribute: \"id\", property: \"id\", mode: \"reflect\" }, { attribute: \"size\", property: \"size\", mode: \"reflect\" }, ], }" } ], "exports": [ { "kind": "js", "name": "InputDefinition", "declaration": { "name": "InputDefinition", "module": "src/components/input/input.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.js", "declarations": [ { "kind": "class", "description": "", "name": "Input", "members": [ { "kind": "field", "name": "validInputTypes", "type": { "text": "array" }, "static": true, "default": "[ \"text\", \"email\", \"password\", \"number\", \"tel\", \"url\", \"search\", \"date\", \"datetime-local\", \"month\", \"week\", \"time\", \"color\", ]" }, { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event" } ] }, { "kind": "method", "name": "handleChange" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "type", "type": { "text": "string" }, "default": "\"text\"" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "default": "\"\"" } ], "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "Input", "declaration": { "name": "Input", "module": "src/components/input/input.js" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/input/input.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/input/input.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/input/input.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; flex-direction: column; gap: var(--gap); position: relative; width: 100%; cursor: text; } :host .input-wrapper { position: relative; width: 100%; } :host .input { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); font-size: var(--font-size); font-weight: var(--font-weight); font-family: var(--font-family); line-height: var(--line-height); color: var(--color); cursor: text; padding: var(--padding); border-radius: var(--border-radius); border: var(--border); background: var(--background-light); background-blend-mode: var(--background-blend-mode); box-shadow: var(--drop-light-shadow); /* Default drop shadow */ box-sizing: border-box; width: 100%; } :host .input:focus-visible { outline: none; box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .input[disabled] { cursor: not-allowed; opacity: 0.6; } /* Size Style */ :host .input[size=\"s\"] { padding: var(--padding-small); font-size: var(--font-size-small); } :host .input[size=\"l\"] { padding: var(--padding-large); font-size: var(--font-size-large); } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/input/input.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <slot name=\"label\"></slot> <div class=\"input-wrapper\" part=\"input-wrapper\" ?disabled=\"${(x) => x.disabled}\" > <slot name=\"start\"></slot> <input class=\"input\" part=\"input\" :value=\"${(x) => x.value}\" placeholder=\"${(x) => x.placeholder}\" type=\"${(x) => x.type}\" id=\"${(x) => x.id}\" ?required=\"${(x) => x.required}\" ?disabled=\"${(x) => x.disabled}\" size=\"${(x) => x.size}\" @input=\"${(x, c) => x.handleInput(c.event)}\" @change=\"${(x, c) => x.handleChange(c.event)}\" /> <slot name=\"end\"></slot> </div> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/input/input.template.js" } } ] }, { "kind": "javascript-module", "path": "src/components/label/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "Label", "declaration": { "name": "Label", "module": "\"./label.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/label/label.definition.js", "declarations": [ { "kind": "variable", "name": "LabelDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-label\", template, styles, attributes: [ { attribute: \"disabled\", property: \"disabled\", mode: \"boolean\" }, { attribute: \"required\", property: \"required\", mode: \"boolean\" }, { attribute: \"for\", property: \"for\", mode: \"reflect\" }, { attribute: \"size\", property: \"size\", mode: \"reflect\" }, ], }" } ], "exports": [ { "kind": "js", "name": "LabelDefinition", "declaration": { "name": "LabelDefinition", "module": "src/components/label/label.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/label/label.js", "declarations": [ { "kind": "class", "description": "", "name": "Label", "members": [ { "kind": "method", "name": "handleClick" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "for", "type": { "text": "string" }, "default": "\"\"" } ], "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "Label", "declaration": { "name": "Label", "module": "src/components/label/label.js" } } ] }, { "kind": "javascript-module", "path": "src/components/label/label.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/label/label.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/label/label.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/label/label.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/label/label.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} ${neumorphicDarkStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; position: relative; width: auto; cursor: pointer; } :host .label { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); font-size: var(--font-size); font-weight: var(--font-weight); font-family: var(--font-family); line-height: var(--line-height); color: var(--color); cursor: pointer; } :host .label[disabled] { cursor: not-allowed; opacity: 0.6; } /* Size Style */ :host .label[size=\"s\"] { font-size: var(--font-size-small); } :host .label[size=\"l\"] { font-size: var(--font-size-large); } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/label/label.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/label/label.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <label class=\"label\" part=\"label\" ?disabled=\"${(x) => x.disabled}\" ?required=\"${(x) => x.required}\" for=\"${(x) => x.for}\" size=\"${(x) => x.size}\" @click=\"${(x, c) => x.handleClick(c.event)}\" > <slot></slot> <span part=\"asterisk\" class=\"asterisk\" ?hidden=\"${(x) => !x.required}\" >*</span > </label> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/label/label.template.js" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "TextArea", "declaration": { "name": "TextArea", "module": "\"./textarea.js\"" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.definition.js", "declarations": [ { "kind": "variable", "name": "TextAreaDefinition", "type": { "text": "object" }, "default": "{ name: \"neu-textarea\", template, styles, attributes: [ { attribute: \"disabled\", property: \"disabled\", mode: \"boolean\" }, { attribute: \"required\", property: \"required\", mode: \"boolean\" }, { attribute: \"value\", property: \"value\", mode: \"reflect\" }, { attribute: \"placeholder\", property: \"placeholder\", mode: \"reflect\" }, { attribute: \"id\", property: \"id\", mode: \"reflect\" }, ], }" } ], "exports": [ { "kind": "js", "name": "TextAreaDefinition", "declaration": { "name": "TextAreaDefinition", "module": "src/components/textarea/textarea.definition.js" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.js", "declarations": [ { "kind": "class", "description": "", "name": "TextArea", "members": [ { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event" } ] }, { "kind": "method", "name": "handleChange" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "default": "\"\"" } ], "superclass": { "name": "FASTElement", "package": "@microsoft/fast-element" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "TextArea", "declaration": { "name": "TextArea", "module": "src/components/textarea/textarea.js" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.spec.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.stories.js", "declarations": [ { "kind": "function", "name": "Default" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "module": "src/components/textarea/textarea.stories.js" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "src/components/textarea/textarea.stories.js" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.styles.js", "declarations": [ { "kind": "variable", "name": "styles", "default": "css` ${variables} ${neumorphicLightStyles} :not(:defined) { visibility: hidden; } :host { display: inline-flex; flex-direction: column; gap: var(--gap); position: relative; width: 100%; cursor: text; } :host .textarea-wrapper { position: relative; width: 100%; } :host .textarea { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); font-size: var(--font-size); font-weight: var(--font-weight); font-family: var(--font-family); line-height: var(--line-height); color: var(--color); cursor: text; padding: var(--padding); border-radius: var(--border-radius); border: var(--border); background: var(--background-light); background-blend-mode: var(--background-blend-mode); box-shadow: var(--drop-light-shadow); /* Default drop shadow */ box-sizing: border-box; width: 100%; } :host .textarea:focus-visible { outline: none; box-shadow: var(--inner-light-shadow); /* Default inner shadow */ } :host .textarea[disabled] { cursor: not-allowed; opacity: 0.6; } `" } ], "exports": [ { "kind": "js", "name": "styles", "declaration": { "name": "styles", "module": "src/components/textarea/textarea.styles.js" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.template.js", "declarations": [ { "kind": "variable", "name": "template", "default": "html` <slot name=\"label\"></slot> <div class=\"textarea-wrapper\" part=\"textarea-wrapper\" ?disabled=\"${(x) => x.disabled}\" > <slot name=\"start\"></slot> <textarea class=\"textarea\" part=\"textarea\" :value=\"${(x) => x.value}\" placeholder=\"${(x) => x.placeholder}\" id=\"${(x) => x.id}\" ?required=\"${(x) => x.required}\" ?disabled=\"${(x) => x.disabled}\" @input=\"${(x, c) => x.handleInput(c.event)}\" @change=\"${(x, c) => x.handleChange(c.event)}\" ></textarea> <slot name=\"end\"></slot> </div> `" } ], "exports": [ { "kind": "js", "name": "template", "declaration": { "name": "template", "module": "src/components/textarea/textarea.template.js" } } ] } ] }