@uh-design-system/component-library 0.2.0-alpha.0 → 0.2.1

package/dist/cjs/{uh-component-library.cjs.js → component-library.cjs.js}

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f7420801.js');
+const index = require('./index-d03b8350.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.23.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
-  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('uh-component-library.cjs.js', document.baseURI).href));
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('component-library.cjs.js', document.baseURI).href));
   const opts = {};
   if (importMeta !== "") {
     opts.resourcesUrl = new URL(".", importMeta).href;

package/dist/cjs/ds-accordion_2.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f7420801.js');
-const index$1 = require('./index-5a88e57b.js');
+const index = require('./index-d03b8350.js');
+const index$1 = require('./index-5b0b9d4c.js');
 
 const dsAccordionCss = ".ds-accordion__open-button{color:var(--ds-textColor-default, #1A1A1A);all:unset;box-sizing:border-box;display:flex;flex-direction:row;gap:8px;width:100%}.ds-accordion__open-button:hover{cursor:pointer;background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:hover.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button:active{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:active.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button:focus{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));box-shadow:0px 0px 0px 1px var(--ds-palette-black)}.ds-accordion__open-button:focus.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button.ds-accordion--default{padding:16px;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:600;line-height:27px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:12px 16px 12px 16px;line-height:24px;font-weight:600}.ds-accordion__open-button.ds-accordion--border-aligned{padding-inline:0;padding-inline:0;margin-inline:16px}.ds-accordion__open-button[aria-expanded=false]{border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--expanded{border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding:16px}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18);font-weight:400;line-height:27px;letter-spacing:var(--ds-letterSpacing-wide)}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:400;line-height:24px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{color:var(--ds-textColor-default, #1A1A1A);all:unset;border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC);display:flex;flex-direction:row;gap:8px;font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:100%}.ds-accordion__close-button:hover{cursor:pointer;background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__close-button:hover.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button:active{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__close-button:active.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button:focus{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));box-shadow:0px 0px 0px 1px var(--ds-palette-black)}.ds-accordion__close-button:focus.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button.ds-accordion--default{padding:16px;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:600;line-height:27px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:12px 16px 12px 16px;line-height:24px;font-weight:600}.ds-accordion__close-button.ds-accordion--border-aligned{padding-inline:0;padding-inline:0;margin-inline:16px}";
 const DsAccordionStyle0 = dsAccordionCss;
@@ -11,6 +11,14 @@ const DsAccordionStyle0 = dsAccordionCss;
 const DsAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.variant = 'default';
+        this.borderAligned = false;
+        this.openByDefault = false;
+        this.accordionId = 'dsaccordion';
+        this.headingLevel = 2;
+        this.useCloseButton = false;
+        this.closeButtonLabel = 'Close';
+        this.isExpanded = this.openByDefault;
         this.shouldMoveFocus = false;
         this.handleClick = (event) => {
             const isCloseButton = event.target.closest('.ds-accordion__close-button');
@@ -28,14 +36,6 @@ const DsAccordion = class {
                     break;
             }
         };
-        this.variant = 'default';
-        this.borderAligned = false;
-        this.openByDefault = false;
-        this.accordionId = 'dsaccordion';
-        this.headingLevel = 2;
-        this.useCloseButton = false;
-        this.closeButtonLabel = 'Close';
-        this.isExpanded = this.openByDefault;
     }
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
@@ -76,8 +76,6 @@ const DSFlameFillIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="
 </svg>
 `;
 
-// src/components/00-foundations/icons/categories/custom.ts
-// Set category name
 const category$8 = 'DS Custom icons';
 const icons$9 = [
     { name: 'ds_flame', component: DSFlameIcon, category: category$8 },
@@ -188,8 +186,6 @@ const SaveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const SaveFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M866-694v599H95v-771h599l172 172ZM479.76-254q43.24 0 73.74-30.26 30.5-30.27 30.5-73.5 0-43.24-30.26-73.74-30.27-30.5-73.5-30.5-43.24 0-73.74 30.26-30.5 30.27-30.5 73.5 0 43.24 30.26 73.74 30.27 30.5 73.5 30.5ZM242-575h358v-143H242v143Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/actions.ts
-// Set category name
 const category$7 = 'Actions';
 const icons$8 = [
     { name: 'archive', component: ArchiveIcon, category: category$7 },
@@ -304,8 +300,6 @@ const ArrowDropDownIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" he
 
 const FunctionIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M389-221v-80h70l128-137-127.93-138H379l-70 360q-11 56-45.75 88T179-96q-48 0-80.5-28.64Q66-153.27 66-194q0-30.65 18.3-50.32Q102.6-264 131.76-264q26.24 0 42.74 16 16.5 16 16.5 41 0 10-4 18t-11 13q3 2 7.5 3t10.5 1q12 1 21-10.5t12-29.5l71-364H160v-79h153l19-84q13-60 47.22-93.5t86.07-33.5Q513-866 545-838.5q32 27.5 32 68.5 0 32.7-18.5 52.35T510.53-698q-25.53 0-42.03-15T452-753q0-7.56 3.5-16.5 3.5-8.94 8.5-13.5-2-2-6-3.5t-8-1.5q-12-1-22 10.75T415-749l-20 94h214v79h-44l78 87 73-87h-45v-79h219v79h-68L694-438l129 137h67v80H671v-80h45l-75-82-78 82h46v80H389Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/arrows.ts
-// Set category name
 const category$6 = 'Arrows and operators';
 const icons$7 = [
     { name: 'arrow_upward', component: ArrowUpwardIcon, category: category$6 },
@@ -427,8 +421,6 @@ const AccountBalanceFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="4
 
 const ProgressActivityIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-55q-90.2 0-167.57-32.58-77.37-32.57-134.82-90.03-57.46-57.45-90.03-134.82Q55-389.8 55-480q0-89.87 32.56-167.25 32.57-77.37 89.87-135.11 57.31-57.74 134.79-90.69Q389.7-906 480-906v95q-138.33 0-234.66 96.27Q149-618.46 149-480.23 149-342 245.27-245.5t234.5 96.5Q618-149 714.5-245.34 811-341.67 811-480h95q0 90.3-33.01 167.79-33.02 77.5-90.5 134.85Q725-120 647.5-87.5 570.01-55 480-55Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/information.ts
-// Set category name
 const category$5 = 'Information';
 const icons$6 = [
     { name: 'calendar_month', component: CalendarMonthIcon, category: category$5 },
@@ -521,8 +513,6 @@ const TourIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const TourFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M187-55v-851h94v78h611l-96 225 96 225H281v323h-94Zm322.21-476Q539-531 560-552.21t21-51Q581-633 559.79-654t-51-21Q479-675 458-653.79t-21 51Q437-573 458.21-552t51 21Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/navigation.ts
-// Set category name
 const category$4 = 'Navigation';
 const icons$5 = [
     { name: 'home', component: HomeIcon, category: category$4 },
@@ -607,8 +597,6 @@ const StarIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const StarFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m196-68 75-324L19-610l332-28 129-306 129 306 332 28-252 218 76 324-285-173L196-68Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/notifications.ts
-// Set category name
 const category$3 = 'Notifications and expressions';
 const icons$4 = [
     { name: 'favorite', component: FavoriteIcon, category: category$3 },
@@ -712,8 +700,6 @@ const PictureAsPdfIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" hei
 
 const PictureAsPdfFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M353-448h37v-83h62l23-24v-75l-23-23h-99v205Zm37-120v-48h48v48h-48Zm122 120h98l23-24v-158l-23-23h-98v205Zm37-37v-131h47v131h-47Zm129 37h37v-83h50v-37h-50v-48h50v-37h-87v205ZM192-192v-731h731v731H192ZM37-37v-731h95v636h636v95H37Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/media.ts
-// Set category name
 const category$2 = 'Media and devices';
 const icons$3 = [
     { name: 'photo_camera', component: PhotoCameraIcon, category: category$2 },
@@ -765,8 +751,6 @@ const FormatItalicIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" hei
 
 const FormatBoldIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M238-175v-611h289q75 0 126 48.5T704-622q0 30-17.5 67.5T623-497v8q57 19 78.5 63t21.5 80q0 60-50.5 115.5T533-175H238Zm111-90h163q23 0 58.5-20t35.5-70q0-49-35-69.5T514-445H349v180Zm0-266h156q29 0 57.5-23t28.5-60q0-34-26.5-59T504-698H349v167Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/text.ts
-// Set category name
 const category$1 = 'Text formatting';
 const icons$2 = [
     { name: 'format_quote', component: FormatQuoteIcon, category: category$1 },
@@ -823,8 +807,6 @@ const BadgeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48
 
 const BadgeFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M232-238h239v-14q0-18-9-32t-23-19q-32-11-50-14.5t-35-3.5q-19 0-40.5 4.5T265-303q-15 5-24 19t-9 32v14Zm336-67h170v-50H568v50Zm-214-50q22.5 0 38.25-15.75T408-409q0-22.5-15.75-38.25T354-463q-22.5 0-38.25 15.75T300-409q0 22.5 15.75 38.25T354-355Zm214-63h170v-50H568v50ZM55-55v-651h310v-200h231v200h310v651H55Zm397-553h57v-211h-57v211Z"/></svg>`;
 
