@aquera/nile-elements 1.0.1-beta-1.4 → 1.0.1-beta-1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/demo/index.html +8 -15
- package/dist/index.js +10 -2
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +0 -1
- package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.esm.js +9 -2
- package/dist/nile-pagination/nile-pagination.esm.js +3 -1
- package/dist/src/nile-input/nile-input.css.js +0 -1
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.css.js +7 -0
- package/dist/src/nile-pagination/nile-pagination.css.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.js +3 -1
- package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +0 -1
- package/src/nile-pagination/nile-pagination.css.ts +7 -0
- package/src/nile-pagination/nile-pagination.ts +3 -1
package/README.md
CHANGED
|
@@ -79,6 +79,9 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 1.0.1-beta-1.5
|
|
83
|
+
- Nile Input: Font-Family Removed for Password Placeholder Text
|
|
84
|
+
|
|
82
85
|
#### Version 1.0.1-beta-1.4
|
|
83
86
|
- Nile Icon: ng-arrow-narrow-right icon addition
|
|
84
87
|
- Dependeny Nile 1.0.1-beta-1.1
|
package/demo/index.html
CHANGED
|
@@ -7,29 +7,22 @@
|
|
|
7
7
|
<link rel="stylesheet" href="index.css" />
|
|
8
8
|
|
|
9
9
|
<style>
|
|
10
|
-
|
|
11
|
-
--nile-icon-size: 10;
|
|
12
|
-
--ng-icon-size: 20;
|
|
13
|
-
}
|
|
10
|
+
|
|
14
11
|
</style>
|
|
15
12
|
<script type="module" src="index.js"></script>
|
|
16
13
|
</head>
|
|
17
14
|
<body>
|
|
18
15
|
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
variant="success"
|
|
22
|
-
heading="Please Upload a CSV File"
|
|
23
|
-
description="Please upload a CSV file which is formatted correctly to avoid errors
|
|
24
|
-
.This could even be a longer paragraph here. Maybe a 3
|
|
25
|
-
liner as you can see it.But the point being to show it off right now."
|
|
26
|
-
style="width: 578px;"
|
|
27
|
-
>
|
|
28
|
-
<span slot="footer__actions">Click Me</span>
|
|
29
|
-
<span slot="footer__actions">Click Me Two</span>
|
|
30
|
-
</nile-section-message>
|
|
17
|
+
|
|
31
18
|
|
|
19
|
+
<nile-pagination totalItems="1000"
|
|
20
|
+
currentPage="1"
|
|
21
|
+
variant="compact"
|
|
22
|
+
pageSizeOptions="[5,15,30,60,120]">
|
|
23
|
+
</nile-pagination>
|
|
32
24
|
|
|
25
|
+
|
|
33
26
|
|
|
34
27
|
|
|
35
28
|
</body>
|
package/dist/index.js
CHANGED
|
@@ -1462,7 +1462,6 @@ const Ze=e=>e??B;function Ve(e,t){const M={waitUntilFirstUpdate:!1,...t};return(
|
|
|
1462
1462
|
}
|
|
1463
1463
|
|
|
1464
1464
|
.input__password {
|
|
1465
|
-
font-family: 'disc';
|
|
1466
1465
|
letter-spacing: 2px;
|
|
1467
1466
|
}
|
|
1468
1467
|
|
|
@@ -11799,6 +11798,13 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
11799
11798
|
transform: rotate(180deg);
|
|
11800
11799
|
}
|
|
11801
11800
|
|
|
11801
|
+
.prev-button::part(base) {
|
|
11802
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
11803
|
+
}
|
|
11804
|
+
|
|
11805
|
+
.next-button::part(base) {
|
|
11806
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
11807
|
+
}
|
|
11802
11808
|
|
|
11803
11809
|
`;function Gx(e,t,M){return`Showing ${(M-1)*t+1}–${Math.min(M*t,e)} of ${e}`}let Bx=class extends Pe{constructor(){super(...arguments),this.totalItems=0,this.currentPage=1,this.pageSize=50,this.pageSizeOptions=[10,25,50,100],this.variant="fluid",this.disabled=!1,this.showTitle=!0,this._pageSizeOpen=!1,this._pageOpen=!1}static get styles(){return[Rx]}firstUpdated(){this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",(()=>{this._pageSizeOpen=!0})),this._pageSizeDropdown.addEventListener("nile-after-hide",(()=>{this._pageSizeOpen=!1})))}get totalPages(){return Math.max(1,(e=this.totalItems,t=this.pageSize,Math.ceil(e/t)));var e,t}goToPage(e){if(this.disabled)return;const t=this.currentPage;this.currentPage=e,this.emit("nile-change",{page:e,previousPage:t,pageSize:this.pageSize})}onPageSizeSelect(e){if(this.disabled||this.pageSize===e)return;const t=this.currentPage;this.pageSize=e,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:t,pageSize:e})}renderCompactRangeText(){const e=Gx(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return R`<div class="range-text">${e}</div>`}renderRangeText(){return 0===this.totalItems?R`<div class="range-text">Showing 0 of 0</div>`:R`
|
|
11804
11810
|
<div part="range-text" class="range-text">
|
|
@@ -11876,6 +11882,7 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
11876
11882
|
variant="tertiary"
|
|
11877
11883
|
?disabled=${1===this.currentPage||this.disabled}
|
|
11878
11884
|
@click=${()=>this.goToPage(this.currentPage-1)}
|
|
11885
|
+
class="prev-button"
|
|
11879
11886
|
>
|
|
11880
11887
|
<nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
|
|
11881
11888
|
</nile-button>
|
|
@@ -11886,8 +11893,9 @@ class $i{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
|
|
|
11886
11893
|
variant="tertiary"
|
|
11887
11894
|
?disabled=${this.currentPage===this.totalPages||this.disabled}
|
|
11888
11895
|
@click=${()=>this.goToPage(this.currentPage+1)}
|
|
11896
|
+
class="next-button"
|
|
11889
11897
|
>
|
|
11890
|
-
<nile-icon name="var(--nile-icon-arrow-right, var(--ng-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
|
|
11898
|
+
<nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
|
|
11891
11899
|
</nile-button>
|
|
11892
11900
|
</li>
|
|
11893
11901
|
`}renderPageItem(e,t,M){return"…"===e?R`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: var(--nile-spacing-sm);\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n font-size: var(--nile-type-scale-2);\n font-style: normal;\n line-height: var( --nile-form-error-text-line-height, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-1);\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color, 150ms outline;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .input--standard:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n }\n\n .input--standard.input--error:hover:not(.input--disabled) {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n }\n\n .input--standard.input--focused.input--warning:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--focused.input--success:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n }\n \n .input--standard.input--focused.input--error:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--nile-colors-primary-900);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n }\n\n .input--standard.input--warning:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n }\n\n .input--standard.input--success:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input--standard:focus {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--medium {\n font-size: var(--nile-font-size-rem-large);\n height: var(--nile-height-40px, var(--ng-height-auto));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n }\n\n .input--medium .input__control {\n height: var(--nile-type-scale-3, var(--ng-height-auto));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--large {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-6);\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--medium {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--large {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__password-toggle:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-outline]) .input--standard {\n outline: var(--nile-outline-unset, var(--ng-outline-none));\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: var(--nile-radius-sm);\n max-width: 400px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-2);\n max-height: 300px;\n overflow-y: scroll;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: var(--nile-spacing-xs);\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: var(--nile-spacing-sm);\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n font-size: var(--nile-type-scale-2);\n font-style: normal;\n line-height: var( --nile-form-error-text-line-height, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-1);\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color, 150ms outline;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .input--standard:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n }\n\n .input--standard.input--error:hover:not(.input--disabled) {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n }\n\n .input--standard.input--focused.input--warning:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--focused.input--success:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n }\n \n .input--standard.input--focused.input--error:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--nile-colors-primary-900);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n }\n\n .input--standard.input--warning:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n }\n\n .input--standard.input--success:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input--standard:focus {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--medium {\n font-size: var(--nile-font-size-rem-large);\n height: var(--nile-height-40px, var(--ng-height-auto));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n }\n\n .input--medium .input__control {\n height: var(--nile-type-scale-3, var(--ng-height-auto));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--large {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-6);\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--medium {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--large {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__password-toggle:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-outline]) .input--standard {\n outline: var(--nile-outline-unset, var(--ng-outline-none));\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: var(--nile-radius-sm);\n max-width: 400px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-2);\n max-height: 300px;\n overflow-y: scroll;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: var(--nile-spacing-xs);\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-input.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: var(--nile-spacing-sm);\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n font-size: var(--nile-type-scale-2);\n font-style: normal;\n line-height: var( --nile-form-error-text-line-height, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-1);\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color, 150ms outline;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .input--standard:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n }\n\n .input--standard.input--error:hover:not(.input--disabled) {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n }\n\n .input--standard.input--focused.input--warning:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--focused.input--success:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n }\n \n .input--standard.input--focused.input--error:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--nile-colors-primary-900);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n }\n\n .input--standard.input--warning:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n }\n\n .input--standard.input--success:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input--standard:focus {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--medium {\n font-size: var(--nile-font-size-rem-large);\n height: var(--nile-height-40px, var(--ng-height-auto));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n }\n\n .input--medium .input__control {\n height: var(--nile-type-scale-3, var(--ng-height-auto));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--large {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-6);\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--medium {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--large {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__password-toggle:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-outline]) .input--standard {\n outline: var(--nile-outline-unset, var(--ng-outline-none));\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: var(--nile-radius-sm);\n max-width: 400px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-2);\n max-height: 300px;\n overflow-y: scroll;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: var(--nile-spacing-xs);\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: var(--nile-spacing-none);\n padding: var(--nile-spacing-none);\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n /* To Hide Safari's AutoFill icon */\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n width: 0;\n margin: 0;\n padding: 0;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500);\n margin-top: var(--nile-spacing-sm);\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n font-size: var(--nile-type-scale-2);\n font-style: normal;\n line-height: var( --nile-form-error-text-line-height, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-1);\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color, 150ms outline;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n\n /* Standard inputs */\n .input--standard {\n background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));\n box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));\n outline:var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .input--standard:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n }\n\n .input--standard.input--error:hover:not(.input--disabled) {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n }\n\n .input--standard.input--focused.input--warning:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--focused.input--success:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n }\n \n .input--standard.input--focused.input--error:not(.input--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: var(--nile-colors-primary-900);\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: var(--nile-color-dark-blue, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n }\n\n .input--standard.input--warning:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n }\n\n .input--standard.input--error {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n }\n\n .input--standard.input--success {\n border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n }\n\n .input--standard.input--success:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n }\n\n .input--standard.input--destructive {\n border-color: var(--nile-colors-red-400);\n }\n\n .input--standard.input--focused.input--destructive:not(.input--disabled) {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n .input--destructive:active {\n border: 1px solid var(--nile-colors-red-400);\n box-shadow: var(--nile-input-shadow-destructive-active);\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: var(--nile-colors-dark-100);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: var(--nile-colors-dark-100);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: var(--nile-colors-dark-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;\n /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;\n }\n\n .input__control::placeholder {\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: var(--nile-colors-dark-900);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: var(--nile-colors-neutral-700);\n }\n\n .input--standard:focus {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n border: 1px solid var(--nile-colors-primary-500);\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-input-font-size-small);\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .input--medium {\n font-size: var(--nile-font-size-rem-large);\n height: var(--nile-height-40px, var(--ng-height-auto));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n }\n\n .input--medium .input__control {\n height: var(--nile-type-scale-3, var(--ng-height-auto));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .input--large {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-6);\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--medium {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n .input--pill.input--large {\n border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-neutral-700);\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__password-toggle:hover {\n color: var(--nile-colors-neutral-700);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-outline]) .input--standard {\n outline: var(--nile-outline-unset, var(--ng-outline-none));\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n letter-spacing: 2px;\n }\n\n .input__non-printable {\n border-radius: var(--nile-radius-sm);\n max-width: 400px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-red-500);\n color: var(--nile-colors-red-500);\n padding: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-2);\n max-height: 300px;\n overflow-y: scroll;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__remove-non-printable {\n color: var(--nile-colors-red-500);\n margin-left: var(--nile-spacing-10px);\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n cursor: pointer;\n }\n\n .input__srtiked-text-container {\n margin-top: var(--nile-spacing-xs);\n color: var(--nile-colors-dark-900);\n word-break: break-all;\n line-height: var(--nile-type-scale-4);\n }\n\n .input__srtiked-text {\n text-decoration: line-through;\n text-decoration-color: var(--nile-colors-white-base);\n color: var(--nile-colors-white-base);\n background-color: var(--nile-colors-red-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-pagination.css.cjs.js","../internal/nile-element.cjs.js","./nile-pagination-utils.cjs.js"],function(_export,_context){"use strict";var i,e,t,n,s,r,a,o,l,h,d,c,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;n=_litDecoratorsJs.state;s=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_nilePaginationCssCjsJs){a=_nilePaginationCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_nilePaginationUtilsCjsJs){l=_nilePaginationUtilsCjsJs.c;h=_nilePaginationUtilsCjsJs.g;d=_nilePaginationUtilsCjsJs.a;c=_nilePaginationUtilsCjsJs.b;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_o){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.totalItems=0,_this.currentPage=1,_this.pageSize=50,_this.pageSizeOptions=[10,25,50,100],_this.variant="fluid",_this.disabled=!1,_this.showTitle=!0,_this._pageSizeOpen=!1,_this._pageOpen=!1;return _this;}_inherits(p,_o);return _createClass(p,[{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",function(){_this2._pageSizeOpen=!0;}),this._pageSizeDropdown.addEventListener("nile-after-hide",function(){_this2._pageSizeOpen=!1;}));}},{key:"totalPages",get:function get(){return Math.max(1,l(this.totalItems,this.pageSize));}},{key:"goToPage",value:function goToPage(i){if(this.disabled)return;var e=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:e,pageSize:this.pageSize});}},{key:"onPageSizeSelect",value:function onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;var e=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:e,pageSize:i});}},{key:"renderCompactRangeText",value:function renderCompactRangeText(){var i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div class=\"range-text\">","</div>"])),i);}},{key:"renderRangeText",value:function renderRangeText(){return 0===this.totalItems?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"range-text\">Showing 0 of 0</div>"]))):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"range-text\" class=\"range-text\">\n ","\n </div>\n "])),h(this.totalItems,this.pageSize,this.currentPage));}},{key:"renderPageSizeSelect",value:function renderPageSizeSelect(){var _this3=this;return"fluid"!==this.variant?null:e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=",">\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n "])),this.disabled,this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this3.disabled,function(){return _this3.onPageSizeSelect(i);},i);}));}},{key:"renderCompactPageSize",value:function renderCompactPageSize(){var _this4=this;return e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n "])),this.disabled,function(){return _this4._pageSizeOpen=!0;},function(){return _this4._pageSizeOpen=!1;},this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this4.disabled,function(){return _this4.onPageSizeSelect(i);},i);}));}},{key:"renderPrevButton",value:function renderPrevButton(){var _this5=this;return e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this5.goToPage(_this5.currentPage-1);});}},{key:"renderNextButton",value:function renderNextButton(){var _this6=this;return e(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this6.goToPage(_this6.currentPage+1);});}},{key:"renderPageItem",value:function renderPageItem(i,t,n){var _this7=this;return"…"===i?e(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=",">\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=",">\n \u2026\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n "])),this.disabled,this.disabled,d(this.totalPages,n,this.currentPage,t<n.indexOf(this.currentPage)?"left":"right").map(function(i){return e(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this7.disabled,function(){return _this7.goToPage(i);},i);})):e(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=","\n ?disabled=","\n @click=","\n >\n ","\n </nile-button>\n </li>\n "])),i===this.currentPage?"primary":"ghost",this.disabled,function(){return _this7.goToPage(i);},i);}},{key:"renderPageList",value:function renderPageList(){var _this8=this;if("compact"===this.variant)return e(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ","\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),this.disabled,function(){return _this8._pageOpen=!0;},function(){return _this8._pageOpen=!1;},this._pageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,e){return e+1;}).map(function(i){return e(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this8.disabled,function(){return _this8.goToPage(i);},i);}),this.renderNextButton());var i=c(this.totalPages,this.currentPage);return e(_templateObject15||(_templateObject15=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ","\n ","\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),i.map(function(e,t){return _this8.renderPageItem(e,t,i);}),this.renderNextButton());}},{key:"render",value:function render(){return e(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper ","\">\n <div part=\"pager-container\" class=\"pager-container\">\n ","\n ","\n </div>\n ","\n </div>\n "])),this.variant,"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null,"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize(),this.renderPageList());}}],[{key:"styles",get:function get(){return[a];}}]);}(o));i([t({attribute:"totalitems",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=0?Math.floor(e):0;}}})],p.prototype,"totalItems",void 0),i([t({attribute:"currentpage",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):1;}}})],p.prototype,"currentPage",void 0),i([t({attribute:"pagesize",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):50;}}})],p.prototype,"pageSize",void 0),i([t({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:function fromAttribute(i){try{var _e=JSON.parse(i);if(Array.isArray(_e)&&_e.every(function(i){return"number"==typeof i;}))return _e;}catch(_unused){}return[10,25,50,100];}}})],p.prototype,"pageSizeOptions",void 0),i([t({type:String})],p.prototype,"variant",void 0),i([t({type:Boolean})],p.prototype,"disabled",void 0),i([t({type:Boolean})],p.prototype,"showTitle",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),_export("N",p=i([r("nile-pagination")],p));}};});
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-pagination.css.cjs.js","../internal/nile-element.cjs.js","./nile-pagination-utils.cjs.js"],function(_export,_context){"use strict";var i,e,t,n,s,r,a,o,l,h,d,c,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,p;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){i=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;n=_litDecoratorsJs.state;s=_litDecoratorsJs.query;r=_litDecoratorsJs.customElement;},function(_nilePaginationCssCjsJs){a=_nilePaginationCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_nilePaginationUtilsCjsJs){l=_nilePaginationUtilsCjsJs.c;h=_nilePaginationUtilsCjsJs.g;d=_nilePaginationUtilsCjsJs.a;c=_nilePaginationUtilsCjsJs.b;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_o){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p,arguments),_this.totalItems=0,_this.currentPage=1,_this.pageSize=50,_this.pageSizeOptions=[10,25,50,100],_this.variant="fluid",_this.disabled=!1,_this.showTitle=!0,_this._pageSizeOpen=!1,_this._pageOpen=!1;return _this;}_inherits(p,_o);return _createClass(p,[{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",function(){_this2._pageSizeOpen=!0;}),this._pageSizeDropdown.addEventListener("nile-after-hide",function(){_this2._pageSizeOpen=!1;}));}},{key:"totalPages",get:function get(){return Math.max(1,l(this.totalItems,this.pageSize));}},{key:"goToPage",value:function goToPage(i){if(this.disabled)return;var e=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:e,pageSize:this.pageSize});}},{key:"onPageSizeSelect",value:function onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;var e=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:e,pageSize:i});}},{key:"renderCompactRangeText",value:function renderCompactRangeText(){var i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div class=\"range-text\">","</div>"])),i);}},{key:"renderRangeText",value:function renderRangeText(){return 0===this.totalItems?e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"range-text\">Showing 0 of 0</div>"]))):e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div part=\"range-text\" class=\"range-text\">\n ","\n </div>\n "])),h(this.totalItems,this.pageSize,this.currentPage));}},{key:"renderPageSizeSelect",value:function renderPageSizeSelect(){var _this3=this;return"fluid"!==this.variant?null:e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=",">\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n "])),this.disabled,this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this3.disabled,function(){return _this3.onPageSizeSelect(i);},i);}));}},{key:"renderCompactPageSize",value:function renderCompactPageSize(){var _this4=this;return e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n "])),this.disabled,function(){return _this4._pageSizeOpen=!0;},function(){return _this4._pageSizeOpen=!1;},this._pageSizeOpen?"open":"",this.disabled,this.pageSize,this.pageSizeOptions.map(function(i){return e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this4.disabled,function(){return _this4.onPageSizeSelect(i);},i);}));}},{key:"renderPrevButton",value:function renderPrevButton(){var _this5=this;return e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),1===this.currentPage||this.disabled,function(){return _this5.goToPage(_this5.currentPage-1);});}},{key:"renderNextButton",value:function renderNextButton(){var _this6=this;return e(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=","\n @click=","\n class=\"next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n "])),this.currentPage===this.totalPages||this.disabled,function(){return _this6.goToPage(_this6.currentPage+1);});}},{key:"renderPageItem",value:function renderPageItem(i,t,n){var _this7=this;return"…"===i?e(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=",">\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=",">\n \u2026\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n "])),this.disabled,this.disabled,d(this.totalPages,n,this.currentPage,t<n.indexOf(this.currentPage)?"left":"right").map(function(i){return e(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this7.disabled,function(){return _this7.goToPage(i);},i);})):e(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <li>\n <nile-button\n variant=","\n ?disabled=","\n @click=","\n >\n ","\n </nile-button>\n </li>\n "])),i===this.currentPage?"primary":"ghost",this.disabled,function(){return _this7.goToPage(i);},i);}},{key:"renderPageList",value:function renderPageList(){var _this8=this;if("compact"===this.variant)return e(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ","\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=","\n @nile-show=","\n @nile-after-hide=","\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ","\"\n ?disabled=","\n >\n ","\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ","\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),this.disabled,function(){return _this8._pageOpen=!0;},function(){return _this8._pageOpen=!1;},this._pageOpen?"open":"",this.disabled,this.currentPage,Array.from({length:this.totalPages},function(i,e){return e+1;}).map(function(i){return e(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <nile-menu-item\n ?disabled=","\n @click=","\n >\n ","\n </nile-menu-item>\n "])),_this8.disabled,function(){return _this8.goToPage(i);},i);}),this.renderNextButton());var i=c(this.totalPages,this.currentPage);return e(_templateObject15||(_templateObject15=_taggedTemplateLiteral(["\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ","\n ","\n ","\n </ul>\n </nav>\n "])),this.renderPrevButton(),i.map(function(e,t){return _this8.renderPageItem(e,t,i);}),this.renderNextButton());}},{key:"render",value:function render(){return e(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <div part=\"wrapper\" class=\"pagination-wrapper ","\">\n <div part=\"pager-container\" class=\"pager-container\">\n ","\n ","\n </div>\n ","\n </div>\n "])),this.variant,"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null,"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize(),this.renderPageList());}}],[{key:"styles",get:function get(){return[a];}}]);}(o));i([t({attribute:"totalitems",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=0?Math.floor(e):0;}}})],p.prototype,"totalItems",void 0),i([t({attribute:"currentpage",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):1;}}})],p.prototype,"currentPage",void 0),i([t({attribute:"pagesize",reflect:!0,converter:{fromAttribute:function fromAttribute(i){var e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):50;}}})],p.prototype,"pageSize",void 0),i([t({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:function fromAttribute(i){try{var _e=JSON.parse(i);if(Array.isArray(_e)&&_e.every(function(i){return"number"==typeof i;}))return _e;}catch(_unused){}return[10,25,50,100];}}})],p.prototype,"pageSizeOptions",void 0),i([t({type:String})],p.prototype,"variant",void 0),i([t({type:Boolean})],p.prototype,"disabled",void 0),i([t({type:Boolean})],p.prototype,"showTitle",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),_export("N",p=i([r("nile-pagination")],p));}};});
|
|
2
2
|
//# sourceMappingURL=nile-pagination.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-pagination.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n calculateTotalPages,\n getPaginationItems,\n getHiddenPages,\n getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({attribute: 'totalitems',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n },\n },\n })totalItems: number = 0;\n\n @property({attribute: 'currentpage', reflect: true, converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n },\n },\n })currentPage: number = 1;\n\n @property({attribute: 'pagesize',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n },\n },\n })pageSize: number = 50;\n\n @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n try {\n const arr = JSON.parse(v);\n if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n return arr as number[];\n }\n } catch {}\n return [10, 25, 50, 100];\n }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) showTitle = true;\n\n @state() private _pageSizeOpen = false;\n @state() private _pageOpen = false;\n @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n firstUpdated() {\n if (this._pageSizeDropdown) { \n this._pageSizeDropdown.addEventListener('nile-show', () => {\n this._pageSizeOpen = true;\n });\n this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n this._pageSizeOpen = false;\n });\n }\n }\n\n private get totalPages(): number {\n return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n }\n\n private goToPage(newPage: number) {\n \n if (this.disabled) return;\n const previousPage = this.currentPage;\n this.currentPage = newPage;\n this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n }\n\n private onPageSizeSelect(newSize: number) {\n if (this.disabled || this.pageSize === newSize) return;\n\n const previousPage = this.currentPage;\n this.pageSize = newSize;\n this.currentPage = 1;\n this.emit('nile-change', {\n page: 1,\n previousPage,\n pageSize: newSize\n });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n const trimmed = full.replace(/^Showing\\s*/, ''); \n return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n private renderRangeText(): TemplateResult {\n if (this.totalItems === 0) {\n return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n }\n return html`\n <div part=\"range-text\" class=\"range-text\">\n ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n </div>\n `;\n }\n\n private renderPageSizeSelect(): TemplateResult | null {\n if (this.variant !== 'fluid') return null;\n return html`\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=${this.disabled}>\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n `;\n }\n\n\n private renderCompactPageSize(): TemplateResult {\n return html`\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageSizeOpen = true)}\n @nile-after-hide=${() => (this._pageSizeOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n `;\n }\n \n\n private renderPrevButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === 1 || this.disabled}\n @click=${() => this.goToPage(this.currentPage - 1)}\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderNextButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === this.totalPages || this.disabled}\n @click=${() => this.goToPage(this.currentPage + 1)}\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderPageItem(\n item: number | string,\n idx: number,\n items: (number | string)[]\n ): TemplateResult {\n if (item === '…') {\n return html`\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=${this.disabled}>\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n …\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ${getHiddenPages(\n this.totalPages,\n items,\n this.currentPage,\n idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n ).map(\n page => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n `;\n }\n return html`\n <li>\n <nile-button\n variant=${item === this.currentPage ? 'primary' : 'ghost'}\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(item as number)}\n >\n ${item}\n </nile-button>\n </li>\n `;\n }\n\n private renderPageList(): TemplateResult {\n if (this.variant === 'compact') {\n return html`\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ${this.renderPrevButton()}\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageOpen = true)}\n @nile-after-hide=${() => (this._pageOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.currentPage}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n p => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(p)}\n >\n ${p}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n const items = getPaginationItems(this.totalPages, this.currentPage);\n return html`\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ${this.renderPrevButton()}\n ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n\n public render(): TemplateResult {\n return html`\n <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n <div part=\"pager-container\" class=\"pager-container\">\n ${this.variant === 'fluid' && this.showTitle\n ? this.renderRangeText()\n : this.variant === 'compact'\n ? this.renderCompactRangeText()\n : null}\n ${this.variant === 'fluid'\n ? this.renderPageSizeSelect()\n : this.renderCompactPageSize()}\n </div>\n ${this.renderPageList()}\n </div>\n `;\n}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-pagination': NilePagination;\n }\n}\n"],"names":["NilePagination","p","constructor","this","totalItems","currentPage","pageSize","pageSizeOptions","variant","disabled","showTitle","_pageSizeOpen","_pageOpen","_this","_inherits","_o","_createClass","key","value","firstUpdated","_pageSizeDropdown","addEventListener","get","Math","max","calculateTotalPages","goToPage","newPage","previousPage","emit","page","onPageSizeSelect","newSize","renderCompactRangeText","trimmed","getRangeText","replace","html","_templateObject","_taggedTemplateLiteral","renderRangeText","_templateObject2","_templateObject3","renderPageSizeSelect","_this3","_templateObject4","map","size","_templateObject5","renderCompactPageSize","_this4","_templateObject6","_templateObject7","renderPrevButton","_this5","_templateObject8","renderNextButton","_this6","_templateObject9","totalPages","renderPageItem","item","idx","items","_templateObject10","getHiddenPages","indexOf","_templateObject11","_templateObject12","renderPageList","_this8","_templateObject13","Array","from","length","_","i","_templateObject14","getPaginationItems","_templateObject15","render","_templateObject16","__decorate","styles","NileElement","property","attribute","reflect","converter","fromAttribute","v","n","Number","isFinite","floor","prototype","arr","JSON","parse","isArray","every","x","_unused","type","String","Boolean","state","query","_export","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nile-pagination.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n calculateTotalPages,\n getPaginationItems,\n getHiddenPages,\n getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({attribute: 'totalitems',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n },\n },\n })totalItems: number = 0;\n\n @property({attribute: 'currentpage', reflect: true, converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n },\n },\n })currentPage: number = 1;\n\n @property({attribute: 'pagesize',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n },\n },\n })pageSize: number = 50;\n\n @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n try {\n const arr = JSON.parse(v);\n if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n return arr as number[];\n }\n } catch {}\n return [10, 25, 50, 100];\n }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) showTitle = true;\n\n @state() private _pageSizeOpen = false;\n @state() private _pageOpen = false;\n @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n firstUpdated() {\n if (this._pageSizeDropdown) { \n this._pageSizeDropdown.addEventListener('nile-show', () => {\n this._pageSizeOpen = true;\n });\n this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n this._pageSizeOpen = false;\n });\n }\n }\n\n private get totalPages(): number {\n return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n }\n\n private goToPage(newPage: number) {\n \n if (this.disabled) return;\n const previousPage = this.currentPage;\n this.currentPage = newPage;\n this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n }\n\n private onPageSizeSelect(newSize: number) {\n if (this.disabled || this.pageSize === newSize) return;\n\n const previousPage = this.currentPage;\n this.pageSize = newSize;\n this.currentPage = 1;\n this.emit('nile-change', {\n page: 1,\n previousPage,\n pageSize: newSize\n });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n const trimmed = full.replace(/^Showing\\s*/, ''); \n return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n private renderRangeText(): TemplateResult {\n if (this.totalItems === 0) {\n return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n }\n return html`\n <div part=\"range-text\" class=\"range-text\">\n ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n </div>\n `;\n }\n\n private renderPageSizeSelect(): TemplateResult | null {\n if (this.variant !== 'fluid') return null;\n return html`\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=${this.disabled}>\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n `;\n }\n\n\n private renderCompactPageSize(): TemplateResult {\n return html`\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageSizeOpen = true)}\n @nile-after-hide=${() => (this._pageSizeOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n `;\n }\n \n\n private renderPrevButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === 1 || this.disabled}\n @click=${() => this.goToPage(this.currentPage - 1)}\n class=\"prev-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderNextButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === this.totalPages || this.disabled}\n @click=${() => this.goToPage(this.currentPage + 1)}\n class=\"next-button\"\n >\n <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderPageItem(\n item: number | string,\n idx: number,\n items: (number | string)[]\n ): TemplateResult {\n if (item === '…') {\n return html`\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=${this.disabled}>\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n …\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ${getHiddenPages(\n this.totalPages,\n items,\n this.currentPage,\n idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n ).map(\n page => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n `;\n }\n return html`\n <li>\n <nile-button\n variant=${item === this.currentPage ? 'primary' : 'ghost'}\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(item as number)}\n >\n ${item}\n </nile-button>\n </li>\n `;\n }\n\n private renderPageList(): TemplateResult {\n if (this.variant === 'compact') {\n return html`\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ${this.renderPrevButton()}\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageOpen = true)}\n @nile-after-hide=${() => (this._pageOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.currentPage}\n <nile-icon\n name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n size=\"14\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n p => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(p)}\n >\n ${p}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n const items = getPaginationItems(this.totalPages, this.currentPage);\n return html`\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ${this.renderPrevButton()}\n ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n\n public render(): TemplateResult {\n return html`\n <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n <div part=\"pager-container\" class=\"pager-container\">\n ${this.variant === 'fluid' && this.showTitle\n ? this.renderRangeText()\n : this.variant === 'compact'\n ? this.renderCompactRangeText()\n : null}\n ${this.variant === 'fluid'\n ? this.renderPageSizeSelect()\n : this.renderCompactPageSize()}\n </div>\n ${this.renderPageList()}\n </div>\n `;\n}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-pagination': NilePagination;\n }\n}\n"],"names":["NilePagination","p","constructor","this","totalItems","currentPage","pageSize","pageSizeOptions","variant","disabled","showTitle","_pageSizeOpen","_pageOpen","_this","_inherits","_o","_createClass","key","value","firstUpdated","_pageSizeDropdown","addEventListener","get","Math","max","calculateTotalPages","goToPage","newPage","previousPage","emit","page","onPageSizeSelect","newSize","renderCompactRangeText","trimmed","getRangeText","replace","html","_templateObject","_taggedTemplateLiteral","renderRangeText","_templateObject2","_templateObject3","renderPageSizeSelect","_this3","_templateObject4","map","size","_templateObject5","renderCompactPageSize","_this4","_templateObject6","_templateObject7","renderPrevButton","_this5","_templateObject8","renderNextButton","_this6","_templateObject9","totalPages","renderPageItem","item","idx","items","_templateObject10","getHiddenPages","indexOf","_templateObject11","_templateObject12","renderPageList","_this8","_templateObject13","Array","from","length","_","i","_templateObject14","getPaginationItems","_templateObject15","render","_templateObject16","__decorate","styles","NileElement","property","attribute","reflect","converter","fromAttribute","v","n","Number","isFinite","floor","prototype","arr","JSON","parse","isArray","every","x","_unused","type","String","Boolean","state","query","_export","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n }\n\n .pagination-wrapper.v2 .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n \n .pagination-wrapper.compact {\n min-width: 324px;\n justify-content: space-between;\n }\n\n\n\n.pagination-wrapper.compact .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .pagination-wrapper.compact .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0 6px;\n }\n\n .pagination-wrapper.compact .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n\n .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n display: none;\n }\n\n .compact-pagination {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .page-dropdown .current-page-btn {\n padding: 2px;\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n }\n\n nile-button.current-page-btn::part(base){\n min-width: 51px;\n }\n\n nile-button.current-page-btn::part(base):active {\n min-width: 51px;\n}\n\n .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n .range-text {\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n white-space: nowrap;\n }\n\n .page-size-select {\n display: inline-flex;\n align-items: center;\n }\n\n ul.pagination {\n display: flex;\n list-style: none;\n padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n }\n\n ul.pagination li {\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n }\n\n .ellipsis-scroll-wrapper {\n max-height: 194px;\n overflow-y: auto;\n width: 66px;\n }\n .down-scroll-wrapper {\n max-height: 150px;\n overflow-y: auto;\n width: 60px;\n }\n\n\n .compact-scroll-wrapper {\n max-height: 160px;\n overflow-y: auto;\n width: 60px;\n }\n .compact-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .page-size-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .compact-scroll-wrapper1 {\n max-height: 164px;\n overflow-y: auto;\n width: 60px;\n }\n\n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n\n .ellipsis-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .page-size-menu {\n max-height: 144px;\n overflow-y: auto;\n }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .page-size-label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n }\n\n nile-button::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n }\n \n nile-button.down::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n nile-button.down::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n\n nile-button.current-page-btn::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n }\n\n nile-button.current-page-btn::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n \n nile-button::part(base):active {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n border: none;\n }\n\n nile-button.down::part(base) {\n min-width: 62px;\n }\n\n nile-button.compactbtn:part(base){\n background-color: red;\n }\n .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n \n .pagination-wrapper.compact .compact-dropdown .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n transform: rotate(180deg);\n }\n\n .prev-button::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n .next-button::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-pagination.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-pagination.css.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n }\n\n .pagination-wrapper.v2 .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n \n .pagination-wrapper.compact {\n min-width: 324px;\n justify-content: space-between;\n }\n\n\n\n.pagination-wrapper.compact .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .pagination-wrapper.compact .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0 6px;\n }\n\n .pagination-wrapper.compact .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n\n .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n display: none;\n }\n\n .compact-pagination {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .page-dropdown .current-page-btn {\n padding: 2px;\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n }\n\n nile-button.current-page-btn::part(base){\n min-width: 51px;\n }\n\n nile-button.current-page-btn::part(base):active {\n min-width: 51px;\n}\n\n .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n .range-text {\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n white-space: nowrap;\n }\n\n .page-size-select {\n display: inline-flex;\n align-items: center;\n }\n\n ul.pagination {\n display: flex;\n list-style: none;\n padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n }\n\n ul.pagination li {\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n }\n\n .ellipsis-scroll-wrapper {\n max-height: 194px;\n overflow-y: auto;\n width: 66px;\n }\n .down-scroll-wrapper {\n max-height: 150px;\n overflow-y: auto;\n width: 60px;\n }\n\n\n .compact-scroll-wrapper {\n max-height: 160px;\n overflow-y: auto;\n width: 60px;\n }\n .compact-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .page-size-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .compact-scroll-wrapper1 {\n max-height: 164px;\n overflow-y: auto;\n width: 60px;\n }\n\n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n\n .ellipsis-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .page-size-menu {\n max-height: 144px;\n overflow-y: auto;\n }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .page-size-label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n }\n\n nile-button::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n }\n \n nile-button.down::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n nile-button.down::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n\n nile-button.current-page-btn::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n }\n\n nile-button.current-page-btn::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n \n nile-button::part(base):active {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n border: none;\n }\n\n nile-button.down::part(base) {\n min-width: 62px;\n }\n\n nile-button.compactbtn:part(base){\n background-color: red;\n }\n .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n \n .pagination-wrapper.compact .compact-dropdown .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n transform: rotate(180deg);\n }\n\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-pagination.css.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n }\n\n .pagination-wrapper.v2 .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n \n .pagination-wrapper.compact {\n min-width: 324px;\n justify-content: space-between;\n }\n\n\n\n.pagination-wrapper.compact .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .pagination-wrapper.compact .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0 6px;\n }\n\n .pagination-wrapper.compact .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n\n .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n display: none;\n }\n\n .compact-pagination {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .page-dropdown .current-page-btn {\n padding: 2px;\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n }\n\n nile-button.current-page-btn::part(base){\n min-width: 51px;\n }\n\n nile-button.current-page-btn::part(base):active {\n min-width: 51px;\n}\n\n .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n .range-text {\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n white-space: nowrap;\n }\n\n .page-size-select {\n display: inline-flex;\n align-items: center;\n }\n\n ul.pagination {\n display: flex;\n list-style: none;\n padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n }\n\n ul.pagination li {\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n }\n\n .ellipsis-scroll-wrapper {\n max-height: 194px;\n overflow-y: auto;\n width: 66px;\n }\n .down-scroll-wrapper {\n max-height: 150px;\n overflow-y: auto;\n width: 60px;\n }\n\n\n .compact-scroll-wrapper {\n max-height: 160px;\n overflow-y: auto;\n width: 60px;\n }\n .compact-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .page-size-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .compact-scroll-wrapper1 {\n max-height: 164px;\n overflow-y: auto;\n width: 60px;\n }\n\n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n\n .ellipsis-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .page-size-menu {\n max-height: 144px;\n overflow-y: auto;\n }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .page-size-label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n }\n\n nile-button::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n }\n \n nile-button.down::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n nile-button.down::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n\n nile-button.current-page-btn::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n }\n\n nile-button.current-page-btn::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n \n nile-button::part(base):active {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n border: none;\n }\n\n nile-button.down::part(base) {\n min-width: 62px;\n }\n\n nile-button.compactbtn:part(base){\n background-color: red;\n }\n .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n \n .pagination-wrapper.compact .compact-dropdown .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n transform: rotate(180deg);\n }\n\n .prev-button::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n .next-button::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as a}from"lit";const n=a`
|
|
2
2
|
:host {
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -251,5 +251,12 @@ import{css as n}from"lit";const a=n`
|
|
|
251
251
|
transform: rotate(180deg);
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
+
.prev-button::part(base) {
|
|
255
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.next-button::part(base) {
|
|
259
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
260
|
+
}
|
|
254
261
|
|
|
255
|
-
`;export{
|
|
262
|
+
`;export{n as s};
|