@sparkle-learning/core 0.0.54 → 0.0.55
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/dist/cjs/{PrivateRoute-e2047db2.js → PrivateRoute-f97245ce.js} +2 -2
- package/dist/cjs/{appdata.service-d28cf2d6.js → appdata.service-c8d71e05.js} +1 -1
- package/dist/cjs/assignment.service-690fb59c.js +19 -0
- package/dist/cjs/{facilitator.service-0b9f6ac7.js → facilitator.service-ff0e1659.js} +1 -1
- package/dist/cjs/{feed.service-6df9382f.js → feed.service-8eca4de6.js} +1 -1
- package/dist/cjs/header-mobile-collapse_61.cjs.entry.js +9 -9
- package/dist/cjs/{httpService-d8a5b474.js → httpService-d2e7bf8f.js} +1 -1
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/{ion-action-sheet_4.cjs.entry.js → ion-action-sheet_7.cjs.entry.js} +728 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{media.service-2bc73d37.js → media.service-8a1b9bc5.js} +1 -1
- package/dist/cjs/{signalR.service-0d5da1d3.js → signalR.service-bd6b42f9.js} +1 -1
- package/dist/cjs/sparkle-assignment.cjs.entry.js +90 -5
- package/dist/cjs/sparkle-core.cjs.js +1 -1
- package/dist/cjs/sparkle-discussion-questions_2.cjs.entry.js +2 -2
- package/dist/cjs/sparkle-facilitator-notes-form.cjs.entry.js +3 -3
- package/dist/cjs/sparkle-feed-post.cjs.entry.js +116 -0
- package/dist/cjs/sparkle-feedback.cjs.entry.js +3 -3
- package/dist/cjs/sparkle-file-upload.cjs.entry.js +53 -0
- package/dist/cjs/sparkle-goal-form.cjs.entry.js +4 -4
- package/dist/cjs/sparkle-input.cjs.entry.js +56 -0
- package/dist/cjs/{student.service-d8ec2551.js → student.service-7e5385be.js} +1 -1
- package/dist/cjs/{token.service-bfb0089b.js → token.service-7a41953d.js} +11 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/sparkle-assignment/sparkle-assignment.css +27 -0
- package/dist/collection/components/sparkle-assignment/sparkle-assignment.js +141 -7
- package/dist/collection/components/sparkle-feed-post/sparkle-feed-post.js +2 -10
- package/dist/collection/components/sparkle-file-upload/sparkle-file-upload.css +0 -0
- package/dist/collection/components/sparkle-file-upload/sparkle-file-upload.js +105 -0
- package/dist/collection/components/sparkle-input/sparkle-input.css +0 -0
- package/dist/collection/components/sparkle-input/sparkle-input.js +212 -0
- package/dist/collection/services/token.service.js +11 -0
- package/dist/esm/{PrivateRoute-c6e80d5d.js → PrivateRoute-90ac95b8.js} +2 -2
- package/dist/esm/{appdata.service-d1058e00.js → appdata.service-2e84e167.js} +1 -1
- package/dist/esm/assignment.service-8d31f141.js +17 -0
- package/dist/esm/{facilitator.service-53e05a01.js → facilitator.service-18c47bdf.js} +1 -1
- package/dist/esm/{feed.service-8385ad7a.js → feed.service-b4f3cae4.js} +1 -1
- package/dist/esm/header-mobile-collapse_61.entry.js +10 -10
- package/dist/esm/{httpService-db476835.js → httpService-7986aeed.js} +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/{ion-action-sheet_4.entry.js → ion-action-sheet_7.entry.js} +729 -4
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-picker.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{media.service-b68cbfff.js → media.service-6e90bc41.js} +1 -1
- package/dist/esm/{overlays-3b4dca92.js → overlays-4233a39d.js} +1 -1
- package/dist/esm/{signalR.service-4a2d5a92.js → signalR.service-c33fba50.js} +1 -1
- package/dist/esm/sparkle-assignment.entry.js +91 -6
- package/dist/esm/sparkle-core.js +1 -1
- package/dist/esm/sparkle-discussion-questions_2.entry.js +2 -2
- package/dist/esm/sparkle-facilitator-notes-form.entry.js +4 -4
- package/dist/esm/sparkle-feed-post.entry.js +112 -0
- package/dist/esm/sparkle-feedback.entry.js +4 -4
- package/dist/esm/sparkle-file-upload.entry.js +49 -0
- package/dist/esm/sparkle-goal-form.entry.js +5 -5
- package/dist/esm/sparkle-input.entry.js +52 -0
- package/dist/esm/{student.service-6457aaa0.js → student.service-08af124f.js} +1 -1
- package/dist/esm/{token.service-20f1a256.js → token.service-71a5d33f.js} +11 -0
- package/dist/sparkle-core/index.esm.js +1 -1
- package/dist/sparkle-core/p-08420531.entry.js +1 -0
- package/dist/sparkle-core/p-08cca80d.entry.js +1 -0
- package/dist/sparkle-core/p-0e8e539f.entry.js +1 -0
- package/dist/sparkle-core/{p-11ac00b0.js → p-1adc98f6.js} +1 -1
- package/dist/sparkle-core/{p-71720d6e.entry.js → p-38c842d5.entry.js} +1 -1
- package/dist/sparkle-core/{p-38f707fb.js → p-39a31e43.js} +1 -1
- package/dist/sparkle-core/{p-6a1fc0af.entry.js → p-3daf2915.entry.js} +1 -1
- package/dist/sparkle-core/{p-dcff298d.entry.js → p-42ed7d5f.entry.js} +1 -1
- package/dist/sparkle-core/{p-6fab3a4b.js → p-4b4a8703.js} +1 -1
- package/dist/sparkle-core/{p-98f7780c.entry.js → p-4d1cfcbe.entry.js} +1 -1
- package/dist/sparkle-core/p-4fba3e4c.js +1 -0
- package/dist/sparkle-core/{p-54dd894f.entry.js → p-6bde0192.entry.js} +1 -1
- package/dist/sparkle-core/{p-6faa194c.entry.js → p-6d2f4093.entry.js} +1 -1
- package/dist/sparkle-core/{p-ed9de327.js → p-7dae0f0e.js} +1 -1
- package/dist/sparkle-core/p-973fe404.entry.js +22 -0
- package/dist/sparkle-core/{p-967a2ed7.js → p-b06e2bef.js} +1 -1
- package/dist/sparkle-core/{p-e863bf1d.entry.js → p-b6fec622.entry.js} +1 -1
- package/dist/sparkle-core/{p-630a4fa0.js → p-b8d71ff4.js} +1 -1
- package/dist/sparkle-core/{p-17b6b07e.js → p-c9f753a4.js} +1 -1
- package/dist/sparkle-core/{p-d51f30ca.js → p-da391f3f.js} +1 -1
- package/dist/sparkle-core/{p-38fa5987.js → p-e0cad1bb.js} +1 -1
- package/dist/sparkle-core/{p-ce4b22f7.entry.js → p-f196c124.entry.js} +1 -1
- package/dist/sparkle-core/p-f47fe1fe.entry.js +1 -0
- package/dist/sparkle-core/{p-e50c8b04.entry.js → p-f714f77a.entry.js} +1 -1
- package/dist/sparkle-core/{p-377b04c2.entry.js → p-ff080f82.entry.js} +1 -1
- package/dist/sparkle-core/{p-2ff67662.js → p-ff7a8a71.js} +1 -1
- package/dist/sparkle-core/sparkle-core.esm.js +1 -1
- package/dist/types/components/sparkle-assignment/sparkle-assignment.d.ts +11 -1
- package/dist/types/components/sparkle-feed-post/sparkle-feed-post.d.ts +1 -1
- package/dist/types/components/sparkle-file-upload/sparkle-file-upload.d.ts +15 -0
- package/dist/types/components/sparkle-input/sparkle-input.d.ts +23 -0
- package/dist/types/components.d.ts +62 -0
- package/dist/types/services/token.service.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +0 -627
- package/dist/cjs/ion-textarea.cjs.entry.js +0 -248
- package/dist/esm/ion-select_3.entry.js +0 -621
- package/dist/esm/ion-textarea.entry.js +0 -244
- package/dist/sparkle-core/p-0f1c5899.entry.js +0 -18
- package/dist/sparkle-core/p-33a7151d.entry.js +0 -1
- package/dist/sparkle-core/p-641bfc92.entry.js +0 -1
- package/dist/sparkle-core/p-ca907214.entry.js +0 -4
@@ -1,621 +0,0 @@
|
|
1
|
-
import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
|
2
|
-
import { g as getIonMode } from './ionic-global-4903e23e.js';
|
3
|
-
import { f as focusElement, k as findItemLabel, b as getAriaLabel, d as renderHiddenInput } from './helpers-bf0e23d6.js';
|
4
|
-
import { f as popoverController, h as actionSheetController, a as alertController } from './overlays-3b4dca92.js';
|
5
|
-
import { h as hostContext } from './theme-7ef00c83.js';
|
6
|
-
import { H as HttpService } from './httpService-db476835.js';
|
7
|
-
import { F as FeedService } from './feed.service-8385ad7a.js';
|
8
|
-
import { M as MediaService } from './media.service-b68cbfff.js';
|
9
|
-
import { T as TokenService } from './token.service-20f1a256.js';
|
10
|
-
import { S as SparkleGlobal } from './util-57cc8006.js';
|
11
|
-
import './hardware-back-button-fa04d6e9.js';
|
12
|
-
import './auth.store-dba2c2da.js';
|
13
|
-
import './environment-config.service-b191f276.js';
|
14
|
-
import './localstorage.service-4bf408c8.js';
|
15
|
-
|
16
|
-
/*!
|
17
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
18
|
-
*/
|
19
|
-
const watchForOptions = (containerEl, tagName, onChange) => {
|
20
|
-
if (typeof MutationObserver === 'undefined') {
|
21
|
-
return;
|
22
|
-
}
|
23
|
-
const mutation = new MutationObserver((mutationList) => {
|
24
|
-
onChange(getSelectedOption(mutationList, tagName));
|
25
|
-
});
|
26
|
-
mutation.observe(containerEl, {
|
27
|
-
childList: true,
|
28
|
-
subtree: true,
|
29
|
-
});
|
30
|
-
return mutation;
|
31
|
-
};
|
32
|
-
const getSelectedOption = (mutationList, tagName) => {
|
33
|
-
let newOption;
|
34
|
-
mutationList.forEach((mut) => {
|
35
|
-
// eslint-disable-next-line @typescript-eslint/prefer-for-of
|
36
|
-
for (let i = 0; i < mut.addedNodes.length; i++) {
|
37
|
-
newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
|
38
|
-
}
|
39
|
-
});
|
40
|
-
return newOption;
|
41
|
-
};
|
42
|
-
const findCheckedOption = (el, tagName) => {
|
43
|
-
if (el.nodeType !== 1) {
|
44
|
-
return undefined;
|
45
|
-
}
|
46
|
-
const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
|
47
|
-
return options.find((o) => o.value === el.value);
|
48
|
-
};
|
49
|
-
|
50
|
-
const selectIosCss = ":host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;align-items:center;font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.select-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{position:relative}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-icon-inner{left:5px;top:50%;margin-top:-2px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .select-icon-inner,:host-context([dir=rtl]) .select-icon-inner{left:unset;right:unset;right:5px}:host{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:20px}.select-icon{width:12px;height:18px;opacity:0.33}";
|
51
|
-
|
52
|
-
const selectMdCss = ":host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;align-items:center;font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.select-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{position:relative}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-icon-inner{left:5px;top:50%;margin-top:-2px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .select-icon-inner,:host-context([dir=rtl]) .select-icon-inner{left:unset;right:unset;right:5px}:host{--padding-top:10px;--padding-end:0;--padding-bottom:10px;--padding-start:16px}.select-icon{width:19px;height:19px;transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.55}:host-context(.item-label-stacked) .select-icon,:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,:host-context(.item-label-floating.item-fill-outline){transform:translate3d(0, -9px, 0)}:host-context(.item-has-focus) .select-icon{transform:rotate(180deg)}:host-context(.item-has-focus.item-label-stacked) .select-icon,:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon{transform:translate3d(0, -9px, 0) rotate(180deg)}:host-context(ion-item.ion-focused) .select-icon,:host-context(.item-has-focus) .select-icon{color:var(--highlight-color-focused);opacity:1}";
|
53
|
-
|
54
|
-
const Select = class {
|
55
|
-
constructor(hostRef) {
|
56
|
-
registerInstance(this, hostRef);
|
57
|
-
this.ionChange = createEvent(this, "ionChange", 7);
|
58
|
-
this.ionCancel = createEvent(this, "ionCancel", 7);
|
59
|
-
this.ionDismiss = createEvent(this, "ionDismiss", 7);
|
60
|
-
this.ionFocus = createEvent(this, "ionFocus", 7);
|
61
|
-
this.ionBlur = createEvent(this, "ionBlur", 7);
|
62
|
-
this.ionStyle = createEvent(this, "ionStyle", 7);
|
63
|
-
this.inputId = `ion-sel-${selectIds++}`;
|
64
|
-
this.didInit = false;
|
65
|
-
this.isExpanded = false;
|
66
|
-
/**
|
67
|
-
* If `true`, the user cannot interact with the select.
|
68
|
-
*/
|
69
|
-
this.disabled = false;
|
70
|
-
/**
|
71
|
-
* The text to display on the cancel button.
|
72
|
-
*/
|
73
|
-
this.cancelText = 'Cancel';
|
74
|
-
/**
|
75
|
-
* The text to display on the ok button.
|
76
|
-
*/
|
77
|
-
this.okText = 'OK';
|
78
|
-
/**
|
79
|
-
* The name of the control, which is submitted with the form data.
|
80
|
-
*/
|
81
|
-
this.name = this.inputId;
|
82
|
-
/**
|
83
|
-
* If `true`, the select can accept multiple values.
|
84
|
-
*/
|
85
|
-
this.multiple = false;
|
86
|
-
/**
|
87
|
-
* The interface the select should use: `action-sheet`, `popover` or `alert`.
|
88
|
-
*/
|
89
|
-
this.interface = 'alert';
|
90
|
-
/**
|
91
|
-
* Any additional options that the `alert`, `action-sheet` or `popover` interface
|
92
|
-
* can take. See the [ion-alert docs](./alert), the
|
93
|
-
* [ion-action-sheet docs](./action-sheet) and the
|
94
|
-
* [ion-popover docs](./popover) for the
|
95
|
-
* create options for each interface.
|
96
|
-
*
|
97
|
-
* Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
98
|
-
*/
|
99
|
-
this.interfaceOptions = {};
|
100
|
-
this.onClick = (ev) => {
|
101
|
-
this.setFocus();
|
102
|
-
this.open(ev);
|
103
|
-
};
|
104
|
-
this.onFocus = () => {
|
105
|
-
this.ionFocus.emit();
|
106
|
-
};
|
107
|
-
this.onBlur = () => {
|
108
|
-
this.ionBlur.emit();
|
109
|
-
};
|
110
|
-
}
|
111
|
-
styleChanged() {
|
112
|
-
this.emitStyle();
|
113
|
-
}
|
114
|
-
valueChanged() {
|
115
|
-
this.emitStyle();
|
116
|
-
// TODO: FW-1160 - Remove the `didInit` property when ionChange behavior is changed in v7.
|
117
|
-
if (this.didInit) {
|
118
|
-
this.ionChange.emit({
|
119
|
-
value: this.value,
|
120
|
-
});
|
121
|
-
}
|
122
|
-
}
|
123
|
-
async connectedCallback() {
|
124
|
-
this.updateOverlayOptions();
|
125
|
-
this.emitStyle();
|
126
|
-
this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
|
127
|
-
this.updateOverlayOptions();
|
128
|
-
});
|
129
|
-
}
|
130
|
-
disconnectedCallback() {
|
131
|
-
if (this.mutationO) {
|
132
|
-
this.mutationO.disconnect();
|
133
|
-
this.mutationO = undefined;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
componentDidLoad() {
|
137
|
-
this.didInit = true;
|
138
|
-
}
|
139
|
-
/**
|
140
|
-
* Open the select overlay. The overlay is either an alert, action sheet, or popover,
|
141
|
-
* depending on the `interface` property on the `ion-select`.
|
142
|
-
*
|
143
|
-
* @param event The user interface event that called the open.
|
144
|
-
*/
|
145
|
-
async open(event) {
|
146
|
-
if (this.disabled || this.isExpanded) {
|
147
|
-
return undefined;
|
148
|
-
}
|
149
|
-
this.isExpanded = true;
|
150
|
-
const overlay = (this.overlay = await this.createOverlay(event));
|
151
|
-
overlay.onDidDismiss().then(() => {
|
152
|
-
this.overlay = undefined;
|
153
|
-
this.isExpanded = false;
|
154
|
-
this.ionDismiss.emit();
|
155
|
-
this.setFocus();
|
156
|
-
});
|
157
|
-
await overlay.present();
|
158
|
-
// focus selected option for popovers
|
159
|
-
if (this.interface === 'popover') {
|
160
|
-
let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
|
161
|
-
indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
|
162
|
-
const selectedEl = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
|
163
|
-
if (selectedEl) {
|
164
|
-
focusElement(selectedEl);
|
165
|
-
}
|
166
|
-
}
|
167
|
-
return overlay;
|
168
|
-
}
|
169
|
-
createOverlay(ev) {
|
170
|
-
let selectInterface = this.interface;
|
171
|
-
if (selectInterface === 'action-sheet' && this.multiple) {
|
172
|
-
console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
|
173
|
-
selectInterface = 'alert';
|
174
|
-
}
|
175
|
-
if (selectInterface === 'popover' && !ev) {
|
176
|
-
console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
|
177
|
-
selectInterface = 'alert';
|
178
|
-
}
|
179
|
-
if (selectInterface === 'action-sheet') {
|
180
|
-
return this.openActionSheet();
|
181
|
-
}
|
182
|
-
if (selectInterface === 'popover') {
|
183
|
-
return this.openPopover(ev);
|
184
|
-
}
|
185
|
-
return this.openAlert();
|
186
|
-
}
|
187
|
-
updateOverlayOptions() {
|
188
|
-
const overlay = this.overlay;
|
189
|
-
if (!overlay) {
|
190
|
-
return;
|
191
|
-
}
|
192
|
-
const childOpts = this.childOpts;
|
193
|
-
const value = this.value;
|
194
|
-
switch (this.interface) {
|
195
|
-
case 'action-sheet':
|
196
|
-
overlay.buttons = this.createActionSheetButtons(childOpts, value);
|
197
|
-
break;
|
198
|
-
case 'popover':
|
199
|
-
const popover = overlay.querySelector('ion-select-popover');
|
200
|
-
if (popover) {
|
201
|
-
popover.options = this.createPopoverOptions(childOpts, value);
|
202
|
-
}
|
203
|
-
break;
|
204
|
-
case 'alert':
|
205
|
-
const inputType = this.multiple ? 'checkbox' : 'radio';
|
206
|
-
overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
|
207
|
-
break;
|
208
|
-
}
|
209
|
-
}
|
210
|
-
createActionSheetButtons(data, selectValue) {
|
211
|
-
const actionSheetButtons = data.map((option) => {
|
212
|
-
const value = getOptionValue(option);
|
213
|
-
// Remove hydrated before copying over classes
|
214
|
-
const copyClasses = Array.from(option.classList)
|
215
|
-
.filter((cls) => cls !== 'hydrated')
|
216
|
-
.join(' ');
|
217
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
218
|
-
return {
|
219
|
-
role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
|
220
|
-
text: option.textContent,
|
221
|
-
cssClass: optClass,
|
222
|
-
handler: () => {
|
223
|
-
this.value = value;
|
224
|
-
},
|
225
|
-
};
|
226
|
-
});
|
227
|
-
// Add "cancel" button
|
228
|
-
actionSheetButtons.push({
|
229
|
-
text: this.cancelText,
|
230
|
-
role: 'cancel',
|
231
|
-
handler: () => {
|
232
|
-
this.ionCancel.emit();
|
233
|
-
},
|
234
|
-
});
|
235
|
-
return actionSheetButtons;
|
236
|
-
}
|
237
|
-
createAlertInputs(data, inputType, selectValue) {
|
238
|
-
const alertInputs = data.map((option) => {
|
239
|
-
const value = getOptionValue(option);
|
240
|
-
// Remove hydrated before copying over classes
|
241
|
-
const copyClasses = Array.from(option.classList)
|
242
|
-
.filter((cls) => cls !== 'hydrated')
|
243
|
-
.join(' ');
|
244
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
245
|
-
return {
|
246
|
-
type: inputType,
|
247
|
-
cssClass: optClass,
|
248
|
-
label: option.textContent || '',
|
249
|
-
value,
|
250
|
-
checked: isOptionSelected(selectValue, value, this.compareWith),
|
251
|
-
disabled: option.disabled,
|
252
|
-
};
|
253
|
-
});
|
254
|
-
return alertInputs;
|
255
|
-
}
|
256
|
-
createPopoverOptions(data, selectValue) {
|
257
|
-
const popoverOptions = data.map((option) => {
|
258
|
-
const value = getOptionValue(option);
|
259
|
-
// Remove hydrated before copying over classes
|
260
|
-
const copyClasses = Array.from(option.classList)
|
261
|
-
.filter((cls) => cls !== 'hydrated')
|
262
|
-
.join(' ');
|
263
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
264
|
-
return {
|
265
|
-
text: option.textContent || '',
|
266
|
-
cssClass: optClass,
|
267
|
-
value,
|
268
|
-
checked: isOptionSelected(selectValue, value, this.compareWith),
|
269
|
-
disabled: option.disabled,
|
270
|
-
handler: (selected) => {
|
271
|
-
this.value = selected;
|
272
|
-
if (!this.multiple) {
|
273
|
-
this.close();
|
274
|
-
}
|
275
|
-
},
|
276
|
-
};
|
277
|
-
});
|
278
|
-
return popoverOptions;
|
279
|
-
}
|
280
|
-
async openPopover(ev) {
|
281
|
-
const interfaceOptions = this.interfaceOptions;
|
282
|
-
const mode = getIonMode(this);
|
283
|
-
const showBackdrop = mode === 'md' ? false : true;
|
284
|
-
const multiple = this.multiple;
|
285
|
-
const value = this.value;
|
286
|
-
let event = ev;
|
287
|
-
let size = 'auto';
|
288
|
-
const item = this.el.closest('ion-item');
|
289
|
-
// If the select is inside of an item containing a floating
|
290
|
-
// or stacked label then the popover should take up the
|
291
|
-
// full width of the item when it presents
|
292
|
-
if (item && (item.classList.contains('item-label-floating') || item.classList.contains('item-label-stacked'))) {
|
293
|
-
event = Object.assign(Object.assign({}, ev), { detail: {
|
294
|
-
ionShadowTarget: item,
|
295
|
-
} });
|
296
|
-
size = 'cover';
|
297
|
-
}
|
298
|
-
const popoverOpts = Object.assign(Object.assign({ mode,
|
299
|
-
event, alignment: 'center', size,
|
300
|
-
showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
|
301
|
-
header: interfaceOptions.header,
|
302
|
-
subHeader: interfaceOptions.subHeader,
|
303
|
-
message: interfaceOptions.message,
|
304
|
-
multiple,
|
305
|
-
value,
|
306
|
-
options: this.createPopoverOptions(this.childOpts, value),
|
307
|
-
} });
|
308
|
-
return popoverController.create(popoverOpts);
|
309
|
-
}
|
310
|
-
async openActionSheet() {
|
311
|
-
const mode = getIonMode(this);
|
312
|
-
const interfaceOptions = this.interfaceOptions;
|
313
|
-
const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
|
314
|
-
return actionSheetController.create(actionSheetOpts);
|
315
|
-
}
|
316
|
-
async openAlert() {
|
317
|
-
const label = this.getLabel();
|
318
|
-
const labelText = label ? label.textContent : null;
|
319
|
-
const interfaceOptions = this.interfaceOptions;
|
320
|
-
const inputType = this.multiple ? 'checkbox' : 'radio';
|
321
|
-
const mode = getIonMode(this);
|
322
|
-
const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
|
323
|
-
{
|
324
|
-
text: this.cancelText,
|
325
|
-
role: 'cancel',
|
326
|
-
handler: () => {
|
327
|
-
this.ionCancel.emit();
|
328
|
-
},
|
329
|
-
},
|
330
|
-
{
|
331
|
-
text: this.okText,
|
332
|
-
handler: (selectedValues) => {
|
333
|
-
this.value = selectedValues;
|
334
|
-
},
|
335
|
-
},
|
336
|
-
], cssClass: [
|
337
|
-
'select-alert',
|
338
|
-
interfaceOptions.cssClass,
|
339
|
-
this.multiple ? 'multiple-select-alert' : 'single-select-alert',
|
340
|
-
] });
|
341
|
-
return alertController.create(alertOpts);
|
342
|
-
}
|
343
|
-
/**
|
344
|
-
* Close the select interface.
|
345
|
-
*/
|
346
|
-
close() {
|
347
|
-
// TODO check !this.overlay || !this.isFocus()
|
348
|
-
if (!this.overlay) {
|
349
|
-
return Promise.resolve(false);
|
350
|
-
}
|
351
|
-
return this.overlay.dismiss();
|
352
|
-
}
|
353
|
-
getLabel() {
|
354
|
-
return findItemLabel(this.el);
|
355
|
-
}
|
356
|
-
hasValue() {
|
357
|
-
return this.getText() !== '';
|
358
|
-
}
|
359
|
-
get childOpts() {
|
360
|
-
return Array.from(this.el.querySelectorAll('ion-select-option'));
|
361
|
-
}
|
362
|
-
getText() {
|
363
|
-
const selectedText = this.selectedText;
|
364
|
-
if (selectedText != null && selectedText !== '') {
|
365
|
-
return selectedText;
|
366
|
-
}
|
367
|
-
return generateText(this.childOpts, this.value, this.compareWith);
|
368
|
-
}
|
369
|
-
setFocus() {
|
370
|
-
if (this.focusEl) {
|
371
|
-
this.focusEl.focus();
|
372
|
-
}
|
373
|
-
}
|
374
|
-
emitStyle() {
|
375
|
-
this.ionStyle.emit({
|
376
|
-
interactive: true,
|
377
|
-
'interactive-disabled': this.disabled,
|
378
|
-
select: true,
|
379
|
-
'select-disabled': this.disabled,
|
380
|
-
'has-placeholder': this.placeholder !== undefined,
|
381
|
-
'has-value': this.hasValue(),
|
382
|
-
'has-focus': this.isExpanded,
|
383
|
-
});
|
384
|
-
}
|
385
|
-
render() {
|
386
|
-
const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
|
387
|
-
const mode = getIonMode(this);
|
388
|
-
const { labelText, labelId } = getAriaLabel(el, inputId);
|
389
|
-
renderHiddenInput(true, el, name, parseValue(value), disabled);
|
390
|
-
const displayValue = this.getText();
|
391
|
-
let addPlaceholderClass = false;
|
392
|
-
let selectText = displayValue;
|
393
|
-
if (selectText === '' && placeholder !== undefined) {
|
394
|
-
selectText = placeholder;
|
395
|
-
addPlaceholderClass = true;
|
396
|
-
}
|
397
|
-
const selectTextClasses = {
|
398
|
-
'select-text': true,
|
399
|
-
'select-placeholder': addPlaceholderClass,
|
400
|
-
};
|
401
|
-
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
402
|
-
// If there is a label then we need to concatenate it with the
|
403
|
-
// current value (or placeholder) and a comma so it separates
|
404
|
-
// nicely when the screen reader announces it, otherwise just
|
405
|
-
// announce the value / placeholder
|
406
|
-
const displayLabel = labelText !== undefined ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText) : selectText;
|
407
|
-
return (h(Host, { onClick: this.onClick, role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, "aria-label": displayLabel, class: {
|
408
|
-
[mode]: true,
|
409
|
-
'in-item': hostContext('ion-item', el),
|
410
|
-
'select-disabled': disabled,
|
411
|
-
'select-expanded': isExpanded,
|
412
|
-
} }, h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText), h("div", { class: "select-icon", role: "presentation", part: "icon" }, h("div", { class: "select-icon-inner" })), h("label", { id: labelId }, displayLabel), h("button", { type: "button", disabled: disabled, id: inputId, "aria-labelledby": labelId, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) })));
|
413
|
-
}
|
414
|
-
get el() { return getElement(this); }
|
415
|
-
static get watchers() { return {
|
416
|
-
"disabled": ["styleChanged"],
|
417
|
-
"placeholder": ["styleChanged"],
|
418
|
-
"isExpanded": ["styleChanged"],
|
419
|
-
"value": ["valueChanged"]
|
420
|
-
}; }
|
421
|
-
};
|
422
|
-
const isOptionSelected = (currentValue, compareValue, compareWith) => {
|
423
|
-
if (currentValue === undefined) {
|
424
|
-
return false;
|
425
|
-
}
|
426
|
-
if (Array.isArray(currentValue)) {
|
427
|
-
return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
|
428
|
-
}
|
429
|
-
else {
|
430
|
-
return compareOptions(currentValue, compareValue, compareWith);
|
431
|
-
}
|
432
|
-
};
|
433
|
-
const getOptionValue = (el) => {
|
434
|
-
const value = el.value;
|
435
|
-
return value === undefined ? el.textContent || '' : value;
|
436
|
-
};
|
437
|
-
const parseValue = (value) => {
|
438
|
-
if (value == null) {
|
439
|
-
return undefined;
|
440
|
-
}
|
441
|
-
if (Array.isArray(value)) {
|
442
|
-
return value.join(',');
|
443
|
-
}
|
444
|
-
return value.toString();
|
445
|
-
};
|
446
|
-
const compareOptions = (currentValue, compareValue, compareWith) => {
|
447
|
-
if (typeof compareWith === 'function') {
|
448
|
-
return compareWith(currentValue, compareValue);
|
449
|
-
}
|
450
|
-
else if (typeof compareWith === 'string') {
|
451
|
-
return currentValue[compareWith] === compareValue[compareWith];
|
452
|
-
}
|
453
|
-
else {
|
454
|
-
return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
|
455
|
-
}
|
456
|
-
};
|
457
|
-
const generateText = (opts, value, compareWith) => {
|
458
|
-
if (value === undefined) {
|
459
|
-
return '';
|
460
|
-
}
|
461
|
-
if (Array.isArray(value)) {
|
462
|
-
return value
|
463
|
-
.map((v) => textForValue(opts, v, compareWith))
|
464
|
-
.filter((opt) => opt !== null)
|
465
|
-
.join(', ');
|
466
|
-
}
|
467
|
-
else {
|
468
|
-
return textForValue(opts, value, compareWith) || '';
|
469
|
-
}
|
470
|
-
};
|
471
|
-
const textForValue = (opts, value, compareWith) => {
|
472
|
-
const selectOpt = opts.find((opt) => {
|
473
|
-
return compareOptions(getOptionValue(opt), value, compareWith);
|
474
|
-
});
|
475
|
-
return selectOpt ? selectOpt.textContent : null;
|
476
|
-
};
|
477
|
-
let selectIds = 0;
|
478
|
-
const OPTION_CLASS = 'select-interface-option';
|
479
|
-
Select.style = {
|
480
|
-
ios: selectIosCss,
|
481
|
-
md: selectMdCss
|
482
|
-
};
|
483
|
-
|
484
|
-
const selectOptionCss = ":host{display:none}";
|
485
|
-
|
486
|
-
const SelectOption = class {
|
487
|
-
constructor(hostRef) {
|
488
|
-
registerInstance(this, hostRef);
|
489
|
-
this.inputId = `ion-selopt-${selectOptionIds++}`;
|
490
|
-
/**
|
491
|
-
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
|
492
|
-
*/
|
493
|
-
this.disabled = false;
|
494
|
-
}
|
495
|
-
render() {
|
496
|
-
return h(Host, { role: "option", id: this.inputId, class: getIonMode(this) });
|
497
|
-
}
|
498
|
-
get el() { return getElement(this); }
|
499
|
-
};
|
500
|
-
let selectOptionIds = 0;
|
501
|
-
SelectOption.style = selectOptionCss;
|
502
|
-
|
503
|
-
class AssignmentService {
|
504
|
-
constructor() { }
|
505
|
-
static getInstance() {
|
506
|
-
if (!AssignmentService.instance) {
|
507
|
-
AssignmentService.instance = new AssignmentService();
|
508
|
-
}
|
509
|
-
return AssignmentService.instance;
|
510
|
-
}
|
511
|
-
async createAssignment(payload) {
|
512
|
-
let result = await HttpService.http.post(`api/v1/Assignment/Create`, payload);
|
513
|
-
return result;
|
514
|
-
}
|
515
|
-
}
|
516
|
-
|
517
|
-
const sparkleFeedPostCss = ":host{display:block}.post-footer-container{display:flex;justify-content:flex-end}.post-footer{display:flex;justify-content:space-between;align-items:center}.error{color:red;margin-right:10px}.success{color:green;margin-right:10px}.uploaded-image{display:block;max-height:140px;width:auto !important}.public-post-toggle{display:flex;justify-content:flex-end;align-items:center}.assignment-name{display:none}";
|
518
|
-
|
519
|
-
const SparkleFeedPost = class {
|
520
|
-
constructor(hostRef) {
|
521
|
-
registerInstance(this, hostRef);
|
522
|
-
}
|
523
|
-
// @Prop({ connect: 'ion-toast-controller' })
|
524
|
-
// toastCtrl: HTMLIonToastControllerElement;
|
525
|
-
componentDidLoad() {
|
526
|
-
this.postText = this.textValue;
|
527
|
-
if (this.ref && this.ref.innerText) {
|
528
|
-
this.assignmentName = this.ref.innerText;
|
529
|
-
console.log(this.assignmentName);
|
530
|
-
}
|
531
|
-
}
|
532
|
-
setText(text) {
|
533
|
-
this.postText = text;
|
534
|
-
}
|
535
|
-
isAuthenticated() {
|
536
|
-
try {
|
537
|
-
let token = TokenService.getInstance().getTokenSync();
|
538
|
-
if (!!token) {
|
539
|
-
return true;
|
540
|
-
}
|
541
|
-
}
|
542
|
-
catch (_a) {
|
543
|
-
return false;
|
544
|
-
}
|
545
|
-
}
|
546
|
-
async submitPost() {
|
547
|
-
this.postLoading = true;
|
548
|
-
this.errorMessage = '';
|
549
|
-
this.successMessage = '';
|
550
|
-
//let formData = new FormData(this.el.querySelector("form")) as any;
|
551
|
-
//var postText = this.el.getElementsByClassName("PostText")[0] as HTMLInputElement;
|
552
|
-
var postExternalUrl = this.el.getElementsByClassName('PostExternalUrl')[0];
|
553
|
-
var isPublic = this.el.getElementsByClassName('IsPublic')[0];
|
554
|
-
var data = {
|
555
|
-
PostText: this.postText,
|
556
|
-
IsPublic: isPublic.checked,
|
557
|
-
ExternalResourceUrl: postExternalUrl.value,
|
558
|
-
MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
|
559
|
-
AssignmentName: this.assignmentName,
|
560
|
-
AssignmentData: '',
|
561
|
-
PostTextJSON: null,
|
562
|
-
};
|
563
|
-
const result = await FeedService.getInstance().createPost(data);
|
564
|
-
if (result.Succeeded) {
|
565
|
-
this.postLoading = false;
|
566
|
-
//show success toast
|
567
|
-
this.successMessage = 'Posted Successfully.';
|
568
|
-
this.postText = '';
|
569
|
-
this.externalResourceUrl = '';
|
570
|
-
this.uploadedImage = '';
|
571
|
-
}
|
572
|
-
else {
|
573
|
-
this.postLoading = false;
|
574
|
-
this.errorMessage = 'There is an error while posting to feed.';
|
575
|
-
}
|
576
|
-
if (this.assignmentName) {
|
577
|
-
var assignmentModel = {
|
578
|
-
AssignmentData: JSON.stringify({ text: data.PostText, url: data.ExternalResourceUrl }),
|
579
|
-
AssignmentName: this.assignmentName,
|
580
|
-
};
|
581
|
-
await AssignmentService.getInstance().createAssignment(assignmentModel);
|
582
|
-
}
|
583
|
-
}
|
584
|
-
async uploadImage(evt) {
|
585
|
-
this.uploadImageLoading = true;
|
586
|
-
var files = evt.target.files;
|
587
|
-
let result = await MediaService.getInstance().uploadImage(files);
|
588
|
-
if (result.Succeeded) {
|
589
|
-
console.log(result);
|
590
|
-
this.uploadImageLoading = false;
|
591
|
-
this.uploadedImage = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
|
592
|
-
this.externalResourceUrl = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
|
593
|
-
}
|
594
|
-
else {
|
595
|
-
this.uploadImageLoading = false;
|
596
|
-
this.errorMessage = 'There is an error while uploading an image.';
|
597
|
-
}
|
598
|
-
}
|
599
|
-
selectFile() {
|
600
|
-
var fileInput = document.getElementById('fileInput');
|
601
|
-
fileInput.click();
|
602
|
-
}
|
603
|
-
renderUserInfo() {
|
604
|
-
let authUser = TokenService.getInstance().getAuthUserSync();
|
605
|
-
//var tokenInfo = { Token: null, ProfileImageUrl: null };
|
606
|
-
if (authUser && authUser.JWToken) {
|
607
|
-
return (h("ion-avatar", { class: "header-avatar", slot: "end" }, authUser.PhotoUrl ? h("img", { src: authUser.PhotoUrl }) : h("img", { src: "/assets/img/user.png" })));
|
608
|
-
}
|
609
|
-
else {
|
610
|
-
return (h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
|
611
|
-
}
|
612
|
-
}
|
613
|
-
render() {
|
614
|
-
const userInfo = this.renderUserInfo();
|
615
|
-
return (h(Host, null, h("div", { class: "assignment-name", ref: el => (this.ref = el) }, h("slot", null)), h("ion-card", null, h("ion-item", { class: "header", lines: "full" }, userInfo), h("ion-card-content", null, h("form", null, h("ion-list", null, h("ion-item", { class: "padding" }, h("ion-textarea", { class: "PostText", required: true, placeholder: "Post Text", name: "PostText", value: this.postText })), h("ion-item", { class: "padding" }, h("ion-input", { class: "PostExternalUrl", required: true, type: "text", placeholder: "URL", name: "ExternalResourceUrl", value: this.externalResourceUrl })), this.uploadedImage ? (h("ion-item", { class: "ion-padding", lines: "none" }, h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''), h("ion-item", { lines: "none" }, h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*" }), this.uploadImageLoading ? h("ion-spinner", { color: "primary" }) : '', h("ion-button", { slot: "start", onClick: evt => this.selectFile() }, h("ion-icon", { name: "add" }), "Upload Image")), h("div", { class: "public-post-toggle" }, h("ion-toggle", { class: "IsPublic", color: "primary", name: "IsPublic" }), h("div", null, "Public Post")), h("div", { class: "post-footer-container" }, h("div", { class: "post-footer" }, h("div", null, h("div", { class: "error" }, this.errorMessage), h("div", { class: "success" }, this.successMessage)), h("div", null, this.postLoading ? h("ion-spinner", { color: "primary" }) : ''), h("ion-button", { slot: "end", size: "default", onClick: evt => this.submitPost(), disabled: this.postLoading || !this.isAuthenticated() }, "Post")))))))));
|
616
|
-
}
|
617
|
-
get el() { return getElement(this); }
|
618
|
-
};
|
619
|
-
SparkleFeedPost.style = sparkleFeedPostCss;
|
620
|
-
|
621
|
-
export { Select as ion_select, SelectOption as ion_select_option, SparkleFeedPost as sparkle_feed_post };
|