-// src/components/00-foundations/icons/categories/users.ts
-// Set category name
 const category = 'Users and avatars';
 const icons$1 = [
     { name: 'account_circle', component: AccountCircleIcon, category: category },
@@ -852,7 +834,6 @@ const icons$1 = [
     { name: 'badge_fill', component: BadgeFillIcon, category: category },
 ];
 
-// src/components/00-foundations/icons/iconList.ts
 const icons = [
     ...icons$9,
     ...icons$8,
@@ -871,15 +852,12 @@ const DsIconStyle0 = dsIconCss;
 const DsIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.name = undefined;
-        this.colour = undefined;
         this.size = '1.5rem';
         this.title = 'Icon';
         this.role = 'img';
         this.hidden = true;
         this.message = '';
     }
-    // get the icon from the icon list
     getIcon() {
         const selectedIcon = icons.find(icon => icon.name === this.name);
         if (!selectedIcon) {
@@ -892,18 +870,15 @@ const DsIcon = class {
         }
         return svgElement ? svgElement.outerHTML : '';
     }
-    // parse the svg string to an svg element
     parseSvg(svgString) {
         const parser = new DOMParser();
         const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
         return svgDoc.querySelector('svg');
     }
-    // get the colour of the icon
     getIconColour() {
         const colour = this.colour ? `var(--${this.colour})` : 'currentColor';
         return colour;
     }
-    // set the attributes of the icon
     setIconAttributes(svgElement) {
         const size = this.size || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
@@ -911,7 +886,6 @@ const DsIcon = class {
         const title = this.title || '';
         svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
         svgElement.setAttribute('role', role);
-        // if title is available, insert it into the svg element
         const titleText = title || 'Icon';
         const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
         titleElement.textContent = titleText;

package/dist/cjs/ds-button_2.cjs.entry.js

@@ -2,21 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f7420801.js');
-const index$1 = require('./index-5a88e57b.js');
+const index = require('./index-d03b8350.js');
+const index$1 = require('./index-5b0b9d4c.js');
 
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
 const inheritAttributes = (el, attributes = []) => {
     const attributeObject = {};
     attributes.forEach(attr => {
@@ -30,13 +18,6 @@ const inheritAttributes = (el, attributes = []) => {
     });
     return attributeObject;
 };
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * List of available ARIA attributes + `role`.
- * Removed deprecated attributes.
- * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
- */
 const ariaAttributes = [
     'role',
     'aria-activedescendant',
@@ -90,15 +71,6 @@ const ariaAttributes = [
     'aria-valuenow',
     'aria-valuetext',
 ];
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * Returns an array of aria attributes that should be copied from
- * the shadow host element to a target within the light DOM.
- * @param el The element that the attributes should be copied from.
- * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
- * Use this in instances where we manually specify aria attributes on the `<Host>` element.
- */
 const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = [...ariaAttributes];
     if (ignoreList && ignoreList.length > 0) {
@@ -115,9 +87,17 @@ const DsButton = class {
         index.registerInstance(this, hostRef);
         this.inheritedAttributes = {};
         this.pressedKeys = new Set();
+        this.value = '';
+        this.variant = 'primary';
+        this.colour = 'blue';
+        this.size = 'medium';
+        this.fontWeight = 'normal';
+        this.icon = '';
+        this.iconPosition = 'start';
+        this.type = 'button';
+        this.disabled = false;
+        this.ariaDisabled = 'false';
         this.handleKeyDown = (event) => {
-            // Exit early when a key is held down
-            // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
             if (event.repeat) {
                 return;
             }
@@ -140,16 +120,6 @@ const DsButton = class {
                     break;
             }
         };
-        this.value = '';
-        this.variant = 'primary';
-        this.colour = 'blue';
-        this.size = 'medium';
-        this.fontWeight = 'normal';
-        this.icon = '';
-        this.iconPosition = 'start';
-        this.type = 'button';
-        this.disabled = false;
-        this.ariaDisabled = 'false';
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el, ['aria-disabled'])), inheritAttributes(this.el, [
@@ -166,6 +136,7 @@ const DsButton = class {
         ]));
     }
     render() {
+        console.log('render');
         const classes = index$1.classNames(`${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
@@ -173,7 +144,7 @@ const DsButton = class {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (index.h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), index.h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), index.h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
+        return (index.h("button", Object.assign({ key: 'd85ee424afafcb437fa873e69b7554e315e4cad5', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), index.h("slot", { key: 'c21dc9317ae1970d8e5fcead12b4041a8dc13af0', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: 'cc993dd0b2a12b3243bc8863d754a0efa3b6f1f4', name: this.icon, size: iconSize })), this.value && index.h("span", { key: 'b8a7bcac21782fd898192d98c605c0eacbfff882', class: "button-value" }, this.value), index.h("slot", { key: 'e4766fc18983798416533173ceddcbe3c80779ba', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'f308fb96c0b0b06036975df25fc5fba59dffe301', name: this.icon, size: iconSize }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ds-text-input.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f7420801.js');
-const index$1 = require('./index-5a88e57b.js');
+const index = require('./index-d03b8350.js');
+const index$1 = require('./index-5b0b9d4c.js');
 
 function* idGenerator(id) {
     let currentId = 1;
@@ -33,6 +33,13 @@ const DsTextInput = class {
         this.visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
         this.successTextId = successTextIdGenerator.next().value;
         this.errorTextId = errorTextIdGenerator.next().value;
+        this.id = 'input';
+        this.icon = '';
+        this.type = 'text';
+        this.hasFocus = false;
+        this.clearButtonVisible = false;
+        this.passwordInputVisible = false;
+        this.inputActive = false;
         this.onActionButtonClicked = (e) => {
             e.stopPropagation();
             switch (this.type) {
@@ -44,35 +51,6 @@ const DsTextInput = class {
                     return;
             }
         };
-        this.label = undefined;
-        this.placeholder = undefined;
-        this.id = 'input';
-        this.name = undefined;
-        this.disabled = undefined;
-        this.required = undefined;
-        this.readonly = undefined;
-        this.value = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.maxlength = undefined;
-        this.pattern = undefined;
-        this.autocomplete = undefined;
-        this.errorText = undefined;
-        this.successText = undefined;
-        this.assistiveText = undefined;
-        this.actionButtonAriaLabel = undefined;
-        this.hiddenAssistiveText = undefined;
-        this.prefixText = undefined;
-        this.suffixText = undefined;
-        this.icon = '';
-        this.type = 'text';
-        this.ariaLabel = undefined;
-        this.ariaLabelledBy = undefined;
-        this.ariaDescribedby = undefined;
-        this.hasFocus = false;
-        this.clearButtonVisible = false;
-        this.passwordInputVisible = false;
-        this.inputActive = false;
     }
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);