@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/components/p-a15ddd42.js

@@ -0,0 +1,138 @@
+var FeedbackColors;
+(function (FeedbackColors) {
+    FeedbackColors["Information"] = "information";
+    FeedbackColors["Warning"] = "warning";
+    FeedbackColors["Success"] = "success";
+    FeedbackColors["Error"] = "error";
+    FeedbackColors["Neutral"] = "neutral";
+})(FeedbackColors || (FeedbackColors = {}));
+var DeprecatedSemanticColors;
+(function (DeprecatedSemanticColors) {
+    DeprecatedSemanticColors["Neutral"] = "neutral";
+    DeprecatedSemanticColors["Primary"] = "primary";
+    DeprecatedSemanticColors["Secondary"] = "secondary";
+    DeprecatedSemanticColors["Success"] = "success";
+    DeprecatedSemanticColors["Error"] = "error";
+})(DeprecatedSemanticColors || (DeprecatedSemanticColors = {}));
+var SemanticSizes;
+(function (SemanticSizes) {
+    SemanticSizes["ExtraSmall"] = "xs";
+    SemanticSizes["Small"] = "sm";
+    SemanticSizes["Medium"] = "md";
+    SemanticSizes["Large"] = "lg";
+    SemanticSizes["ExtraLarge"] = "xl";
+})(SemanticSizes || (SemanticSizes = {}));
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["ExtraSmall"] = "xs";
+    ButtonSize["Small"] = "sm";
+    ButtonSize["Medium"] = "md";
+    ButtonSize["Large"] = "lg";
+})(ButtonSize || (ButtonSize = {}));
+var ButtonEmphasis;
+(function (ButtonEmphasis) {
+    ButtonEmphasis["High"] = "high";
+    ButtonEmphasis["Medium"] = "medium";
+    ButtonEmphasis["Low"] = "low";
+    ButtonEmphasis["Lower"] = "lower";
+})(ButtonEmphasis || (ButtonEmphasis = {}));
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["Submit"] = "submit";
+    ButtonType["Reset"] = "reset";
+    ButtonType["Button"] = "button";
+})(ButtonType || (ButtonType = {}));
+var LoaderColors;
+(function (LoaderColors) {
+    LoaderColors["High"] = "brand";
+    LoaderColors["Low"] = "white";
+})(LoaderColors || (LoaderColors = {}));
+var FieldLabelPlacement;
+(function (FieldLabelPlacement) {
+    FieldLabelPlacement["Before"] = "before";
+    FieldLabelPlacement["After"] = "after";
+})(FieldLabelPlacement || (FieldLabelPlacement = {}));
+var TextInputAutocomplete;
+(function (TextInputAutocomplete) {
+    TextInputAutocomplete["On"] = "on";
+    TextInputAutocomplete["Off"] = "off";
+    TextInputAutocomplete["Section"] = "section-*";
+    TextInputAutocomplete["Shipping"] = "shipping";
+    TextInputAutocomplete["Billing"] = "billing";
+    TextInputAutocomplete["Home"] = "home";
+    TextInputAutocomplete["Work"] = "work";
+    TextInputAutocomplete["Mobile"] = "mobile";
+    TextInputAutocomplete["Fax"] = "fax";
+    TextInputAutocomplete["Pager"] = "pager";
+    TextInputAutocomplete["Tel"] = "tel";
+    TextInputAutocomplete["TelCountryCode"] = "tel-country-code";
+    TextInputAutocomplete["TelNational"] = "tel-national";
+    TextInputAutocomplete["TelAreaCode"] = "tel-area-code";
+    TextInputAutocomplete["TelLocal"] = "tel-local";
+    TextInputAutocomplete["TelLocalPrefix"] = "tel-local-prefix";
+    TextInputAutocomplete["TelLocalSuffix"] = "tel-local-suffix";
+    TextInputAutocomplete["TelExtension"] = "tel-extension";
+    TextInputAutocomplete["Email"] = "email";
+    TextInputAutocomplete["IMProtocol"] = "impp";
+    TextInputAutocomplete["Name"] = "name";
+    TextInputAutocomplete["HonorificPrefix"] = "honorific-prefix";
+    TextInputAutocomplete["GivenName"] = "given-name";
+    TextInputAutocomplete["AdditionalName"] = "additional-name";
+    TextInputAutocomplete["FamilyName"] = "family-name";
+    TextInputAutocomplete["HonorificSuffix"] = "honorific-suffix";
+    TextInputAutocomplete["Nickname"] = "nickname";
+    TextInputAutocomplete["Username"] = "username";
+    TextInputAutocomplete["NewPassword"] = "new-password";
+    TextInputAutocomplete["CurrentPassword"] = "current-password";
+    TextInputAutocomplete["OneTimeCode"] = "one-time-code";
+    TextInputAutocomplete["OrganizationTitle"] = "organization-title";
+    TextInputAutocomplete["Organization"] = "organization";
+    TextInputAutocomplete["StreetAddress"] = "street-address";
+    TextInputAutocomplete["AddressLine1"] = "address-line1";
+    TextInputAutocomplete["AddressLine2"] = "address-line2";
+    TextInputAutocomplete["AddressLine3"] = "address-line3";
+    TextInputAutocomplete["AddressLevel4"] = "address-level4";
+    TextInputAutocomplete["AddressLevel3"] = "address-level3";
+    TextInputAutocomplete["AddressLevel2"] = "address-level2";
+    TextInputAutocomplete["AddressLevel1"] = "address-level1";
+    TextInputAutocomplete["Country"] = "country";
+    TextInputAutocomplete["CountryName"] = "country-name";
+    TextInputAutocomplete["PostalCode"] = "postal-code";
+    TextInputAutocomplete["CCName"] = "cc-name";
+    TextInputAutocomplete["CCGivenName"] = "cc-given-name";
+    TextInputAutocomplete["CCAdditionalName"] = "cc-additional-name";
+    TextInputAutocomplete["CCFamilyName"] = "cc-family-name";
+    TextInputAutocomplete["CCNumber"] = "cc-number";
+    TextInputAutocomplete["CCExp"] = "cc-exp";
+    TextInputAutocomplete["CCExpMonth"] = "cc-exp-month";
+    TextInputAutocomplete["CCExpYear"] = "cc-exp-year";
+    TextInputAutocomplete["CCCSC"] = "cc-csc";
+    TextInputAutocomplete["CCType"] = "cc-type";
+    TextInputAutocomplete["TransactionCurrency"] = "transaction-currency";
+    TextInputAutocomplete["TransactionAmount"] = "transaction-amount";
+    TextInputAutocomplete["Language"] = "language";
+    TextInputAutocomplete["Bday"] = "bday";
+    TextInputAutocomplete["BdayDay"] = "bday-day";
+    TextInputAutocomplete["BdayMonth"] = "bday-month";
+    TextInputAutocomplete["BdayYear"] = "bday-year";
+    TextInputAutocomplete["Sex"] = "sex";
+    TextInputAutocomplete["Url"] = "url";
+    TextInputAutocomplete["Photo"] = "photo";
+})(TextInputAutocomplete || (TextInputAutocomplete = {}));
+
+const constants = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get FeedbackColors () { return FeedbackColors; },
+    get DeprecatedSemanticColors () { return DeprecatedSemanticColors; },
+    get SemanticSizes () { return SemanticSizes; },
+    get ButtonSize () { return ButtonSize; },
+    get ButtonEmphasis () { return ButtonEmphasis; },
+    get ButtonType () { return ButtonType; },
+    get LoaderColors () { return LoaderColors; },
+    get FieldLabelPlacement () { return FieldLabelPlacement; },
+    get TextInputAutocomplete () { return TextInputAutocomplete; }
+});
+
+export { ButtonSize as B, FeedbackColors as F, SemanticSizes as S, constants as c };
+
+//# sourceMappingURL=p-a15ddd42.js.map

