@esri/solutions-components 0.2.6 → 0.2.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/deduct-calculator.cjs.entry.js +1 -1
- package/dist/cjs/pci-calculator.cjs.entry.js +1 -1
- package/dist/cjs/{pciUtils-6a806ba4.js → pciUtils-423cfc68.js} +25 -7
- package/dist/collection/demos/deduct-calculator.html +2 -5
- package/dist/collection/demos/new-public-notification.html +6 -4
- package/dist/collection/utils/pciUtils.js +25 -7
- package/dist/collection/utils/pciUtils.ts +30 -7
- package/dist/components/ExpandToggle.js +110 -0
- package/dist/components/Heading.js +22 -0
- package/dist/components/_commonjsHelpers.js +22 -0
- package/dist/components/action-bar.js +276 -0
- package/dist/components/action-group.js +149 -0
- package/dist/components/action-menu.js +356 -0
- package/dist/components/action.js +214 -0
- package/dist/components/add-record-modal.d.ts +11 -0
- package/dist/components/add-record-modal.js +171 -0
- package/dist/components/array.js +15 -0
- package/dist/components/block.js +272 -0
- package/dist/components/buffer-tools.d.ts +11 -0
- package/dist/components/buffer-tools.js +11 -0
- package/dist/components/buffer-tools2.js +262 -0
- package/dist/components/button.js +263 -0
- package/dist/components/calcite-accordion-item.js +244 -0
- package/dist/components/calcite-accordion.js +180 -0
- package/dist/components/calcite-action-bar.js +11 -0
- package/dist/components/calcite-action-group.js +11 -0
- package/dist/components/calcite-action-menu.js +11 -0
- package/dist/components/calcite-action-pad.js +197 -0
- package/dist/components/calcite-action.js +11 -0
- package/dist/components/calcite-alert.js +297 -0
- package/dist/components/calcite-avatar.js +182 -0
- package/dist/components/calcite-block-section.js +155 -0
- package/dist/components/calcite-block.js +11 -0
- package/dist/components/calcite-button.js +11 -0
- package/dist/components/calcite-card.js +187 -0
- package/dist/components/calcite-checkbox.js +11 -0
- package/dist/components/calcite-chip.js +11 -0
- package/dist/components/calcite-color-picker-hex-input.js +11 -0
- package/dist/components/calcite-color-picker-swatch.js +11 -0
- package/dist/components/calcite-color-picker.js +1036 -0
- package/dist/components/calcite-combobox-item-group.js +75 -0
- package/dist/components/calcite-combobox-item.js +11 -0
- package/dist/components/calcite-combobox.js +11 -0
- package/dist/components/calcite-date-picker-day.js +11 -0
- package/dist/components/calcite-date-picker-month-header.js +11 -0
- package/dist/components/calcite-date-picker-month.js +11 -0
- package/dist/components/calcite-date-picker.js +11 -0
- package/dist/components/calcite-dropdown-group.js +11 -0
- package/dist/components/calcite-dropdown-item.js +11 -0
- package/dist/components/calcite-dropdown.js +11 -0
- package/dist/components/calcite-fab.js +144 -0
- package/dist/components/calcite-filter.js +195 -0
- package/dist/components/calcite-flow-item.js +243 -0
- package/dist/components/calcite-flow.js +147 -0
- package/dist/components/calcite-graph.js +11 -0
- package/dist/components/calcite-handle.js +11 -0
- package/dist/components/calcite-icon.js +11 -0
- package/dist/components/calcite-inline-editable.js +294 -0
- package/dist/components/calcite-input-date-picker.js +713 -0
- package/dist/components/calcite-input-message.js +11 -0
- package/dist/components/calcite-input-number.js +637 -0
- package/dist/components/calcite-input-text.js +400 -0
- package/dist/components/calcite-input-time-picker.js +434 -0
- package/dist/components/calcite-input.js +11 -0
- package/dist/components/calcite-label.js +11 -0
- package/dist/components/calcite-link.js +11 -0
- package/dist/components/calcite-list-item-group.js +65 -0
- package/dist/components/calcite-list-item.js +11 -0
- package/dist/components/calcite-list.js +11 -0
- package/dist/components/calcite-loader.js +11 -0
- package/dist/components/calcite-modal.js +11 -0
- package/dist/components/calcite-notice.js +11 -0
- package/dist/components/calcite-option-group.js +64 -0
- package/dist/components/calcite-option.js +11 -0
- package/dist/components/calcite-pagination.js +258 -0
- package/dist/components/calcite-panel.js +11 -0
- package/dist/components/calcite-pick-list-group.js +74 -0
- package/dist/components/calcite-pick-list-item.js +11 -0
- package/dist/components/calcite-pick-list.js +11 -0
- package/dist/components/calcite-popover-manager.js +94 -0
- package/dist/components/calcite-popover.js +11 -0
- package/dist/components/calcite-progress.js +11 -0
- package/dist/components/calcite-radio-button-group.js +132 -0
- package/dist/components/calcite-radio-button.js +310 -0
- package/dist/components/calcite-radio-group-item.js +11 -0
- package/dist/components/calcite-radio-group.js +11 -0
- package/dist/components/calcite-rating.js +201 -0
- package/dist/components/calcite-scrim.js +11 -0
- package/dist/components/calcite-select.js +11 -0
- package/dist/components/calcite-shell-center-row.js +100 -0
- package/dist/components/calcite-shell-panel.js +11 -0
- package/dist/components/calcite-shell.js +11 -0
- package/dist/components/calcite-slider.js +11 -0
- package/dist/components/calcite-sortable-list.js +202 -0
- package/dist/components/calcite-split-button.js +11 -0
- package/dist/components/calcite-stepper-item.js +271 -0
- package/dist/components/calcite-stepper.js +256 -0
- package/dist/components/calcite-switch.js +11 -0
- package/dist/components/calcite-tab-nav.js +11 -0
- package/dist/components/calcite-tab-title.js +11 -0
- package/dist/components/calcite-tab.js +11 -0
- package/dist/components/calcite-tabs.js +11 -0
- package/dist/components/calcite-tile-select-group.js +65 -0
- package/dist/components/calcite-tile-select.js +266 -0
- package/dist/components/calcite-tile.js +11 -0
- package/dist/components/calcite-time-picker.js +11 -0
- package/dist/components/calcite-tip-group.js +41 -0
- package/dist/components/calcite-tip-manager.js +223 -0
- package/dist/components/calcite-tip.js +162 -0
- package/dist/components/calcite-tooltip-manager.js +57 -0
- package/dist/components/calcite-tooltip.js +11 -0
- package/dist/components/calcite-tree-item.js +11 -0
- package/dist/components/calcite-tree.js +11 -0
- package/dist/components/calcite-value-list-item.js +11 -0
- package/dist/components/calcite-value-list.js +11 -0
- package/dist/components/card-manager.d.ts +11 -0
- package/dist/components/card-manager.js +143 -0
- package/dist/components/check-list.d.ts +11 -0
- package/dist/components/check-list.js +11 -0
- package/dist/components/check-list2.js +131 -0
- package/dist/components/checkbox.js +165 -0
- package/dist/components/chip.js +170 -0
- package/dist/components/color-picker-hex-input.js +363 -0
- package/dist/components/color-picker-swatch.js +2034 -0
- package/dist/components/combobox-item.js +182 -0
- package/dist/components/combobox.js +912 -0
- package/dist/components/comment-card.d.ts +11 -0
- package/dist/components/comment-card.js +90 -0
- package/dist/components/conditionalSlot.js +50 -0
- package/dist/components/config-buffer-tools.d.ts +11 -0
- package/dist/components/config-buffer-tools.js +187 -0
- package/dist/components/config-draw-tools.d.ts +11 -0
- package/dist/components/config-draw-tools.js +121 -0
- package/dist/components/config-layer-picker.d.ts +11 -0
- package/dist/components/config-layer-picker.js +163 -0
- package/dist/components/config-pdf-download.d.ts +11 -0
- package/dist/components/config-pdf-download.js +154 -0
- package/dist/components/crowdsource-manager.d.ts +11 -0
- package/dist/components/crowdsource-manager.js +90 -0
- package/dist/components/crowdsource-reporter.d.ts +11 -0
- package/dist/components/crowdsource-reporter.js +90 -0
- package/dist/components/csvUtils.js +74 -0
- package/dist/components/date-picker-day.js +111 -0
- package/dist/components/date-picker-month-header.js +224 -0
- package/dist/components/date-picker-month.js +344 -0
- package/dist/components/date-picker.js +575 -0
- package/dist/components/date.js +180 -0
- package/dist/components/debounce.js +487 -0
- package/dist/components/deduct-calculator.d.ts +11 -0
- package/dist/components/deduct-calculator.js +11 -0
- package/dist/components/deduct-calculator2.js +1002 -0
- package/dist/components/dom.js +231 -0
- package/dist/components/dropdown-group.js +96 -0
- package/dist/components/dropdown-item.js +232 -0
- package/dist/components/dropdown.js +505 -0
- package/dist/components/edit-record-modal.d.ts +11 -0
- package/dist/components/edit-record-modal.js +11 -0
- package/dist/components/edit-record-modal2.js +161 -0
- package/dist/components/filter.js +763 -0
- package/dist/components/floating-ui.js +1768 -0
- package/dist/components/form.js +228 -0
- package/dist/components/graph.js +254 -0
- package/dist/components/guid.js +24 -0
- package/dist/components/handle.js +119 -0
- package/dist/components/icon.js +202 -0
- package/dist/components/index.d.ts +61 -0
- package/dist/components/index.js +196 -0
- package/dist/components/index2.js +199 -0
- package/dist/components/info-card.d.ts +11 -0
- package/dist/components/info-card.js +11 -0
- package/dist/components/info-card2.js +97 -0
- package/dist/components/input-message.js +101 -0
- package/dist/components/input.js +740 -0
- package/dist/components/interactive.js +51 -0
- package/dist/components/interfaces.js +19 -0
- package/dist/components/interfaces2.js +21 -0
- package/dist/components/interfaces3.js +80 -0
- package/dist/components/json-editor.d.ts +11 -0
- package/dist/components/json-editor.js +11 -0
- package/dist/components/json-editor2.js +441 -0
- package/dist/components/key.js +16 -0
- package/dist/components/label.js +106 -0
- package/dist/components/label2.js +131 -0
- package/dist/components/labelFormats.js +210 -0
- package/dist/components/layer-table.d.ts +11 -0
- package/dist/components/layer-table.js +453 -0
- package/dist/components/link.js +123 -0
- package/dist/components/list-item.d.ts +11 -0
- package/dist/components/list-item.js +90 -0
- package/dist/components/list-item2.js +149 -0
- package/dist/components/list.js +83 -0
- package/dist/components/loadModules.js +28 -0
- package/dist/components/loader.js +116 -0
- package/dist/components/locale.js +412 -0
- package/dist/components/locale2.js +413 -0
- package/dist/components/map-card.d.ts +11 -0
- package/dist/components/map-card.js +354 -0
- package/dist/components/map-draw-tools.d.ts +11 -0
- package/dist/components/map-draw-tools.js +11 -0
- package/dist/components/map-draw-tools2.js +228 -0
- package/dist/components/map-layer-picker.d.ts +11 -0
- package/dist/components/map-layer-picker.js +11 -0
- package/dist/components/map-layer-picker2.js +188 -0
- package/dist/components/map-search.d.ts +11 -0
- package/dist/components/map-search.js +155 -0
- package/dist/components/map-select-tools.d.ts +11 -0
- package/dist/components/map-select-tools.js +11 -0
- package/dist/components/map-select-tools2.js +588 -0
- package/dist/components/mapViewUtils.js +129 -0
- package/dist/components/math.js +24 -0
- package/dist/components/media-card.d.ts +11 -0
- package/dist/components/media-card.js +11 -0
- package/dist/components/media-card2.js +177 -0
- package/dist/components/modal.js +495 -0
- package/dist/components/nonChromiumPlatformUtils.js +503 -0
- package/dist/components/notice.js +192 -0
- package/dist/components/observers.js +56 -0
- package/dist/components/openCloseComponent.js +56 -0
- package/dist/components/option.js +109 -0
- package/dist/components/panel.js +459 -0
- package/dist/components/pci-calculator.d.ts +11 -0
- package/dist/components/pci-calculator.js +193 -0
- package/dist/components/pdf-download.d.ts +11 -0
- package/dist/components/pdf-download.js +11 -0
- package/dist/components/pdf-download2.js +189 -0
- package/dist/components/pick-list-item.js +255 -0
- package/dist/components/pick-list.js +170 -0
- package/dist/components/popover.js +500 -0
- package/dist/components/progress.js +60 -0
- package/dist/components/public-notification.d.ts +11 -0
- package/dist/components/public-notification.js +825 -0
- package/dist/components/publicNotificationStore.js +38 -0
- package/dist/components/queryUtils.js +187 -0
- package/dist/components/radio-group-item.js +101 -0
- package/dist/components/radio-group.js +235 -0
- package/dist/components/refine-selection-tools.d.ts +11 -0
- package/dist/components/refine-selection-tools.js +11 -0
- package/dist/components/refine-selection-tools2.js +492 -0
- package/dist/components/refine-selection.d.ts +11 -0
- package/dist/components/refine-selection.js +11 -0
- package/dist/components/refine-selection2.js +376 -0
- package/dist/components/resources.js +24 -0
- package/dist/components/resources2.js +21 -0
- package/dist/components/resources3.js +38 -0
- package/dist/components/scrim.js +83 -0
- package/dist/components/select.js +259 -0
- package/dist/components/shared-list-render.js +319 -0
- package/dist/components/shell-panel.js +281 -0
- package/dist/components/shell.js +121 -0
- package/dist/components/slider.js +896 -0
- package/dist/components/solution-configuration.d.ts +11 -0
- package/dist/components/solution-configuration.js +2233 -0
- package/dist/components/solution-contents.d.ts +11 -0
- package/dist/components/solution-contents.js +11 -0
- package/dist/components/solution-contents2.js +128 -0
- package/dist/components/solution-item-details.d.ts +11 -0
- package/dist/components/solution-item-details.js +11 -0
- package/dist/components/solution-item-details2.js +234 -0
- package/dist/components/solution-item-icon.d.ts +11 -0
- package/dist/components/solution-item-icon.js +11 -0
- package/dist/components/solution-item-icon2.js +342 -0
- package/dist/components/solution-item-sharing.d.ts +11 -0
- package/dist/components/solution-item-sharing.js +11 -0
- package/dist/components/solution-item-sharing2.js +167 -0
- package/dist/components/solution-item.d.ts +11 -0
- package/dist/components/solution-item.js +11 -0
- package/dist/components/solution-item2.js +315 -0
- package/dist/components/solution-organization-variables.d.ts +11 -0
- package/dist/components/solution-organization-variables.js +11 -0
- package/dist/components/solution-organization-variables2.js +132 -0
- package/dist/components/solution-resource-item.d.ts +11 -0
- package/dist/components/solution-resource-item.js +11 -0
- package/dist/components/solution-resource-item2.js +356 -0
- package/dist/components/solution-spatial-ref.d.ts +11 -0
- package/dist/components/solution-spatial-ref.js +11 -0
- package/dist/components/solution-spatial-ref2.js +21446 -0
- package/dist/components/solution-store.js +4092 -0
- package/dist/components/solution-template-data.d.ts +11 -0
- package/dist/components/solution-template-data.js +11 -0
- package/dist/components/solution-template-data2.js +233 -0
- package/dist/components/solution-variables.d.ts +11 -0
- package/dist/components/solution-variables.js +11 -0
- package/dist/components/solution-variables2.js +150 -0
- package/dist/components/sortable.esm.js +3026 -0
- package/dist/components/split-button.js +165 -0
- package/dist/components/store-manager.d.ts +11 -0
- package/dist/components/store-manager.js +83 -0
- package/dist/components/switch.js +139 -0
- package/dist/components/tab-nav.js +241 -0
- package/dist/components/tab-title.js +276 -0
- package/dist/components/tab.js +154 -0
- package/dist/components/tabs.js +188 -0
- package/dist/components/tile.js +129 -0
- package/dist/components/time-picker.js +943 -0
- package/dist/components/tooltip.js +399 -0
- package/dist/components/tree-item.js +294 -0
- package/dist/components/tree.js +327 -0
- package/dist/components/utils.js +119 -0
- package/dist/components/utils2.js +51 -0
- package/dist/components/value-list-item.js +204 -0
- package/dist/components/value-list.js +333 -0
- package/dist/esm/deduct-calculator.entry.js +1 -1
- package/dist/esm/pci-calculator.entry.js +1 -1
- package/dist/esm/{pciUtils-e3007a1c.js → pciUtils-ecda46e5.js} +25 -7
- package/dist/solutions-components/demos/deduct-calculator.html +2 -5
- package/dist/solutions-components/demos/new-public-notification.html +6 -4
- package/dist/solutions-components/{p-ff80ffbb.entry.js → p-0512635b.entry.js} +1 -1
- package/dist/solutions-components/{p-5ec407c2.entry.js → p-0c088725.entry.js} +1 -1
- package/dist/solutions-components/p-cc815aca.js +21 -0
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/pciUtils.ts +30 -7
- package/dist/types/utils/pciUtils.d.ts +2 -1
- package/package.json +4 -3
- package/dist/solutions-components/p-647bbd18.js +0 -21
@@ -0,0 +1,297 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright 2022 Esri
|
3
|
+
* Licensed under the Apache License, Version 2.0
|
4
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
5
|
+
*/
|
6
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
7
|
+
import { s as setRequestedIcon, t as toAriaBoolean, b as getSlotted } from './dom.js';
|
8
|
+
import { S as StatusIcons } from './interfaces.js';
|
9
|
+
import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
|
10
|
+
import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale2.js';
|
11
|
+
import { d as defineCustomElement$3 } from './chip.js';
|
12
|
+
import { d as defineCustomElement$2 } from './icon.js';
|
13
|
+
|
14
|
+
/*!
|
15
|
+
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
16
|
+
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
17
|
+
* v1.0.0-beta.97
|
18
|
+
*/
|
19
|
+
const TEXT = {
|
20
|
+
intlClose: "Close"
|
21
|
+
};
|
22
|
+
const DURATIONS = {
|
23
|
+
slow: 14000,
|
24
|
+
medium: 10000,
|
25
|
+
fast: 6000
|
26
|
+
};
|
27
|
+
const SLOTS = {
|
28
|
+
title: "title",
|
29
|
+
message: "message",
|
30
|
+
link: "link"
|
31
|
+
};
|
32
|
+
|
33
|
+
const alertCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .alert-queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .alert-queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){-webkit-margin-after:0.25rem;margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .alert-queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{--calcite-alert-edge-distance:2rem;display:block}:host .container{pointer-events:none;position:fixed;z-index:500;margin-block:0px;margin-inline:auto;display:flex;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);-webkit-border-before:0px solid transparent;border-block-start:0px solid transparent;border-inline:1px solid var(--calcite-ui-border-3);-webkit-border-after:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}:host .container.bottom,:host .container.top{inset-inline-end:0;inset-inline-start:0}:host .container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}:host .container[class*=-start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}:host .container[class*=-end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.container{display:flex;inline-size:100%;align-items:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([open]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-alert-spacing-token-large);padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;display:flex;align-items:center;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px}.alert-close{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;cursor:pointer;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.alert-close:open{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:flex;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0px solid transparent;border-start-end-radius:0}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent}.alert-dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}:host([color=blue]) .container{border-block-start-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-block-start-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{animation:dismissProgress 14000ms ease-out}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
|
34
|
+
|
35
|
+
const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
36
|
+
constructor() {
|
37
|
+
super();
|
38
|
+
this.__registerHost();
|
39
|
+
this.__attachShadow();
|
40
|
+
this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 6);
|
41
|
+
this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
|
42
|
+
this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
|
43
|
+
this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
|
44
|
+
this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
|
45
|
+
this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
|
46
|
+
//--------------------------------------------------------------------------
|
47
|
+
//
|
48
|
+
// Properties
|
49
|
+
//
|
50
|
+
//---------------------------------------------------------------------------
|
51
|
+
/**
|
52
|
+
* When `true`, displays and positions the component.
|
53
|
+
*
|
54
|
+
* @deprecated use `open` instead.
|
55
|
+
*/
|
56
|
+
this.active = false;
|
57
|
+
/** When `true`, displays and positions the component. */
|
58
|
+
this.open = false;
|
59
|
+
/** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
|
60
|
+
this.autoDismiss = false;
|
61
|
+
/** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
|
62
|
+
this.autoDismissDuration = this.autoDismiss ? "medium" : null;
|
63
|
+
/** Specifies the color for the component (will apply to top border and icon). */
|
64
|
+
this.color = "blue";
|
65
|
+
/**
|
66
|
+
* Specifies the text label for the close button.
|
67
|
+
*
|
68
|
+
* @default "Close"
|
69
|
+
*/
|
70
|
+
this.intlClose = TEXT.intlClose;
|
71
|
+
/** Specifies the placement of the component */
|
72
|
+
this.placement = "bottom";
|
73
|
+
/** Specifies the size of the component. */
|
74
|
+
this.scale = "m";
|
75
|
+
//--------------------------------------------------------------------------
|
76
|
+
//
|
77
|
+
// Private State/Props
|
78
|
+
//
|
79
|
+
//--------------------------------------------------------------------------
|
80
|
+
this.effectiveLocale = "";
|
81
|
+
/** the list of queued alerts */
|
82
|
+
this.queue = [];
|
83
|
+
/** the count of queued alerts */
|
84
|
+
this.queueLength = 0;
|
85
|
+
/** is the alert queued */
|
86
|
+
this.queued = false;
|
87
|
+
this.autoDismissTimeoutId = null;
|
88
|
+
this.trackTimer = Date.now();
|
89
|
+
this.openTransitionProp = "opacity";
|
90
|
+
//--------------------------------------------------------------------------
|
91
|
+
//
|
92
|
+
// Private Methods
|
93
|
+
//
|
94
|
+
//--------------------------------------------------------------------------
|
95
|
+
this.setTransitionEl = (el) => {
|
96
|
+
this.transitionEl = el;
|
97
|
+
connectOpenCloseComponent(this);
|
98
|
+
};
|
99
|
+
/** close and emit calciteInternalAlertSync event with the updated queue payload */
|
100
|
+
this.closeAlert = () => {
|
101
|
+
this.autoDismissTimeoutId = null;
|
102
|
+
this.queued = false;
|
103
|
+
this.open = false;
|
104
|
+
this.queue = this.queue.filter((el) => el !== this.el);
|
105
|
+
this.determineActiveAlert();
|
106
|
+
this.calciteInternalAlertSync.emit({ queue: this.queue });
|
107
|
+
};
|
108
|
+
}
|
109
|
+
activeHandler(value) {
|
110
|
+
this.open = value;
|
111
|
+
}
|
112
|
+
openHandler(value) {
|
113
|
+
if (this.open && !this.queued) {
|
114
|
+
this.calciteInternalAlertRegister.emit();
|
115
|
+
this.active = value;
|
116
|
+
}
|
117
|
+
if (!this.open) {
|
118
|
+
this.queue = this.queue.filter((el) => el !== this.el);
|
119
|
+
this.calciteInternalAlertSync.emit({ queue: this.queue });
|
120
|
+
this.active = false;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
updateRequestedIcon() {
|
124
|
+
this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
|
125
|
+
}
|
126
|
+
updateDuration() {
|
127
|
+
if (this.autoDismiss && this.autoDismissTimeoutId) {
|
128
|
+
window.clearTimeout(this.autoDismissTimeoutId);
|
129
|
+
this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
|
130
|
+
}
|
131
|
+
}
|
132
|
+
//--------------------------------------------------------------------------
|
133
|
+
//
|
134
|
+
// Lifecycle
|
135
|
+
//
|
136
|
+
//--------------------------------------------------------------------------
|
137
|
+
connectedCallback() {
|
138
|
+
connectLocalized(this);
|
139
|
+
const open = this.open || this.active;
|
140
|
+
if (open && !this.queued) {
|
141
|
+
this.activeHandler(open);
|
142
|
+
this.openHandler(open);
|
143
|
+
this.calciteInternalAlertRegister.emit();
|
144
|
+
}
|
145
|
+
connectOpenCloseComponent(this);
|
146
|
+
}
|
147
|
+
componentWillLoad() {
|
148
|
+
this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
|
149
|
+
}
|
150
|
+
disconnectedCallback() {
|
151
|
+
window.clearTimeout(this.autoDismissTimeoutId);
|
152
|
+
disconnectOpenCloseComponent(this);
|
153
|
+
disconnectLocalized(this);
|
154
|
+
}
|
155
|
+
render() {
|
156
|
+
const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
|
157
|
+
numberStringFormatter.numberFormatOptions = {
|
158
|
+
locale: this.effectiveLocale,
|
159
|
+
numberingSystem: this.numberingSystem,
|
160
|
+
signDisplay: "always"
|
161
|
+
};
|
162
|
+
const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
|
163
|
+
const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
|
164
|
+
const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
|
165
|
+
const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
|
166
|
+
const role = autoDismiss ? "alert" : "alertdialog";
|
167
|
+
const hidden = !active;
|
168
|
+
return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
|
169
|
+
container: true,
|
170
|
+
queued,
|
171
|
+
[placement]: true
|
172
|
+
}, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
|
173
|
+
}
|
174
|
+
// when an alert is opened or closed, update queue and determine active alert
|
175
|
+
alertSync(event) {
|
176
|
+
if (this.queue !== event.detail.queue) {
|
177
|
+
this.queue = event.detail.queue;
|
178
|
+
}
|
179
|
+
this.queueLength = this.queue.length;
|
180
|
+
this.determineActiveAlert();
|
181
|
+
event.stopPropagation();
|
182
|
+
}
|
183
|
+
// when an alert is first registered, trigger a queue sync
|
184
|
+
alertRegister() {
|
185
|
+
if (this.open && !this.queue.includes(this.el)) {
|
186
|
+
this.queued = true;
|
187
|
+
this.queue.push(this.el);
|
188
|
+
}
|
189
|
+
this.calciteInternalAlertSync.emit({ queue: this.queue });
|
190
|
+
this.determineActiveAlert();
|
191
|
+
}
|
192
|
+
//--------------------------------------------------------------------------
|
193
|
+
//
|
194
|
+
// Public Methods
|
195
|
+
//
|
196
|
+
//--------------------------------------------------------------------------
|
197
|
+
/** Sets focus on the component. */
|
198
|
+
async setFocus() {
|
199
|
+
const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
|
200
|
+
if (!this.closeButton && !alertLinkEl) {
|
201
|
+
return;
|
202
|
+
}
|
203
|
+
else if (alertLinkEl) {
|
204
|
+
alertLinkEl.setFocus();
|
205
|
+
}
|
206
|
+
else if (this.closeButton) {
|
207
|
+
this.closeButton.focus();
|
208
|
+
}
|
209
|
+
}
|
210
|
+
/** determine which alert is active */
|
211
|
+
determineActiveAlert() {
|
212
|
+
var _a;
|
213
|
+
if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
|
214
|
+
this.openAlert();
|
215
|
+
if (this.autoDismiss && !this.autoDismissTimeoutId) {
|
216
|
+
this.trackTimer = Date.now();
|
217
|
+
this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
|
218
|
+
}
|
219
|
+
}
|
220
|
+
else {
|
221
|
+
return;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
onBeforeOpen() {
|
225
|
+
this.calciteAlertBeforeOpen.emit();
|
226
|
+
}
|
227
|
+
onOpen() {
|
228
|
+
this.calciteAlertOpen.emit();
|
229
|
+
}
|
230
|
+
onBeforeClose() {
|
231
|
+
this.calciteAlertBeforeClose.emit();
|
232
|
+
}
|
233
|
+
onClose() {
|
234
|
+
this.calciteAlertClose.emit();
|
235
|
+
}
|
236
|
+
/** remove queued class after animation completes */
|
237
|
+
openAlert() {
|
238
|
+
window.clearTimeout(this.queueTimeout);
|
239
|
+
this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
|
240
|
+
}
|
241
|
+
get el() { return this; }
|
242
|
+
static get watchers() { return {
|
243
|
+
"active": ["activeHandler"],
|
244
|
+
"open": ["openHandler"],
|
245
|
+
"icon": ["updateRequestedIcon"],
|
246
|
+
"color": ["updateRequestedIcon"],
|
247
|
+
"autoDismissDuration": ["updateDuration"]
|
248
|
+
}; }
|
249
|
+
static get style() { return alertCss; }
|
250
|
+
}, [1, "calcite-alert", {
|
251
|
+
"active": [1540],
|
252
|
+
"open": [1540],
|
253
|
+
"autoDismiss": [516, "auto-dismiss"],
|
254
|
+
"autoDismissDuration": [513, "auto-dismiss-duration"],
|
255
|
+
"color": [513],
|
256
|
+
"icon": [520],
|
257
|
+
"intlClose": [1, "intl-close"],
|
258
|
+
"label": [1],
|
259
|
+
"numberingSystem": [513, "numbering-system"],
|
260
|
+
"placement": [513],
|
261
|
+
"scale": [513],
|
262
|
+
"effectiveLocale": [32],
|
263
|
+
"queue": [32],
|
264
|
+
"queueLength": [32],
|
265
|
+
"queued": [32],
|
266
|
+
"requestedIcon": [32],
|
267
|
+
"setFocus": [64]
|
268
|
+
}, [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"]]]);
|
269
|
+
function defineCustomElement$1() {
|
270
|
+
if (typeof customElements === "undefined") {
|
271
|
+
return;
|
272
|
+
}
|
273
|
+
const components = ["calcite-alert", "calcite-chip", "calcite-icon"];
|
274
|
+
components.forEach(tagName => { switch (tagName) {
|
275
|
+
case "calcite-alert":
|
276
|
+
if (!customElements.get(tagName)) {
|
277
|
+
customElements.define(tagName, Alert);
|
278
|
+
}
|
279
|
+
break;
|
280
|
+
case "calcite-chip":
|
281
|
+
if (!customElements.get(tagName)) {
|
282
|
+
defineCustomElement$3();
|
283
|
+
}
|
284
|
+
break;
|
285
|
+
case "calcite-icon":
|
286
|
+
if (!customElements.get(tagName)) {
|
287
|
+
defineCustomElement$2();
|
288
|
+
}
|
289
|
+
break;
|
290
|
+
} });
|
291
|
+
}
|
292
|
+
defineCustomElement$1();
|
293
|
+
|
294
|
+
const CalciteAlert = Alert;
|
295
|
+
const defineCustomElement = defineCustomElement$1;
|
296
|
+
|
297
|
+
export { CalciteAlert, defineCustomElement };
|
@@ -0,0 +1,182 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright 2022 Esri
|
3
|
+
* Licensed under the Apache License, Version 2.0
|
4
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
5
|
+
*/
|
6
|
+
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
7
|
+
import { h as hexToRGB, i as isValidHex } from './utils.js';
|
8
|
+
import { e as getThemeName } from './dom.js';
|
9
|
+
import { d as defineCustomElement$2 } from './icon.js';
|
10
|
+
|
11
|
+
/*!
|
12
|
+
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
13
|
+
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
14
|
+
* v1.0.0-beta.97
|
15
|
+
*/
|
16
|
+
/**
|
17
|
+
* Convert a string to a valid hex by hashing its contents
|
18
|
+
* and using the hash as a seed for three distinct color values
|
19
|
+
*
|
20
|
+
* @param str
|
21
|
+
*/
|
22
|
+
function stringToHex(str) {
|
23
|
+
let hash = 0;
|
24
|
+
for (let i = 0; i < str.length; i++) {
|
25
|
+
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
26
|
+
}
|
27
|
+
let hex = "#";
|
28
|
+
for (let j = 0; j < 3; j++) {
|
29
|
+
const value = (hash >> (j * 8)) & 0xff;
|
30
|
+
hex += ("00" + value.toString(16)).substr(-2);
|
31
|
+
}
|
32
|
+
return hex;
|
33
|
+
}
|
34
|
+
/**
|
35
|
+
* Find the hue of a color given the separate RGB color channels
|
36
|
+
*
|
37
|
+
* @param rgb
|
38
|
+
*/
|
39
|
+
function rgbToHue(rgb) {
|
40
|
+
let { r, g, b } = rgb;
|
41
|
+
r /= 255;
|
42
|
+
g /= 255;
|
43
|
+
b /= 255;
|
44
|
+
const max = Math.max(r, g, b);
|
45
|
+
const min = Math.min(r, g, b);
|
46
|
+
const delta = max - min;
|
47
|
+
if (max === min) {
|
48
|
+
return 0;
|
49
|
+
}
|
50
|
+
let hue = (max + min) / 2;
|
51
|
+
switch (max) {
|
52
|
+
case r:
|
53
|
+
hue = (g - b) / delta + (g < b ? 6 : 0);
|
54
|
+
break;
|
55
|
+
case g:
|
56
|
+
hue = (b - r) / delta + 2;
|
57
|
+
break;
|
58
|
+
case b:
|
59
|
+
hue = (r - g) / delta + 4;
|
60
|
+
break;
|
61
|
+
}
|
62
|
+
return Math.round(hue * 60);
|
63
|
+
}
|
64
|
+
/**
|
65
|
+
* For a hex color, find the hue
|
66
|
+
*
|
67
|
+
* @param hex {string} - form of "#------"
|
68
|
+
*/
|
69
|
+
function hexToHue(hex) {
|
70
|
+
return rgbToHue(hexToRGB(hex));
|
71
|
+
}
|
72
|
+
|
73
|
+
const avatarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline-block;overflow:hidden;border-radius:50%}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:50%}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase;color:var(--calcite-ui-text-3)}.thumbnail{block-size:100%;inline-size:100%;border-radius:50%}";
|
74
|
+
|
75
|
+
const Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
76
|
+
constructor() {
|
77
|
+
super();
|
78
|
+
this.__registerHost();
|
79
|
+
this.__attachShadow();
|
80
|
+
//--------------------------------------------------------------------------
|
81
|
+
//
|
82
|
+
// Properties
|
83
|
+
//
|
84
|
+
//--------------------------------------------------------------------------
|
85
|
+
/** Specifies the size of the component. */
|
86
|
+
this.scale = "m";
|
87
|
+
//--------------------------------------------------------------------------
|
88
|
+
//
|
89
|
+
// Private State/Props
|
90
|
+
//
|
91
|
+
//--------------------------------------------------------------------------
|
92
|
+
this.thumbnailFailedToLoad = false;
|
93
|
+
}
|
94
|
+
//--------------------------------------------------------------------------
|
95
|
+
//
|
96
|
+
// Lifecycle
|
97
|
+
//
|
98
|
+
//--------------------------------------------------------------------------
|
99
|
+
render() {
|
100
|
+
return this.determineContent();
|
101
|
+
}
|
102
|
+
//--------------------------------------------------------------------------
|
103
|
+
//
|
104
|
+
// Private Methods
|
105
|
+
//
|
106
|
+
//--------------------------------------------------------------------------
|
107
|
+
determineContent() {
|
108
|
+
if (this.thumbnail && !this.thumbnailFailedToLoad) {
|
109
|
+
return (h("img", { alt: "", class: "thumbnail", onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
|
110
|
+
}
|
111
|
+
const initials = this.generateInitials();
|
112
|
+
const backgroundColor = this.generateFillColor();
|
113
|
+
return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
|
114
|
+
}
|
115
|
+
/**
|
116
|
+
* Generate a valid background color that is consistent and unique to this user
|
117
|
+
*/
|
118
|
+
generateFillColor() {
|
119
|
+
const { userId, username, fullName, el } = this;
|
120
|
+
const theme = getThemeName(el);
|
121
|
+
const id = userId && `#${userId.substr(userId.length - 6)}`;
|
122
|
+
const name = username || fullName || "";
|
123
|
+
const hex = id && isValidHex(id) ? id : stringToHex(name);
|
124
|
+
// if there is not unique information, or an invalid hex is produced, return a default
|
125
|
+
if ((!userId && !name) || !isValidHex(hex)) {
|
126
|
+
return `var(--calcite-ui-foreground-2)`;
|
127
|
+
}
|
128
|
+
const hue = hexToHue(hex);
|
129
|
+
const l = theme === "dark" ? 20 : 90;
|
130
|
+
return `hsl(${hue}, 60%, ${l}%)`;
|
131
|
+
}
|
132
|
+
/**
|
133
|
+
* Use fullname or username to generate initials
|
134
|
+
*/
|
135
|
+
generateInitials() {
|
136
|
+
const { fullName, username } = this;
|
137
|
+
if (fullName) {
|
138
|
+
return fullName
|
139
|
+
.trim()
|
140
|
+
.split(" ")
|
141
|
+
.map((name) => name.substring(0, 1))
|
142
|
+
.join("");
|
143
|
+
}
|
144
|
+
else if (username) {
|
145
|
+
return username.substring(0, 2);
|
146
|
+
}
|
147
|
+
return false;
|
148
|
+
}
|
149
|
+
get el() { return this; }
|
150
|
+
static get style() { return avatarCss; }
|
151
|
+
}, [1, "calcite-avatar", {
|
152
|
+
"scale": [513],
|
153
|
+
"thumbnail": [513],
|
154
|
+
"fullName": [513, "full-name"],
|
155
|
+
"username": [513],
|
156
|
+
"userId": [513, "user-id"],
|
157
|
+
"thumbnailFailedToLoad": [32]
|
158
|
+
}]);
|
159
|
+
function defineCustomElement$1() {
|
160
|
+
if (typeof customElements === "undefined") {
|
161
|
+
return;
|
162
|
+
}
|
163
|
+
const components = ["calcite-avatar", "calcite-icon"];
|
164
|
+
components.forEach(tagName => { switch (tagName) {
|
165
|
+
case "calcite-avatar":
|
166
|
+
if (!customElements.get(tagName)) {
|
167
|
+
customElements.define(tagName, Avatar);
|
168
|
+
}
|
169
|
+
break;
|
170
|
+
case "calcite-icon":
|
171
|
+
if (!customElements.get(tagName)) {
|
172
|
+
defineCustomElement$2();
|
173
|
+
}
|
174
|
+
break;
|
175
|
+
} });
|
176
|
+
}
|
177
|
+
defineCustomElement$1();
|
178
|
+
|
179
|
+
const CalciteAvatar = Avatar;
|
180
|
+
const defineCustomElement = defineCustomElement$1;
|
181
|
+
|
182
|
+
export { CalciteAvatar, defineCustomElement };
|
@@ -0,0 +1,155 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright 2022 Esri
|
3
|
+
* Licensed under the Apache License, Version 2.0
|
4
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
5
|
+
*/
|
6
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
7
|
+
import { c as getElementDir, t as toAriaBoolean } from './dom.js';
|
8
|
+
import { g as guid } from './guid.js';
|
9
|
+
import { i as isActivationKey } from './key.js';
|
10
|
+
import { d as defineCustomElement$3 } from './icon.js';
|
11
|
+
import { d as defineCustomElement$2 } from './switch.js';
|
12
|
+
|
13
|
+
/*!
|
14
|
+
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
15
|
+
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
16
|
+
* v1.0.0-beta.97
|
17
|
+
*/
|
18
|
+
const CSS = {
|
19
|
+
content: "content",
|
20
|
+
invalid: "invalid",
|
21
|
+
toggle: "toggle",
|
22
|
+
toggleSwitch: "toggle--switch",
|
23
|
+
toggleSwitchContent: "toggle--switch__content",
|
24
|
+
toggleSwitchText: "toggle--switch__text",
|
25
|
+
sectionHeader: "section-header",
|
26
|
+
sectionHeaderText: "section-header__text",
|
27
|
+
statusIcon: "status-icon",
|
28
|
+
valid: "valid"
|
29
|
+
};
|
30
|
+
const TEXT = {
|
31
|
+
collapse: "Collapse",
|
32
|
+
expand: "Expand"
|
33
|
+
};
|
34
|
+
const ICONS = {
|
35
|
+
menuOpen: "chevron-down",
|
36
|
+
menuClosedLeft: "chevron-left",
|
37
|
+
menuClosedRight: "chevron-right",
|
38
|
+
valid: "check-circle",
|
39
|
+
invalid: "exclamation-mark-triangle"
|
40
|
+
};
|
41
|
+
|
42
|
+
const blockSectionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{box-sizing:border-box;display:block;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-ui-border-3)}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;background-color:transparent;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}.toggle--switch,.section-header{margin-inline:0px;margin-block:0.25rem;display:flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.toggle--switch:hover,.section-header:hover{color:var(--calcite-ui-text-1)}.section-header .status-icon{align-self:flex-end}.section-header__text{margin-inline:0.75rem;margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle--switch calcite-switch{pointer-events:none;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.toggle--switch .status-icon{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.status-icon.valid{color:var(--calcite-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}";
|
43
|
+
|
44
|
+
const BlockSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
45
|
+
constructor() {
|
46
|
+
super();
|
47
|
+
this.__registerHost();
|
48
|
+
this.__attachShadow();
|
49
|
+
this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
|
50
|
+
/**
|
51
|
+
* When `true`, expands the component and its contents.
|
52
|
+
*/
|
53
|
+
this.open = false;
|
54
|
+
/**
|
55
|
+
* Specifies the component's toggle display -
|
56
|
+
*
|
57
|
+
* `"button"` (selectable header), or
|
58
|
+
*
|
59
|
+
* `"switch"` (toggle switch).
|
60
|
+
*/
|
61
|
+
this.toggleDisplay = "button";
|
62
|
+
this.guid = guid();
|
63
|
+
// --------------------------------------------------------------------------
|
64
|
+
//
|
65
|
+
// Private Methods
|
66
|
+
//
|
67
|
+
// --------------------------------------------------------------------------
|
68
|
+
this.handleHeaderKeyDown = (event) => {
|
69
|
+
if (isActivationKey(event.key)) {
|
70
|
+
this.toggleSection();
|
71
|
+
event.preventDefault();
|
72
|
+
event.stopPropagation();
|
73
|
+
}
|
74
|
+
};
|
75
|
+
this.toggleSection = () => {
|
76
|
+
this.open = !this.open;
|
77
|
+
this.calciteBlockSectionToggle.emit();
|
78
|
+
};
|
79
|
+
}
|
80
|
+
// --------------------------------------------------------------------------
|
81
|
+
//
|
82
|
+
// Render Methods
|
83
|
+
//
|
84
|
+
// --------------------------------------------------------------------------
|
85
|
+
renderStatusIcon() {
|
86
|
+
var _a;
|
87
|
+
const { status } = this;
|
88
|
+
const statusIcon = (_a = ICONS[status]) !== null && _a !== void 0 ? _a : false;
|
89
|
+
const statusIconClasses = {
|
90
|
+
[CSS.statusIcon]: true,
|
91
|
+
[CSS.valid]: status == "valid",
|
92
|
+
[CSS.invalid]: status == "invalid"
|
93
|
+
};
|
94
|
+
return !!statusIcon ? (h("calcite-icon", { class: statusIconClasses, icon: statusIcon, scale: "s" })) : null;
|
95
|
+
}
|
96
|
+
render() {
|
97
|
+
const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
|
98
|
+
const dir = getElementDir(el);
|
99
|
+
const arrowIcon = open
|
100
|
+
? ICONS.menuOpen
|
101
|
+
: dir === "rtl"
|
102
|
+
? ICONS.menuClosedLeft
|
103
|
+
: ICONS.menuClosedRight;
|
104
|
+
const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
|
105
|
+
const { guid } = this;
|
106
|
+
const regionId = `${guid}-region`;
|
107
|
+
const buttonId = `${guid}-button`;
|
108
|
+
const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
109
|
+
[CSS.toggle]: true,
|
110
|
+
[CSS.toggleSwitch]: true
|
111
|
+
}, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, h("div", { class: CSS.toggleSwitchContent }, h("span", { class: CSS.toggleSwitchText }, text)), h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (h("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
|
112
|
+
[CSS.sectionHeader]: true,
|
113
|
+
[CSS.toggle]: true
|
114
|
+
}, id: buttonId, name: toggleLabel, onClick: this.toggleSection }, h("calcite-icon", { icon: arrowIcon, scale: "s" }), h("span", { class: CSS.sectionHeaderText }, text), this.renderStatusIcon()));
|
115
|
+
return (h(Host, null, headerNode, h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, h("slot", null))));
|
116
|
+
}
|
117
|
+
get el() { return this; }
|
118
|
+
static get style() { return blockSectionCss; }
|
119
|
+
}, [1, "calcite-block-section", {
|
120
|
+
"intlCollapse": [1, "intl-collapse"],
|
121
|
+
"intlExpand": [1, "intl-expand"],
|
122
|
+
"open": [1540],
|
123
|
+
"status": [513],
|
124
|
+
"text": [1],
|
125
|
+
"toggleDisplay": [513, "toggle-display"]
|
126
|
+
}]);
|
127
|
+
function defineCustomElement$1() {
|
128
|
+
if (typeof customElements === "undefined") {
|
129
|
+
return;
|
130
|
+
}
|
131
|
+
const components = ["calcite-block-section", "calcite-icon", "calcite-switch"];
|
132
|
+
components.forEach(tagName => { switch (tagName) {
|
133
|
+
case "calcite-block-section":
|
134
|
+
if (!customElements.get(tagName)) {
|
135
|
+
customElements.define(tagName, BlockSection);
|
136
|
+
}
|
137
|
+
break;
|
138
|
+
case "calcite-icon":
|
139
|
+
if (!customElements.get(tagName)) {
|
140
|
+
defineCustomElement$3();
|
141
|
+
}
|
142
|
+
break;
|
143
|
+
case "calcite-switch":
|
144
|
+
if (!customElements.get(tagName)) {
|
145
|
+
defineCustomElement$2();
|
146
|
+
}
|
147
|
+
break;
|
148
|
+
} });
|
149
|
+
}
|
150
|
+
defineCustomElement$1();
|
151
|
+
|
152
|
+
const CalciteBlockSection = BlockSection;
|
153
|
+
const defineCustomElement = defineCustomElement$1;
|
154
|
+
|
155
|
+
export { CalciteBlockSection, defineCustomElement };
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright 2022 Esri
|
3
|
+
* Licensed under the Apache License, Version 2.0
|
4
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
5
|
+
*/
|
6
|
+
import { B as Block, d as defineCustomElement$1 } from './block.js';
|
7
|
+
|
8
|
+
const CalciteBlock = Block;
|
9
|
+
const defineCustomElement = defineCustomElement$1;
|
10
|
+
|
11
|
+
export { CalciteBlock, defineCustomElement };
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright 2022 Esri
|
3
|
+
* Licensed under the Apache License, Version 2.0
|
4
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
5
|
+
*/
|
6
|
+
import { B as Button, d as defineCustomElement$1 } from './button.js';
|
7
|
+
|
8
|
+
const CalciteButton = Button;
|
9
|
+
const defineCustomElement = defineCustomElement$1;
|
10
|
+
|
11
|
+
export { CalciteButton, defineCustomElement };
|