@swisspost/design-system-components 1.6.0 → 1.6.1
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/index.cjs.js +0 -26
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/package-bd70f73c.js +7 -0
- package/dist/cjs/package-bd70f73c.js.map +1 -0
- package/dist/cjs/post-accordion.cjs.entry.js +1 -1
- package/dist/cjs/post-alert.cjs.entry.js +94 -7
- package/dist/cjs/post-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/post-collapsible.cjs.entry.js +86 -5
- package/dist/cjs/post-collapsible.cjs.entry.js.map +1 -1
- package/dist/cjs/post-icon.cjs.entry.js +98 -6
- package/dist/cjs/post-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/post-tab-header.cjs.entry.js +26 -5
- package/dist/cjs/post-tab-header.cjs.entry.js.map +1 -1
- package/dist/cjs/post-tab-panel.cjs.entry.js +20 -4
- package/dist/cjs/post-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/post-tabs.cjs.entry.js +146 -5
- package/dist/cjs/post-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/post-tooltip.cjs.entry.js +5088 -5
- package/dist/cjs/post-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/index.js +1 -8
- package/dist/collection/index.js.map +1 -1
- package/dist/components/index.js +0 -7
- package/dist/components/index.js.map +1 -1
- package/dist/components/package.js +1 -1
- package/dist/components/post-alert.js +134 -1
- package/dist/components/post-alert.js.map +1 -1
- package/dist/components/post-collapsible.js +113 -1
- package/dist/components/post-collapsible.js.map +1 -1
- package/dist/components/post-tab-header.js +47 -1
- package/dist/components/post-tab-header.js.map +1 -1
- package/dist/components/post-tab-panel.js +39 -1
- package/dist/components/post-tab-panel.js.map +1 -1
- package/dist/components/post-tabs.js +165 -1
- package/dist/components/post-tabs.js.map +1 -1
- package/dist/components/post-tooltip.js +5113 -1
- package/dist/components/post-tooltip.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -14
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package-f3f12016.js +5 -0
- package/dist/esm/package-f3f12016.js.map +1 -0
- package/dist/esm/post-accordion.entry.js +1 -1
- package/dist/esm/post-alert.entry.js +97 -6
- package/dist/esm/post-alert.entry.js.map +1 -1
- package/dist/esm/post-collapsible.entry.js +89 -4
- package/dist/esm/post-collapsible.entry.js.map +1 -1
- package/dist/esm/post-icon.entry.js +101 -5
- package/dist/esm/post-icon.entry.js.map +1 -1
- package/dist/esm/post-tab-header.entry.js +29 -4
- package/dist/esm/post-tab-header.entry.js.map +1 -1
- package/dist/esm/post-tab-panel.entry.js +23 -3
- package/dist/esm/post-tab-panel.entry.js.map +1 -1
- package/dist/esm/post-tabs.entry.js +149 -4
- package/dist/esm/post-tabs.entry.js.map +1 -1
- package/dist/esm/post-tooltip.entry.js +5091 -4
- package/dist/esm/post-tooltip.entry.js.map +1 -1
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-08d942a0.entry.js +2 -0
- package/dist/post-components/{p-332eef46.js.map → p-08d942a0.entry.js.map} +1 -1
- package/dist/{esm/post-alert-5dd43c8b.js → post-components/p-10c47e0a.entry.js} +2 -99
- package/dist/post-components/{p-c6b73d6e.js.map → p-10c47e0a.entry.js.map} +1 -1
- package/dist/post-components/{p-1a8a8ef2.js → p-2755ba2e.entry.js} +2 -2
- package/dist/post-components/p-4aae941f.js +2 -0
- package/dist/post-components/{p-e9dc9039.entry.js → p-6a0a1ce4.entry.js} +2 -2
- package/dist/post-components/p-7d91397a.entry.js +2 -0
- package/dist/post-components/p-871ade93.entry.js +2 -0
- package/dist/post-components/{p-574acdb0.js.map → p-871ade93.entry.js.map} +1 -1
- package/dist/post-components/p-a18e1d1c.entry.js +2 -0
- package/dist/post-components/{p-97000cb6.js.map → p-a18e1d1c.entry.js.map} +1 -1
- package/dist/post-components/{p-01e8dfe6.js → p-b4b7e30c.entry.js} +3 -3
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/index.d.ts +0 -7
- package/package.json +4 -4
- package/dist/cjs/package-7c4db872.js +0 -7
- package/dist/cjs/package-7c4db872.js.map +0 -1
- package/dist/cjs/post-alert-c037e6a3.js +0 -101
- package/dist/cjs/post-alert-c037e6a3.js.map +0 -1
- package/dist/cjs/post-collapsible-7c9d23a2.js +0 -93
- package/dist/cjs/post-collapsible-7c9d23a2.js.map +0 -1
- package/dist/cjs/post-icon-f418f76a.js +0 -105
- package/dist/cjs/post-icon-f418f76a.js.map +0 -1
- package/dist/cjs/post-tab-header-e08c2a42.js +0 -33
- package/dist/cjs/post-tab-header-e08c2a42.js.map +0 -1
- package/dist/cjs/post-tab-panel-721f7f32.js +0 -27
- package/dist/cjs/post-tab-panel-721f7f32.js.map +0 -1
- package/dist/cjs/post-tabs-4bcc867b.js +0 -153
- package/dist/cjs/post-tabs-4bcc867b.js.map +0 -1
- package/dist/cjs/post-tooltip-261c5cda.js +0 -5095
- package/dist/cjs/post-tooltip-261c5cda.js.map +0 -1
- package/dist/components/post-alert2.js +0 -138
- package/dist/components/post-alert2.js.map +0 -1
- package/dist/components/post-collapsible2.js +0 -117
- package/dist/components/post-collapsible2.js.map +0 -1
- package/dist/components/post-tab-header2.js +0 -51
- package/dist/components/post-tab-header2.js.map +0 -1
- package/dist/components/post-tab-panel2.js +0 -43
- package/dist/components/post-tab-panel2.js.map +0 -1
- package/dist/components/post-tabs2.js +0 -169
- package/dist/components/post-tabs2.js.map +0 -1
- package/dist/components/post-tooltip2.js +0 -5117
- package/dist/components/post-tooltip2.js.map +0 -1
- package/dist/esm/package-3bbdb32c.js +0 -5
- package/dist/esm/package-3bbdb32c.js.map +0 -1
- package/dist/esm/post-alert-5dd43c8b.js.map +0 -1
- package/dist/esm/post-collapsible-26dc2340.js +0 -91
- package/dist/esm/post-collapsible-26dc2340.js.map +0 -1
- package/dist/esm/post-icon-fb0eb8aa.js +0 -103
- package/dist/esm/post-icon-fb0eb8aa.js.map +0 -1
- package/dist/esm/post-tab-header-deebc551.js +0 -31
- package/dist/esm/post-tab-header-deebc551.js.map +0 -1
- package/dist/esm/post-tab-panel-4b820f71.js +0 -25
- package/dist/esm/post-tab-panel-4b820f71.js.map +0 -1
- package/dist/esm/post-tabs-2d8d6a33.js +0 -151
- package/dist/esm/post-tabs-2d8d6a33.js.map +0 -1
- package/dist/esm/post-tooltip-811309c5.js +0 -5093
- package/dist/esm/post-tooltip-811309c5.js.map +0 -1
- package/dist/post-components/p-0a49c1a3.entry.js +0 -2
- package/dist/post-components/p-27092ac3.entry.js +0 -2
- package/dist/post-components/p-27092ac3.entry.js.map +0 -1
- package/dist/post-components/p-332eef46.js +0 -2
- package/dist/post-components/p-541142fd.js +0 -2
- package/dist/post-components/p-541142fd.js.map +0 -1
- package/dist/post-components/p-574acdb0.js +0 -2
- package/dist/post-components/p-66460e3f.entry.js +0 -2
- package/dist/post-components/p-66460e3f.entry.js.map +0 -1
- package/dist/post-components/p-810ee105.entry.js +0 -2
- package/dist/post-components/p-810ee105.entry.js.map +0 -1
- package/dist/post-components/p-939df031.entry.js +0 -2
- package/dist/post-components/p-939df031.entry.js.map +0 -1
- package/dist/post-components/p-94b3f291.entry.js +0 -2
- package/dist/post-components/p-94b3f291.entry.js.map +0 -1
- package/dist/post-components/p-97000cb6.js +0 -2
- package/dist/post-components/p-abd149b3.entry.js +0 -2
- package/dist/post-components/p-abd149b3.entry.js.map +0 -1
- package/dist/post-components/p-c6b73d6e.js +0 -2
- package/dist/post-components/p-d4fb9f16.js +0 -2
- /package/dist/post-components/{p-1a8a8ef2.js.map → p-2755ba2e.entry.js.map} +0 -0
- /package/dist/post-components/{p-0a49c1a3.entry.js.map → p-4aae941f.js.map} +0 -0
- /package/dist/post-components/{p-e9dc9039.entry.js.map → p-6a0a1ce4.entry.js.map} +0 -0
- /package/dist/post-components/{p-d4fb9f16.js.map → p-7d91397a.entry.js.map} +0 -0
- /package/dist/post-components/{p-01e8dfe6.js.map → p-b4b7e30c.entry.js.map} +0 -0
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-b619e205.js');
|
|
4
|
-
const _package = require('./package-7c4db872.js');
|
|
5
|
-
const fade = require('./fade-35a3633a.js');
|
|
6
|
-
const index$1 = require('./index-b38a23e0.js');
|
|
7
|
-
const checkNonEmpty = require('./check-non-empty-ae713942.js');
|
|
8
|
-
|
|
9
|
-
const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'];
|
|
10
|
-
|
|
11
|
-
const postAlertCss = "/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */.alert-primary,.alert-success,.alert-danger,.alert-warning,.alert-info,.alert-gray,.alert-notification,.alert-error{background-color:rgb(var(--post-bg-rgb)) !important;color:var(--post-contrast-color) !important}.alert-success,.alert-warning,.alert-info,.alert-gray{--post-contrast-color:#000;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-primary:hsl(0, 0%, 20%);--post-white:#fff;--post-black:#000;--post-success:#2c911c;--post-info:#cce4ee;--post-warning:#f49e00;--post-danger:#a51728;--post-nightblue:#004976;--post-nightblue-bright:#0076a8;--post-petrol:#006d68;--post-petrol-bright:#00968f;--post-coral:#9e2a2f;--post-coral-bright:#e03c31;--post-olive:#716135;--post-olive-bright:#aa9d2e;--post-purple:#80276c;--post-purple-bright:#c5299b;--post-aubergine:#523178;--post-aubergine-bright:#7566a0;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-yellow-rgb:255, 204, 0;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-primary-rgb:51, 51, 51;--post-white-rgb:255, 255, 255;--post-black-rgb:0, 0, 0;--post-success-rgb:44, 145, 28;--post-info-rgb:204, 228, 238;--post-warning-rgb:244, 158, 0;--post-danger-rgb:165, 23, 40;--post-nightblue-rgb:0, 73, 118;--post-nightblue-bright-rgb:0, 118, 168;--post-petrol-rgb:0, 109, 104;--post-petrol-bright-rgb:0, 150, 143;--post-coral-rgb:158, 42, 47;--post-coral-bright-rgb:224, 60, 49;--post-olive-rgb:113, 97, 53;--post-olive-bright-rgb:170, 157, 46;--post-purple-rgb:128, 39, 108;--post-purple-bright-rgb:197, 41, 155;--post-aubergine-rgb:82, 49, 120;--post-aubergine-bright-rgb:117, 102, 160}.alert-primary,.alert-danger,.alert-notification,.alert-error{--post-contrast-color:#fff;--post-contrast-color-inverted:#000;--post-dark:#faf9f8;--post-light:hsl(0, 0%, 20%);--post-gray-80:hsl(0, 0%, 90%);--post-gray-60:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-20:hsl(0, 0%, 40%);--post-gray-10:hsl(0, 0%, 20%);--post-contrast-color-rgb:255, 255, 255;--post-contrast-color-inverted-rgb:0, 0, 0;--post-dark-rgb:250, 249, 248;--post-light-rgb:51, 51, 51;--post-gray-80-rgb:230, 230, 230;--post-gray-60-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-20-rgb:102, 102, 102;--post-gray-10-rgb:51, 51, 51}.alert{position:relative;box-sizing:border-box;min-height:5rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);border-radius:4px;padding:1rem 1.25rem;padding-inline-start:5.5rem;margin-block-end:1rem;font-size:1rem;font-weight:300}.alert.no-icon{min-height:3.5rem;padding-inline-start:1.25rem}.alert[class^=pi-],.alert[class*=\" pi-\"]{background-size:3rem;background-position:1.25rem 1rem;background-repeat:no-repeat}.alert[class^=pi-].no-icon,.alert[class*=\" pi-\"].no-icon{background-image:none}.alert::before{content:\"\";display:block}.alert::before,.alert>post-icon{position:absolute;height:3rem;width:3rem;left:1.25rem;top:1rem}.alert.no-icon::before,.alert[class^=pi-]::before,.alert[class*=\" pi-\"]::before{content:unset}.alert.no-icon>post-icon,.alert[class^=pi-]>post-icon,.alert[class*=\" pi-\"]>post-icon{display:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert{filter:none !important;background-color:rgba(0,0,0,0) !important;border:2px solid WindowText}}.alert:not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert:not(.alert-action) a{font-weight:400}.alert:not(.alert-action) hr{margin-block:.5rem .75rem !important}.alert:not(.alert-action)>:only-child,.alert:not(.alert-action)>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert:not(.alert-action)>*{margin:0}.alert-heading{font-size:1.0625rem;font-weight:700}.alert-dismissible{pointer-events:auto;position:relative;padding-inline-end:4rem}.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:1.25rem}.alert-dismissible>.btn-close:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action{display:flex;flex-direction:row;align-items:center;gap:1.25rem}.alert-action>.alert-content{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert-action>.alert-content a{font-weight:400}.alert-action>.alert-content hr{margin-block:.5rem .75rem !important}.alert-action>.alert-content>:only-child,.alert-action>.alert-content>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action>.alert-content>*{margin:0}.alert-action>.alert-buttons{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}@media (min-width: 780px){.alert-action.alert-dismissible>.btn-close{inset-block-start:calc(50% - 0.75rem)}}@media (max-width: 779.98px){.alert-action{flex-direction:column;align-items:stretch;padding-inline:1.25rem}.alert-action>.alert-content{padding-inline-start:4.25rem;padding-inline-end:2.75rem}.alert-action>.alert-buttons{display:flex}.alert-action>.alert-buttons>.btn{flex:1 0 0;width:100%}.alert-action>.alert-buttons>.btn:first-child{margin-inline-start:0}}.alert-fixed-bottom{position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;margin-bottom:0;border-radius:0;z-index:1030}@media (min-width: 1441px){.alert-fixed-bottom{padding-inline-end:calc((100% - 1440px) / 2 + 120px + 1.25rem);padding-inline-start:calc(\n (100% - 1440px) / 2 + 120px + 1.25rem + 3rem + 1.25rem\n );background-position-x:calc((100% - 1440px) / 2 + 120px + 1.25rem + 1.5rem)}.alert-fixed-bottom::before{left:calc((100% - 1440px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.no-icon{padding-inline-start:calc((100% - 1440px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.alert-dismissible{padding-inline-end:calc(\n (100% - 1440px) / 2 + 120px + 1.25rem + 1.25rem + 1.5rem\n )}.alert-fixed-bottom.alert-dismissible>.btn-close{inset-inline-end:calc((100% - 1440px) / 2 + 120px + 1.25rem)}}.alert-primary{--post-bg-rgb:51, 51, 51}.alert-primary:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-primary>post-icon{background-color:#333}.alert-success{--post-bg-rgb:44, 145, 28}.alert-success:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-success>post-icon{background-color:#2c911c}.alert-danger{--post-bg-rgb:165, 23, 40}.alert-danger:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-danger>post-icon{background-color:#a51728}.alert-warning{--post-bg-rgb:244, 158, 0}.alert-warning:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-warning>post-icon{background-color:#f49e00}.alert-info{--post-bg-rgb:204, 228, 238}.alert-info:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M17.333 25.333v-16h-4.667V12h2v13.333h-2V28h6.667v-2.667zM14.667 4h2.667v2.667h-2.667V4z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M17.333 25.333v-16h-4.667V12h2v13.333h-2V28h6.667v-2.667zM14.667 4h2.667v2.667h-2.667V4z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-info>post-icon{background-color:#cce4ee}.alert-gray{--post-bg-rgb:244, 243, 241}.alert-gray:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.241 5.241 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.241 5.241 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27zM16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.325 6.325 0 0 0-.325 1.997 6.598 6.598 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667zM11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0c0-.735.599-1.333 1.334-1.333s1.333.598 1.333 1.333-.598 1.334-1.333 1.334-1.334-.598-1.334-1.334zm13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333zm-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335zm7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM28.93 18.548a13.19 13.19 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266zm-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.647 11.647 0 0 0 2.359-.888.668.668 0 0 1 .896.294zM4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.798 11.798 0 0 0 4 15.92z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.241 5.241 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.241 5.241 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27zM16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.325 6.325 0 0 0-.325 1.997 6.598 6.598 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667zM11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0c0-.735.599-1.333 1.334-1.333s1.333.598 1.333 1.333-.598 1.334-1.333 1.334-1.334-.598-1.334-1.334zm13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333zm-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335zm7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM28.93 18.548a13.19 13.19 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266zm-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.647 11.647 0 0 0 2.359-.888.668.668 0 0 1 .896.294zM4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.798 11.798 0 0 0 4 15.92z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-gray>post-icon{background-color:#f4f3f1}.alert-notification{--post-bg-rgb:51, 51, 51}.alert-notification:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-notification>post-icon{background-color:#333}.alert-error{--post-bg-rgb:165, 23, 40}.alert-error:not(.no-icon,[class^=pi-],[class*=\" pi-\"])::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor}.alert-error>post-icon{background-color:#a51728}.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;outline-offset:2px;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.btn-close::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}:host ::slotted(*){margin:0 !important}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}.alert-heading>::slotted(h1){font-size:inherit !important;font-weight:inherit !important}.alert-heading>::slotted(h2){font-size:inherit !important;font-weight:inherit !important}.alert-heading>::slotted(h3){font-size:inherit !important;font-weight:inherit !important}.alert-heading>::slotted(h4){font-size:inherit !important;font-weight:inherit !important}.alert-heading>::slotted(h5){font-size:inherit !important;font-weight:inherit !important}.alert-heading>::slotted(h6){font-size:inherit !important;font-weight:inherit !important}";
|
|
12
|
-
|
|
13
|
-
const PostAlert = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
index.registerInstance(this, hostRef);
|
|
16
|
-
this.dismissed = index.createEvent(this, "dismissed", 7);
|
|
17
|
-
this.alertId = crypto.randomUUID();
|
|
18
|
-
this.classes = undefined;
|
|
19
|
-
this.hasActions = undefined;
|
|
20
|
-
this.hasHeading = undefined;
|
|
21
|
-
this.onDismissButtonClick = () => this.dismiss();
|
|
22
|
-
this.dismissible = false;
|
|
23
|
-
this.dismissLabel = undefined;
|
|
24
|
-
this.fixed = false;
|
|
25
|
-
this.icon = undefined;
|
|
26
|
-
this.type = 'primary';
|
|
27
|
-
}
|
|
28
|
-
validateDismissible(isDismissible = this.dismissible) {
|
|
29
|
-
index$1.checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
|
|
30
|
-
setTimeout(() => this.validateDismissLabel());
|
|
31
|
-
}
|
|
32
|
-
validateDismissLabel(dismissLabel = this.dismissLabel) {
|
|
33
|
-
if (this.dismissible) {
|
|
34
|
-
checkNonEmpty.checkNonEmpty(dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
validateFixed(isFixed = this.fixed) {
|
|
38
|
-
index$1.checkType(isFixed, 'boolean', 'The post-alert "fixed" prop should be a boolean.');
|
|
39
|
-
}
|
|
40
|
-
validateIcon(icon = this.icon) {
|
|
41
|
-
index$1.checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-alert "icon" prop should be a 4-digits string.');
|
|
42
|
-
}
|
|
43
|
-
validateType(type = this.type) {
|
|
44
|
-
index$1.checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
|
|
45
|
-
}
|
|
46
|
-
connectedCallback() {
|
|
47
|
-
this.validateDismissible();
|
|
48
|
-
this.validateFixed();
|
|
49
|
-
this.validateIcon();
|
|
50
|
-
this.validateType();
|
|
51
|
-
}
|
|
52
|
-
componentWillRender() {
|
|
53
|
-
var _a;
|
|
54
|
-
this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
|
|
55
|
-
this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
|
|
56
|
-
this.classes = `alert alert-${(_a = this.type) !== null && _a !== void 0 ? _a : 'primary'}`;
|
|
57
|
-
if (this.dismissible)
|
|
58
|
-
this.classes += ' alert-dismissible';
|
|
59
|
-
if (this.hasActions)
|
|
60
|
-
this.classes += ' alert-action';
|
|
61
|
-
if (this.fixed)
|
|
62
|
-
this.classes += ' alert-fixed-bottom';
|
|
63
|
-
if (this.icon === 'none')
|
|
64
|
-
this.classes += ' no-icon';
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Triggers alert dismissal programmatically (same as clicking on the close button (×)).
|
|
68
|
-
*/
|
|
69
|
-
async dismiss() {
|
|
70
|
-
const dismissal = fade.fadeOut(this.host);
|
|
71
|
-
await dismissal.finished;
|
|
72
|
-
this.host.remove();
|
|
73
|
-
this.dismissed.emit();
|
|
74
|
-
}
|
|
75
|
-
render() {
|
|
76
|
-
const defaultAlertContent = [
|
|
77
|
-
this.hasHeading && (index.h("div", { key: `${this.alertId}-heading`, class: "alert-heading" }, index.h("slot", { name: "heading" }))),
|
|
78
|
-
index.h("slot", { key: `${this.alertId}-message` })
|
|
79
|
-
];
|
|
80
|
-
const actionAlertContent = [
|
|
81
|
-
index.h("div", { key: `${this.alertId}-content`, class: "alert-content" }, defaultAlertContent),
|
|
82
|
-
index.h("div", { key: `${this.alertId}-buttons`, class: "alert-buttons" }, index.h("slot", { name: "actions" })),
|
|
83
|
-
];
|
|
84
|
-
return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { role: "alert", class: this.classes }, this.dismissible && (index.h("button", { class: "btn-close", onClick: this.onDismissButtonClick }, index.h("span", { class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (index.h("post-icon", { key: `${this.alertId}-icon`, name: this.icon })), this.hasActions
|
|
85
|
-
? actionAlertContent
|
|
86
|
-
: defaultAlertContent)));
|
|
87
|
-
}
|
|
88
|
-
get host() { return index.getElement(this); }
|
|
89
|
-
static get watchers() { return {
|
|
90
|
-
"dismissible": ["validateDismissible"],
|
|
91
|
-
"dismissLabel": ["validateDismissLabel"],
|
|
92
|
-
"fixed": ["validateFixed"],
|
|
93
|
-
"icon": ["validateIcon"],
|
|
94
|
-
"type": ["validateType"]
|
|
95
|
-
}; }
|
|
96
|
-
};
|
|
97
|
-
PostAlert.style = postAlertCss;
|
|
98
|
-
|
|
99
|
-
exports.PostAlert = PostAlert;
|
|
100
|
-
|
|
101
|
-
//# sourceMappingURL=post-alert-c037e6a3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"post-alert-c037e6a3.js","mappings":"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","names":["checkType","checkNonEmpty","checkEmptyOrPattern","checkEmptyOrOneOf","fadeOut","h","Host","version"],"sources":["src/components/post-alert/alert-types.ts","src/components/post-alert/post-alert.scss?tag=post-alert&encapsulation=shadow","src/components/post-alert/post-alert.tsx"],"sourcesContent":["export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'] as const;\n\nexport type AlertType = typeof ALERT_TYPES[number];\n","@use '@swisspost/design-system-styles/components/alert';\n@use '@swisspost/design-system-styles/components/close';\n@use '@swisspost/design-system-styles/core' as post;\n\n:host {\n display: block;\n\n ::slotted(*) {\n margin: 0 !important;\n }\n}\n\n.visually-hidden {\n @include post.visually-hidden();\n}\n\n@for $i from 1 through 6 {\n .alert-heading > ::slotted(h#{$i}) {\n font-size: inherit !important;\n font-weight: inherit !important;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeOut } from '../../animations';\nimport { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';\nimport { ALERT_TYPES, AlertType } from './alert-types';\n\n@Component({\n tag: 'post-alert',\n styleUrl: 'post-alert.scss',\n shadow: true,\n})\nexport class PostAlert {\n @Element() host: HTMLPostAlertElement;\n\n @State() alertId = crypto.randomUUID();\n @State() classes: string;\n @State() hasActions: boolean;\n @State() hasHeading: boolean;\n @State() onDismissButtonClick = () => this.dismiss();\n\n /**\n * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.\n */\n @Prop() readonly dismissible: boolean = false;\n\n @Watch('dismissible')\n validateDismissible(isDismissible = this.dismissible) {\n checkType(isDismissible, 'boolean', 'The post-alert \"dismissible\" prop should be a boolean.');\n setTimeout(() => this.validateDismissLabel());\n }\n\n /**\n * The label to use for the close button of a dismissible alert.\n */\n @Prop() readonly dismissLabel: string;\n\n @Watch('dismissLabel')\n validateDismissLabel(dismissLabel = this.dismissLabel) {\n if (this.dismissible) {\n checkNonEmpty(dismissLabel, 'Dismissible post-alert\\'s require a \"dismiss-label\" prop.');\n }\n }\n\n /**\n * If `true`, the alert is positioned at the bottom of the window, from edge to edge.\n */\n @Prop() readonly fixed: boolean = false;\n\n @Watch('fixed')\n validateFixed(isFixed = this.fixed) {\n checkType(isFixed, 'boolean', 'The post-alert \"fixed\" prop should be a boolean.');\n }\n\n /**\n * The icon to display in the alert. By default, the icon depends on the alert type.\n *\n * If `none`, no icon is displayed.\n */\n @Prop() readonly icon: string;\n\n @Watch('icon')\n validateIcon(icon = this.icon) {\n checkEmptyOrPattern(icon, /\\d{4}|none/, 'The post-alert \"icon\" prop should be a 4-digits string.');\n }\n\n /**\n * The type of the alert.\n */\n @Prop() readonly type: AlertType = 'primary';\n\n @Watch('type')\n validateType(type = this.type) {\n checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);\n }\n\n /**\n * An event emitted when the alert element is dismissed, after the transition.\n * It has no payload and only relevant for dismissible alerts.\n */\n @Event() dismissed: EventEmitter<void>;\n\n connectedCallback() {\n this.validateDismissible();\n this.validateFixed();\n this.validateIcon();\n this.validateType();\n }\n\n componentWillRender() {\n this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;\n this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;\n\n this.classes = `alert alert-${this.type ?? 'primary'}`;\n if (this.dismissible) this.classes += ' alert-dismissible';\n if (this.hasActions) this.classes += ' alert-action';\n if (this.fixed) this.classes += ' alert-fixed-bottom';\n if (this.icon === 'none') this.classes += ' no-icon';\n }\n\n /**\n * Triggers alert dismissal programmatically (same as clicking on the close button (×)).\n */\n @Method()\n async dismiss() {\n const dismissal = fadeOut(this.host);\n\n await dismissal.finished;\n\n this.host.remove();\n this.dismissed.emit();\n }\n\n render() {\n const defaultAlertContent = [\n this.hasHeading && (\n <div key={`${this.alertId}-heading`} class=\"alert-heading\">\n <slot name=\"heading\"/>\n </div>\n ),\n <slot key={`${this.alertId}-message`}/>\n ];\n\n const actionAlertContent = [\n <div key={`${this.alertId}-content`} class=\"alert-content\">\n {defaultAlertContent}\n </div>,\n <div key={`${this.alertId}-buttons`} class=\"alert-buttons\">\n <slot name=\"actions\"/>\n </div>,\n ];\n\n return (\n <Host data-version={version}>\n <div role=\"alert\" class={this.classes}>\n {this.dismissible && (\n <button class=\"btn-close\" onClick={this.onDismissButtonClick}>\n <span class=\"visually-hidden\">{this.dismissLabel}</span>\n </button>\n )}\n\n {this.icon && this.icon !== 'none' && (\n <post-icon key={`${this.alertId}-icon`} name={this.icon} />\n )}\n\n {this.hasActions\n ? actionAlertContent\n : defaultAlertContent\n }\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-b619e205.js');
|
|
4
|
-
const _package = require('./package-7c4db872.js');
|
|
5
|
-
const index$1 = require('./index-b38a23e0.js');
|
|
6
|
-
|
|
7
|
-
function isMotionReduced() {
|
|
8
|
-
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const collapseDuration = 350;
|
|
12
|
-
const collapseEasing = 'ease';
|
|
13
|
-
const collapsedKeyframe = { height: '0', overflow: 'hidden' };
|
|
14
|
-
const collapse = (el) => {
|
|
15
|
-
const { height } = window.getComputedStyle(el);
|
|
16
|
-
const expandedKeyframe = { height };
|
|
17
|
-
return el.animate([expandedKeyframe, collapsedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
|
|
18
|
-
};
|
|
19
|
-
const expand = (el) => {
|
|
20
|
-
const expandedKeyframe = { height: `${el.scrollHeight}px` };
|
|
21
|
-
return el.animate([collapsedKeyframe, expandedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
|
|
25
|
-
|
|
26
|
-
const postCollapsibleCss = ".accordion-item{border-block-start:2px solid #e6e6e6}.accordion-header{font-size:1.0625rem;font-weight:700;line-height:1.5;margin:0}@media (min-width: 1024px){.accordion-header{font-size:1.25rem}}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:2.5rem;text-align:start}.accordion-button:not(:disabled){cursor:pointer}.accordion-button:disabled{opacity:.4}.accordion-button:focus{outline:none;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);border:1px solid rgb(var(--post-bg-rgb, 255, 255, 255))}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.75rem 1rem 2.5rem;border-block-start:2px solid #e6e6e6}.accordion-body h1,.accordion-body .h1{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h1,.accordion-body .h1{font-size:1.25rem}}.accordion-body h2,.accordion-body .h2{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h2,.accordion-body .h2{font-size:1.25rem}}.accordion-body h3,.accordion-body .h3{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h3,.accordion-body .h3{font-size:1.25rem}}.accordion-body h4,.accordion-body .h4{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h4,.accordion-body .h4{font-size:1.25rem}}.accordion-body h5,.accordion-body .h5{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h5,.accordion-body .h5{font-size:1.25rem}}.accordion-body h6,.accordion-body .h6{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h6,.accordion-body .h6{font-size:1.25rem}}.accordion-button>:first-child,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>:last-child,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}:host .accordion-button>::slotted(.text-truncate){display:block}";
|
|
27
|
-
|
|
28
|
-
const PostCollapsible = class {
|
|
29
|
-
constructor(hostRef) {
|
|
30
|
-
index.registerInstance(this, hostRef);
|
|
31
|
-
this.collapseChange = index.createEvent(this, "collapseChange", 7);
|
|
32
|
-
this.isLoaded = false;
|
|
33
|
-
this.id = undefined;
|
|
34
|
-
this.isOpen = true;
|
|
35
|
-
this.hasHeader = undefined;
|
|
36
|
-
this.headingTag = undefined;
|
|
37
|
-
this.collapsed = false;
|
|
38
|
-
this.headingLevel = 2;
|
|
39
|
-
}
|
|
40
|
-
validateCollapsed(newValue = this.collapsed) {
|
|
41
|
-
index$1.checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
|
|
42
|
-
}
|
|
43
|
-
validateHeadingLevel(newValue = this.headingLevel) {
|
|
44
|
-
index$1.checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
|
|
45
|
-
}
|
|
46
|
-
connectedCallback() {
|
|
47
|
-
this.validateCollapsed();
|
|
48
|
-
this.validateHeadingLevel();
|
|
49
|
-
}
|
|
50
|
-
componentWillRender() {
|
|
51
|
-
var _a;
|
|
52
|
-
this.id = this.host.id || `c${crypto.randomUUID()}`;
|
|
53
|
-
this.hasHeader = this.host.querySelectorAll('[slot="header"]').length > 0;
|
|
54
|
-
this.headingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
|
|
55
|
-
}
|
|
56
|
-
componentDidLoad() {
|
|
57
|
-
if (this.collapsed)
|
|
58
|
-
void this.toggle(false);
|
|
59
|
-
this.isLoaded = true;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Triggers the collapse programmatically.
|
|
63
|
-
*
|
|
64
|
-
* If there is a collapsing transition running already, it will be reversed.
|
|
65
|
-
*/
|
|
66
|
-
async toggle(open = !this.isOpen) {
|
|
67
|
-
if (open === this.isOpen)
|
|
68
|
-
return open;
|
|
69
|
-
this.isOpen = !this.isOpen;
|
|
70
|
-
if (this.isLoaded)
|
|
71
|
-
this.collapseChange.emit();
|
|
72
|
-
const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
|
|
73
|
-
if (!this.isLoaded || isMotionReduced())
|
|
74
|
-
animation.finish();
|
|
75
|
-
await animation.finished;
|
|
76
|
-
animation.commitStyles();
|
|
77
|
-
return this.isOpen;
|
|
78
|
-
}
|
|
79
|
-
render() {
|
|
80
|
-
const collapse = (index.h("div", { "aria-labelledby": this.hasHeader ? `${this.id}--header` : undefined, class: `collapse${this.hasHeader ? ' accordion-collapse' : ''}`, id: `${this.id}--collapse`, ref: el => this.collapsible = el }, this.hasHeader ? (index.h("div", { class: "accordion-body" }, index.h("slot", null))) : (index.h("slot", null))));
|
|
81
|
-
return (index.h(index.Host, { id: this.id, "data-version": _package.version }, this.hasHeader ? (index.h("div", { class: "accordion-item" }, index.h(this.headingTag, { class: "accordion-header", id: `${this.id}--header` }, index.h("button", { "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, index.h("slot", { name: "header" }))), collapse)) : collapse));
|
|
82
|
-
}
|
|
83
|
-
get host() { return index.getElement(this); }
|
|
84
|
-
static get watchers() { return {
|
|
85
|
-
"collapsed": ["validateCollapsed"],
|
|
86
|
-
"headingLevel": ["validateHeadingLevel"]
|
|
87
|
-
}; }
|
|
88
|
-
};
|
|
89
|
-
PostCollapsible.style = postCollapsibleCss;
|
|
90
|
-
|
|
91
|
-
exports.PostCollapsible = PostCollapsible;
|
|
92
|
-
|
|
93
|
-
//# sourceMappingURL=post-collapsible-7c9d23a2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"post-collapsible-7c9d23a2.js","mappings":"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","names":["checkEmptyOrType","checkEmptyOrOneOf","h","Host","version"],"sources":["src/utils/is-motion-reduced.ts","src/animations/collapse.ts","src/components/post-collapsible/heading-levels.ts","src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function isMotionReduced(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","const collapseDuration = 350;\nconst collapseEasing = 'ease';\nconst collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };\n\nexport const collapse = (el: HTMLElement): Animation => {\n const { height } = window.getComputedStyle(el);\n const expandedKeyframe: Keyframe = { height };\n\n return el.animate(\n [expandedKeyframe, collapsedKeyframe],\n { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n );\n};\n\nexport const expand = (el: HTMLElement): Animation => {\n const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };\n\n return el.animate(\n [collapsedKeyframe, expandedKeyframe],\n { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n );\n};\n","export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\n\nexport type HeadingLevel = typeof HEADING_LEVELS[number];\n","@use '@swisspost/design-system-styles/components/accordion';\n\n:host {\n display: block;\n\n .accordion-button > ::slotted(.text-truncate) {\n display: block;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n private isLoaded = false;\n private collapsible: HTMLElement;\n\n @Element() host: HTMLPostCollapsibleElement;\n\n @State() id: string;\n @State() isOpen = true;\n @State() hasHeader: boolean;\n @State() headingTag: string;\n\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() readonly collapsed?: boolean = false;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');\n }\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');\n }\n\n /**\n * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n */\n @Event() collapseChange: EventEmitter<void>;\n\n connectedCallback() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n }\n\n componentWillRender() {\n this.id = this.host.id || `c${crypto.randomUUID()}`;\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n this.headingTag = `h${this.headingLevel ?? 2}`;\n }\n\n componentDidLoad() {\n if (this.collapsed) void this.toggle(false);\n this.isLoaded = true;\n }\n\n /**\n * Triggers the collapse programmatically.\n *\n * If there is a collapsing transition running already, it will be reversed.\n */\n @Method()\n async toggle(open = !this.isOpen): Promise<boolean> {\n if (open === this.isOpen) return open;\n\n this.isOpen = !this.isOpen;\n if (this.isLoaded) this.collapseChange.emit();\n\n const animation = open ? expand(this.collapsible): collapse(this.collapsible);\n\n if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n await animation.finished;\n\n animation.commitStyles();\n\n return this.isOpen;\n }\n\n render() {\n const collapse = (\n <div\n aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n id={`${this.id}--collapse`}\n ref={el => this.collapsible = el}\n >\n {this.hasHeader ? (\n <div class=\"accordion-body\">\n <slot/>\n </div>\n ) : (\n <slot/>\n )}\n </div>\n );\n\n return (\n <Host id={this.id} data-version={version}>\n {this.hasHeader ? (\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n <button\n aria-controls={`${this.id}--collapse`}\n aria-expanded={`${this.isOpen}`}\n class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n onClick={() => this.toggle()}\n type=\"button\"\n >\n <slot name=\"header\"/>\n </button>\n </this.headingTag>\n\n {collapse}\n </div>\n ) : collapse}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-b619e205.js');
|
|
4
|
-
const index$1 = require('./index-b38a23e0.js');
|
|
5
|
-
const _package = require('./package-7c4db872.js');
|
|
6
|
-
const checkNonEmpty = require('./check-non-empty-ae713942.js');
|
|
7
|
-
|
|
8
|
-
const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
|
|
9
|
-
|
|
10
|
-
const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
|
|
11
|
-
const ANIMATION_NAMES = [
|
|
12
|
-
'cylon',
|
|
13
|
-
'cylon-vertical',
|
|
14
|
-
'spin',
|
|
15
|
-
'spin-reverse',
|
|
16
|
-
'fade',
|
|
17
|
-
'throb',
|
|
18
|
-
];
|
|
19
|
-
const ANIMATION_KEYS = [...ANIMATION_NAMES];
|
|
20
|
-
const PostIcon = class {
|
|
21
|
-
constructor(hostRef) {
|
|
22
|
-
index.registerInstance(this, hostRef);
|
|
23
|
-
this.svgStyles = undefined;
|
|
24
|
-
this.svgOutput = undefined;
|
|
25
|
-
this.animation = null;
|
|
26
|
-
this.base = null;
|
|
27
|
-
this.flipH = false;
|
|
28
|
-
this.flipV = false;
|
|
29
|
-
this.name = undefined;
|
|
30
|
-
this.rotate = null;
|
|
31
|
-
this.scale = null;
|
|
32
|
-
}
|
|
33
|
-
validateAnimation(newValue = this.animation) {
|
|
34
|
-
if (newValue !== undefined)
|
|
35
|
-
index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
|
|
36
|
-
}
|
|
37
|
-
validateBase(newValue = this.base) {
|
|
38
|
-
index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
|
|
39
|
-
}
|
|
40
|
-
validateFlipH(newValue = this.flipH) {
|
|
41
|
-
index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
|
|
42
|
-
}
|
|
43
|
-
validateFlipV(newValue = this.flipV) {
|
|
44
|
-
index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
|
|
45
|
-
}
|
|
46
|
-
validateName(newValue = this.name) {
|
|
47
|
-
checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
|
|
48
|
-
index$1.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
|
|
49
|
-
}
|
|
50
|
-
validateRotate(newValue = this.rotate) {
|
|
51
|
-
index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
|
|
52
|
-
}
|
|
53
|
-
validateScale(newValue = this.scale) {
|
|
54
|
-
index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
|
|
55
|
-
}
|
|
56
|
-
componentWillLoad() {
|
|
57
|
-
this.validateBase();
|
|
58
|
-
this.validateName();
|
|
59
|
-
this.validateFlipH();
|
|
60
|
-
this.validateFlipV();
|
|
61
|
-
this.validateScale();
|
|
62
|
-
this.validateRotate();
|
|
63
|
-
this.validateAnimation();
|
|
64
|
-
}
|
|
65
|
-
componentWillRender() {
|
|
66
|
-
this.setPath();
|
|
67
|
-
}
|
|
68
|
-
setPath() {
|
|
69
|
-
var _a, _b, _c, _d;
|
|
70
|
-
// Construct icon path from different possible sources
|
|
71
|
-
const metaBase = (_b = (_a = document.head
|
|
72
|
-
.querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
|
|
73
|
-
const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
|
|
74
|
-
const fileName = `${this.name}.svg#icon`;
|
|
75
|
-
const filePath = `${fileBase}${fileName}`;
|
|
76
|
-
this.path = new URL(filePath, window.location.origin).toString();
|
|
77
|
-
}
|
|
78
|
-
render() {
|
|
79
|
-
// create inline styles for some properties
|
|
80
|
-
const svgStyles = Object.entries({
|
|
81
|
-
'-webkit-mask-image': `url('${this.path}')`,
|
|
82
|
-
'mask-image': `url('${this.path}')`,
|
|
83
|
-
'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
|
|
84
|
-
'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
|
|
85
|
-
})
|
|
86
|
-
.filter(([_key, value]) => value !== null)
|
|
87
|
-
.reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
|
|
88
|
-
return (index.h(index.Host, { "data-version": _package.version }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", style: svgStyles })));
|
|
89
|
-
}
|
|
90
|
-
get host() { return index.getElement(this); }
|
|
91
|
-
static get watchers() { return {
|
|
92
|
-
"animation": ["validateAnimation"],
|
|
93
|
-
"base": ["validateBase"],
|
|
94
|
-
"flipH": ["validateFlipH"],
|
|
95
|
-
"flipV": ["validateFlipV"],
|
|
96
|
-
"name": ["validateName"],
|
|
97
|
-
"rotate": ["validateRotate"],
|
|
98
|
-
"scale": ["validateScale"]
|
|
99
|
-
}; }
|
|
100
|
-
};
|
|
101
|
-
PostIcon.style = postIconCss;
|
|
102
|
-
|
|
103
|
-
exports.PostIcon = PostIcon;
|
|
104
|
-
|
|
105
|
-
//# sourceMappingURL=post-icon-f418f76a.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"post-icon-f418f76a.js","mappings":"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","names":["checkEmptyOrOneOf","checkEmptyOrType","checkNonEmpty","checkType","h","Host","version"],"sources":["src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n 'spin': icon-animation-spin 2s linear infinite normal,\n 'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n 'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n display: inline-block;\n width: 1em;\n vertical-align: -0.15em;\n}\n\nsvg {\n display: block;\n width: 100%;\n height: 100%;\n fill: currentColor;\n background-color: currentColor;\n -webkit-mask-position: center center;\n mask-position: center center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100%;\n mask-size: 100%;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n scale: -1 1;\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n scale: 1 -1;\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n scale: -1;\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n tag: 'post-icon',\n styleUrl: 'post-icon.scss',\n shadow: true,\n})\nexport class PostIcon {\n private path: string;\n\n @Element() host: HTMLPostIconElement;\n\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /**\n * The name of the animation.\n */\n @Prop() readonly animation?: Animation | null = null;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined)\n checkEmptyOrOneOf(\n newValue,\n ANIMATION_KEYS,\n `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n ', ',\n )}.`,\n );\n }\n\n /**\n * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n */\n @Prop() readonly base?: string | null = null;\n\n @Watch('base')\n validateBase(newValue = this.base) {\n checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n }\n\n /**\n * When set to `true`, the icon will be flipped horizontally.\n */\n @Prop() readonly flipH?: boolean = false;\n\n @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\n\n /**\n * When set to `true`, the icon will be flipped vertically.\n */\n @Prop() readonly flipV?: boolean = false;\n\n @Watch('flipV')\n validateFlipV(newValue = this.flipV) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n }\n\n /**\n * The name/id of the icon (e.g. 1000, 1001, ...).\n */\n @Prop() readonly name!: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\n\n /**\n * The number of degree for the css rotate transformation.\n */\n @Prop() readonly rotate?: number | null = null;\n\n @Watch('rotate')\n validateRotate(newValue = this.rotate) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n }\n\n /**\n * The number for the css scale transformation.\n */\n @Prop() readonly scale?: number | null = null;\n\n @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\n\n componentWillLoad() {\n this.validateBase();\n this.validateName();\n this.validateFlipH();\n this.validateFlipV();\n this.validateScale();\n this.validateRotate();\n this.validateAnimation();\n }\n\n componentWillRender() {\n this.setPath();\n }\n\n private setPath() {\n // Construct icon path from different possible sources\n const metaBase =\n document.head\n .querySelector('meta[name=\"design-system-settings\"][data-post-icon-base]')\n ?.getAttribute('data-post-icon-base') ?? null;\n\n const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\\/\\/$/, '/');\n const fileName = `${this.name}.svg#icon`;\n const filePath = `${fileBase}${fileName}`;\n\n this.path = new URL(filePath, window.location.origin).toString();\n }\n\n render() {\n // create inline styles for some properties\n const svgStyles = Object.entries({\n '-webkit-mask-image': `url('${this.path}')`,\n 'mask-image': `url('${this.path}')`,\n 'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n 'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n })\n .filter(([_key, value]) => value !== null)\n .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n\n return (\n <Host data-version={version}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style={svgStyles}>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-b619e205.js');
|
|
4
|
-
const _package = require('./package-7c4db872.js');
|
|
5
|
-
const checkNonEmpty = require('./check-non-empty-ae713942.js');
|
|
6
|
-
|
|
7
|
-
const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button}";
|
|
8
|
-
|
|
9
|
-
const PostTabHeader = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.tabId = undefined;
|
|
13
|
-
this.panel = undefined;
|
|
14
|
-
}
|
|
15
|
-
validateFor(newValue) {
|
|
16
|
-
checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
|
|
17
|
-
}
|
|
18
|
-
componentWillLoad() {
|
|
19
|
-
this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
return (index.h(index.Host, { "data-version": _package.version }, index.h("button", { "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, index.h("slot", null))));
|
|
23
|
-
}
|
|
24
|
-
get host() { return index.getElement(this); }
|
|
25
|
-
static get watchers() { return {
|
|
26
|
-
"panel": ["validateFor"]
|
|
27
|
-
}; }
|
|
28
|
-
};
|
|
29
|
-
PostTabHeader.style = postTabHeaderCss;
|
|
30
|
-
|
|
31
|
-
exports.PostTabHeader = PostTabHeader;
|
|
32
|
-
|
|
33
|
-
//# sourceMappingURL=post-tab-header-e08c2a42.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"post-tab-header-e08c2a42.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,k+LAAk+L;;MCS9+L,aAAa;;;;;;EAWxB,WAAW,CAAC,QAAyC;IACnDA,2BAAa,CAAC,QAAQ,EAAE,uDAAuD,CAAC,CAAC;GAClF;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC3D;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,qCAAsB,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACpGA,qBAAQ,CACD,CACJ,EACP;GACH;;;;;;;;;;","names":["checkNonEmpty","h","Host","version"],"sources":["src/components/post-tab-header/post-tab-header.scss?tag=post-tab-header&encapsulation=shadow","src/components/post-tab-header/post-tab-header.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tab-title';\n@use '@swisspost/design-system-styles/core' as post;\n\n:host {\n display: block;\n}\n\n.tab-title {\n @include post.reset-button;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { checkNonEmpty } from '../../utils';\n\n@Component({\n tag: 'post-tab-header',\n styleUrl: 'post-tab-header.scss',\n shadow: true,\n})\nexport class PostTabHeader {\n @Element() host: HTMLPostTabHeaderElement;\n\n @State() tabId: string;\n\n /**\n * The name of the panel controlled by the tab header.\n */\n @Prop() readonly panel: HTMLPostTabPanelElement['name'];\n\n @Watch('panel')\n validateFor(newValue: HTMLPostTabPanelElement['name']) {\n checkNonEmpty(newValue, 'The \"panel\" prop is required for the post-tab-header.');\n }\n\n componentWillLoad() {\n this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;\n }\n\n render() {\n return (\n <Host data-version={version}>\n <button aria-selected=\"false\" class=\"tab-title\" id={this.tabId} role=\"tab\" tabindex=\"-1\" type=\"button\">\n <slot />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-b619e205.js');
|
|
4
|
-
const _package = require('./package-7c4db872.js');
|
|
5
|
-
|
|
6
|
-
const postTabPanelCss = ":host{display:none}";
|
|
7
|
-
|
|
8
|
-
const PostTabPanel = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
index.registerInstance(this, hostRef);
|
|
11
|
-
this.panelId = undefined;
|
|
12
|
-
this.name = undefined;
|
|
13
|
-
}
|
|
14
|
-
componentWillLoad() {
|
|
15
|
-
// get the id set on the host element or use a random id by default
|
|
16
|
-
this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "tab-pane", id: this.panelId, role: "tabpanel" }, index.h("slot", null))));
|
|
20
|
-
}
|
|
21
|
-
get host() { return index.getElement(this); }
|
|
22
|
-
};
|
|
23
|
-
PostTabPanel.style = postTabPanelCss;
|
|
24
|
-
|
|
25
|
-
exports.PostTabPanel = PostTabPanel;
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=post-tab-panel-721f7f32.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"post-tab-panel-721f7f32.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,qBAAqB;;MCQhC,YAAY;;;;;;EAUvB,iBAAiB;;IAEf,IAAI,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC/D;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,iBACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,IAEfA,qBAAO,CACH,CACD,EACP;GACH;;;;;;;","names":["h","Host","version"],"sources":["src/components/post-tab-panel/post-tab-panel.scss?tag=post-tab-panel&encapsulation=shadow","src/components/post-tab-panel/post-tab-panel.tsx"],"sourcesContent":[":host {\n display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n tag: 'post-tab-panel',\n styleUrl: 'post-tab-panel.scss',\n shadow: true,\n})\nexport class PostTabPanel {\n @Element() host: HTMLPostTabPanelElement;\n\n @State() panelId: string;\n\n /**\n * The name of the panel, used to associate it with a tab header.\n */\n @Prop() readonly name: string;\n\n componentWillLoad() {\n // get the id set on the host element or use a random id by default\n this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n }\n\n render() {\n return (\n <Host data-version={version}>\n <div\n class=\"tab-pane\"\n id={this.panelId}\n role=\"tabpanel\"\n >\n <slot/>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|