package/dist/components/p-a15ddd42.js.map

@@ -0,0 +1 @@
+{"file":"p-a15ddd42.js","mappings":"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","names":[],"sources":["src/utils/constants.ts"],"sourcesContent":["export enum FeedbackColors {\n  Information = 'information',\n  Warning = 'warning',\n  Success = 'success',\n  Error = 'error',\n  Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n  Neutral = 'neutral',\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Success = 'success',\n  Error = 'error',\n}\nexport enum SemanticSizes {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\nexport enum ButtonEmphasis {\n  High = 'high',\n  Medium = 'medium',\n  Low = 'low',\n  Lower = 'lower',\n}\nexport enum ButtonType {\n  Submit = 'submit',\n  Reset = 'reset',\n  Button = 'button',\n}\nexport enum LoaderColors {\n  High = 'brand',\n  Low = 'white',\n}\nexport enum FieldLabelPlacement {\n  Before = 'before',\n  After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n  On = 'on',\n  Off = 'off',\n  Section = 'section-*',\n  Shipping = 'shipping',\n  Billing = 'billing',\n  Home = 'home',\n  Work = 'work',\n  Mobile = 'mobile',\n  Fax = 'fax',\n  Pager = 'pager',\n  Tel = 'tel',\n  TelCountryCode = 'tel-country-code',\n  TelNational = 'tel-national',\n  TelAreaCode = 'tel-area-code',\n  TelLocal = 'tel-local',\n  TelLocalPrefix = 'tel-local-prefix',\n  TelLocalSuffix = 'tel-local-suffix',\n  TelExtension = 'tel-extension',\n  Email = 'email',\n  IMProtocol = 'impp',\n  Name = 'name',\n  HonorificPrefix = 'honorific-prefix',\n  GivenName = 'given-name',\n  AdditionalName = 'additional-name',\n  FamilyName = 'family-name',\n  HonorificSuffix = 'honorific-suffix',\n  Nickname = 'nickname',\n  Username = 'username',\n  NewPassword = 'new-password',\n  CurrentPassword = 'current-password',\n  OneTimeCode = 'one-time-code',\n  OrganizationTitle = 'organization-title',\n  Organization = 'organization',\n  StreetAddress = 'street-address',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  AddressLevel4 = 'address-level4',\n  AddressLevel3 = 'address-level3',\n  AddressLevel2 = 'address-level2',\n  AddressLevel1 = 'address-level1',\n  Country = 'country',\n  CountryName = 'country-name',\n  PostalCode = 'postal-code',\n  CCName = 'cc-name',\n  CCGivenName = 'cc-given-name',\n  CCAdditionalName = 'cc-additional-name',\n  CCFamilyName = 'cc-family-name',\n  CCNumber = 'cc-number',\n  CCExp = 'cc-exp',\n  CCExpMonth = 'cc-exp-month',\n  CCExpYear = 'cc-exp-year',\n  CCCSC = 'cc-csc',\n  CCType = 'cc-type',\n  TransactionCurrency = 'transaction-currency',\n  TransactionAmount = 'transaction-amount',\n  Language = 'language',\n  Bday = 'bday',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  BdayYear = 'bday-year',\n  Sex = 'sex',\n  Url = 'url',\n  Photo = 'photo',\n}\n"],"version":3}

