@aquera/nile-elements 0.1.2 → 0.1.3
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 +5 -0
- package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
- package/dist/nile-drawer/nile-drawer.css.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.css.cjs.js.map +1 -1
- package/dist/nile-drawer/nile-drawer.css.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.cjs.js.map +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.esm.js +2 -2
- package/dist/src/nile-code-editor/extensionSetup.d.ts +8 -9
- package/dist/src/nile-code-editor/extensionSetup.js +0 -13
- package/dist/src/nile-code-editor/extensionSetup.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +19 -0
- package/dist/src/nile-code-editor/nile-code-editor.js +61 -2
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-drawer/nile-drawer.css.js +1 -1
- package/dist/src/nile-drawer/nile-drawer.css.js.map +1 -1
- package/dist/src/nile-form-help-text/nile-form-help-text.js +32 -2
- package/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-code-editor/extensionSetup.ts +8 -23
- package/src/nile-code-editor/nile-code-editor.ts +59 -3
- package/src/nile-drawer/nile-drawer.css.ts +1 -1
- package/src/nile-form-help-text/nile-form-help-text.ts +37 -3
- package/vscode-html-custom-data.json +5 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Drawer CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-drawer-remove-icon-color:#000;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --size: 25rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n .drawer {\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .drawer--contained {\n position: absolute;\n z-index: initial;\n }\n\n .drawer--fixed {\n position: fixed;\n z-index: 700;\n }\n\n .drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: hsl(0, 0%, 100%);\n box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n overflow: auto;\n pointer-events: all;\n }\n\n .drawer__panel:focus {\n outline: none;\n }\n\n .drawer--top .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--end .drawer__panel {\n top: 0;\n inset-inline-end: 0;\n bottom: auto;\n inset-inline-start: auto;\n width: var(--size);\n height: 100%;\n }\n\n .drawer--bottom .drawer__panel {\n top: auto;\n inset-inline-end: auto;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--start .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: var(--size);\n height: 100%;\n }\n\n .drawer__header {\n display: flex;\n }\n\n .drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n padding: var(--header-spacing);\n margin: 0;\n }\n\n .drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 0.
|
|
1
|
+
{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Drawer CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --nile-drawer-remove-icon-color:#000;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --size: 25rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n .drawer {\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .drawer--contained {\n position: absolute;\n z-index: initial;\n }\n\n .drawer--fixed {\n position: fixed;\n z-index: 700;\n }\n\n .drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: hsl(0, 0%, 100%);\n box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n overflow: auto;\n pointer-events: all;\n }\n\n .drawer__panel:focus {\n outline: none;\n }\n\n .drawer--top .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--end .drawer__panel {\n top: 0;\n inset-inline-end: 0;\n bottom: auto;\n inset-inline-start: auto;\n width: var(--size);\n height: 100%;\n }\n\n .drawer--bottom .drawer__panel {\n top: auto;\n inset-inline-end: auto;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--size);\n }\n\n .drawer--start .drawer__panel {\n top: 0;\n inset-inline-end: auto;\n bottom: auto;\n inset-inline-start: 0;\n width: var(--size);\n height: 100%;\n }\n\n .drawer__header {\n display: flex;\n }\n\n .drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n padding: var(--header-spacing);\n margin: 0;\n }\n\n .drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 0.5rem;\n padding: 0 var(--header-spacing);\n }\n\n .drawer__header-actions nile-icon-button,\n .drawer__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .drawer__body {\n flex: 1 1 auto;\n display: block;\n padding: var(--body-spacing);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .drawer__footer {\n text-align: right;\n padding: var(--footer-spacing);\n }\n\n .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n margin-inline-end: 0.5rem;\n }\n\n .drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n }\n\n .drawer__overlay {\n display: block;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(240 3.8% 46.1% / 33%);\n pointer-events: all;\n }\n\n .drawer--contained .drawer__overlay {\n display: none;\n }\n\n .drawer__close:hover {\n cursor:pointer;\n }\n\n @media (forced-colors: active) {\n .drawer__panel {\n border: solid 1px hsl(0, 0%, 100%);\n }\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -49,7 +49,15 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
|
|
|
49
49
|
this.updateDisplayedText();
|
|
50
50
|
}
|
|
51
51
|
updateDisplayedText() {
|
|
52
|
-
|
|
52
|
+
if (this.isExpanded) {
|
|
53
|
+
this.displayedText = this.fullText;
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
const validConcatNumber = concatSentence(this.fullText, this.textLimit);
|
|
57
|
+
const truncatedText = this.fullText.slice(0, validConcatNumber);
|
|
58
|
+
const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';
|
|
59
|
+
this.displayedText = `${truncatedText}${ellipsis}`;
|
|
60
|
+
}
|
|
53
61
|
}
|
|
54
62
|
/* #endregion */
|
|
55
63
|
/* #region Methods */
|
|
@@ -58,7 +66,7 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
|
|
|
58
66
|
* @slot This is a slot test
|
|
59
67
|
*/
|
|
60
68
|
render() {
|
|
61
|
-
const showMoreButton = this.fullText.length > this.textLimit
|
|
69
|
+
const showMoreButton = this.fullText.length > this.textLimit;
|
|
62
70
|
const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
|
|
63
71
|
return html `
|
|
64
72
|
<div class="nile-form-help-text" part="container">
|
|
@@ -99,4 +107,26 @@ NileFormHelpText = __decorate([
|
|
|
99
107
|
], NileFormHelpText);
|
|
100
108
|
export { NileFormHelpText };
|
|
101
109
|
export default NileFormHelpText;
|
|
110
|
+
function concatSentence(sentence, n) {
|
|
111
|
+
if (n < 0 || n > sentence.length) {
|
|
112
|
+
throw new Error("Invalid value of n. It must be between 0 and the sentence length.");
|
|
113
|
+
}
|
|
114
|
+
// Adjust n if it falls in the middle of a word
|
|
115
|
+
if (sentence[n] !== " " && n !== 0 && n !== sentence.length) {
|
|
116
|
+
// Move left until the start of the word or the beginning of the sentence
|
|
117
|
+
let left = n;
|
|
118
|
+
while (left > 0 && sentence[left - 1] !== " ") {
|
|
119
|
+
left--;
|
|
120
|
+
}
|
|
121
|
+
// Move right until the end of the word or the end of the sentence
|
|
122
|
+
let right = n;
|
|
123
|
+
while (right < sentence.length && sentence[right] !== " ") {
|
|
124
|
+
right++;
|
|
125
|
+
}
|
|
126
|
+
// Adjust n to the closer boundary
|
|
127
|
+
n = (n - left <= right - n) ? left : right;
|
|
128
|
+
}
|
|
129
|
+
// Return the substring from the start to the adjusted n
|
|
130
|
+
return n;
|
|
131
|
+
}
|
|
102
132
|
//# sourceMappingURL=nile-form-help-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASwC,eAAU,GAAY,KAAK,CAAC;QAE7B,aAAQ,GAAW,EAAE,CAAC;QAEtB,cAAS,GAAW,EAAE,CAAC;QAEvB,kBAAa,GAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"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","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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n /**\n * The styles for FormHelpText\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true }) isExpanded: boolean = false;\n\n @property({ type: String, reflect: true }) fullText: string = '';\n\n @property({ type: Number, reflect: true }) textLimit: number = 47;\n\n @property({ type: String, reflect: true }) displayedText: string = '';\n\n @query('slot') slotElement!: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n requestAnimationFrame(() => {\n this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));\n });\n }\n\n firstUpdated() {\n this.handleSlotChange();\n }\n\n handleSlotChange() {\n const nodes = this.slotElement.assignedNodes({flatten: true});\n const textContent = nodes.map(node => node.textContent).join('');\n this.fullText = textContent.trim();\n this.updateDisplayedText()\n }\n\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n this.updateDisplayedText()\n }\n\n updateDisplayedText() {\n if (this.isExpanded) {\n this.displayedText = this.fullText;\n } else {\n const validConcatNumber=concatSentence(this.fullText, this.textLimit)\n const truncatedText = this.fullText.slice(0, validConcatNumber);\n const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';\n this.displayedText = `${truncatedText}${ellipsis}`;\n }\n }\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n const showMoreButton = this.fullText.length > this.textLimit;\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-form-help-text\" part=\"container\">\n <slot hidden>${this.fullText}</slot>\n <div part=\"text\">\n <span>${this.displayedText}</span>\n ${showMoreButton ? html`\n <span\n class=\"nile-form-help-text__more-button\"\n part=\"toggle-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span>\n ` : ''}\n </div>\n </div>\n `;\n }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-help-text': NileFormHelpText;\n }\n}\n\nfunction concatSentence(sentence:string, n:number) {\n if (n < 0 || n > sentence.length) {\n throw new Error(\"Invalid value of n. It must be between 0 and the sentence length.\");\n }\n\n // Adjust n if it falls in the middle of a word\n if (sentence[n] !== \" \" && n !== 0 && n !== sentence.length) {\n // Move left until the start of the word or the beginning of the sentence\n let left = n;\n while (left > 0 && sentence[left - 1] !== \" \") {\n left--;\n }\n\n // Move right until the end of the word or the end of the sentence\n let right = n;\n while (right < sentence.length && sentence[right] !== \" \") {\n right++;\n }\n\n // Adjust n to the closer boundary\n n = (n - left <= right - n) ? left : right;\n }\n\n // Return the substring from the start to the adjusted n\n return n;\n}\n"]}
|