package/dist/components/p-be79e7bc.js

@@ -0,0 +1,121 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+import { d as defineCustomElement$2 } from './p-6146d4b0.js';
+import { d as defineCustomElement$1 } from './p-8da6d9a3.js';
+
+const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
+const NvIconbuttonStyle0 = nvIconbuttonCss;
+
+const NvIconbutton = /*@__PURE__*/ proxyCustomElement(class NvIconbutton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.internals = this.attachInternals();
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles form-related actions when the button is clicked.
+         * - Submits the form if the button type is 'submit'.
+         * - Resets the form if the button type is 'reset'.
+         * @param {Event} event - The click event.
+         */
+        this.handleClick = (event) => {
+            var _a, _b, _c, _d;
+            if (this.loading || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.type === 'submit') {
+                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            }
+            if (this.type === 'reset') {
+                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+            }
+        };
+        this.size = 'md';
+        this.emphasis = 'high';
+        this.loading = false;
+        this.disabled = false;
+        this.active = false;
+        this.name = undefined;
+        this.type = 'button';
+        this.shape = 'square';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleLoadingChange(loading) {
+        this.loading = loading;
+        this.disabled = loading;
+    }
+    handleDisabledChange(disabled) {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+        else {
+            this.disabled = disabled;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '3ca84b14312db9e4fff85fac71fbb0cc7ae7db44', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'bfb6c6ee4dbfa56595b704f436120c3ae18f4fc4', size: this.size }), !this.loading && h("nv-icon", { key: '7e87da2f6d233289bbce12416bf0d39b647f43f3', name: this.name, size: this.size }), h("slot", { key: '43972e79cf4efb921cbc9714110b13590144a268' })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+    static get style() { return NvIconbuttonStyle0; }
+}, [68, "nv-iconbutton", {
+        "size": [513],
+        "emphasis": [513],
+        "loading": [1540],
+        "disabled": [1540],
+        "active": [516],
+        "name": [513],
+        "type": [513],
+        "shape": [513]
+    }, undefined, {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-iconbutton", "nv-icon", "nv-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-iconbutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvIconbutton);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nv-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NvIconbutton as N, defineCustomElement as d };
+
+//# sourceMappingURL=p-be79e7bc.js.map

package/dist/components/p-be79e7bc.js.map

@@ -0,0 +1 @@
+{"file":"p-be79e7bc.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;;;;;;;;;;;;;;QA6Ef,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;;;;IA+B/C,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}