@pine-ds/core 2.10.0-mercury.0 → 2.12.0-mercury.0
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/components/pds-accordion.js +1 -1
- package/components/pds-accordion.js.map +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-avatar.js.map +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-button2.js.map +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-chip.js +1 -1
- package/components/pds-chip.js.map +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-copytext.js.map +1 -1
- package/components/pds-input.js +1 -1
- package/components/pds-input.js.map +1 -1
- package/components/pds-link.js +1 -1
- package/components/pds-link.js.map +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-radio.js.map +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-switch.js.map +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tab.js.map +1 -1
- package/components/pds-table.js +1 -1
- package/components/pds-table.js.map +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-textarea.js.map +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +1 -1
- package/dist/cjs/pds-link.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js +1 -1
- package/dist/cjs/pds-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js.map +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/components/pds-accordion/pds-accordion.css +1 -1
- package/dist/collection/components/pds-avatar/pds-avatar.css +1 -1
- package/dist/collection/components/pds-button/pds-button.css +6 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +2 -2
- package/dist/collection/components/pds-chip/pds-chip.css +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.css +1 -1
- package/dist/collection/components/pds-input/pds-input.css +2 -2
- package/dist/collection/components/pds-link/pds-link.css +1 -1
- package/dist/collection/components/pds-radio/pds-radio.css +3 -3
- package/dist/collection/components/pds-switch/pds-switch.css +3 -3
- package/dist/collection/components/pds-table/pds-table.css +1 -1
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +3 -2
- package/dist/collection/components/pds-textarea/pds-textarea.css +5 -5
- package/dist/docs.json +1 -1
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-accordion.entry.js.map +1 -1
- package/dist/esm/pds-avatar.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +1 -1
- package/dist/esm/pds-button.entry.js.map +1 -1
- package/dist/esm/pds-checkbox.entry.js +1 -1
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +1 -1
- package/dist/esm/pds-chip.entry.js.map +1 -1
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-input.entry.js +1 -1
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-link.entry.js.map +1 -1
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-radio.entry.js.map +1 -1
- package/dist/esm/pds-switch.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js.map +1 -1
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-tab.entry.js.map +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-table.entry.js.map +1 -1
- package/dist/esm/pds-textarea.entry.js +1 -1
- package/dist/esm/pds-textarea.entry.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js.map +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js.map +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js.map +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js.map +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js.map +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js.map +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js.map +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js.map +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js.map +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js.map +1 -1
- package/dist/pine-core/p-0ead537a.entry.js +2 -0
- package/dist/pine-core/p-0ead537a.entry.js.map +1 -0
- package/dist/pine-core/p-1136f5f0.system.entry.js +2 -0
- package/dist/pine-core/p-1136f5f0.system.entry.js.map +1 -0
- package/dist/pine-core/p-2dfe6df4.system.entry.js +2 -0
- package/dist/pine-core/p-2dfe6df4.system.entry.js.map +1 -0
- package/dist/pine-core/p-2e861def.entry.js +2 -0
- package/dist/pine-core/p-2e861def.entry.js.map +1 -0
- package/dist/pine-core/p-33b93727.system.entry.js +2 -0
- package/dist/pine-core/p-33b93727.system.entry.js.map +1 -0
- package/dist/pine-core/p-34631565.system.js +1 -1
- package/dist/pine-core/p-4072c903.entry.js +2 -0
- package/dist/pine-core/{p-098a54a8.system.entry.js.map → p-4072c903.entry.js.map} +1 -1
- package/dist/pine-core/p-415c930f.system.entry.js +2 -0
- package/dist/pine-core/p-415c930f.system.entry.js.map +1 -0
- package/dist/pine-core/p-49b0b479.entry.js +2 -0
- package/dist/pine-core/p-49b0b479.entry.js.map +1 -0
- package/dist/pine-core/p-49fe8d1f.system.entry.js +2 -0
- package/dist/pine-core/p-49fe8d1f.system.entry.js.map +1 -0
- package/dist/pine-core/p-5138c5cb.entry.js +2 -0
- package/dist/pine-core/p-5138c5cb.entry.js.map +1 -0
- package/dist/pine-core/p-5ab30e47.entry.js +2 -0
- package/dist/pine-core/p-5ab30e47.entry.js.map +1 -0
- package/dist/pine-core/p-61ea4acc.system.entry.js +2 -0
- package/dist/pine-core/p-61ea4acc.system.entry.js.map +1 -0
- package/dist/pine-core/p-67d1cbc6.system.entry.js +2 -0
- package/dist/pine-core/p-67d1cbc6.system.entry.js.map +1 -0
- package/dist/pine-core/p-71e5bee8.entry.js +2 -0
- package/dist/pine-core/p-71e5bee8.entry.js.map +1 -0
- package/dist/pine-core/p-8110641b.entry.js +2 -0
- package/dist/pine-core/{p-fd1d280b.system.entry.js.map → p-8110641b.entry.js.map} +1 -1
- package/dist/pine-core/p-844d3066.system.entry.js +2 -0
- package/dist/pine-core/p-844d3066.system.entry.js.map +1 -0
- package/dist/pine-core/p-8ece8294.system.entry.js +2 -0
- package/dist/pine-core/p-8ece8294.system.entry.js.map +1 -0
- package/dist/pine-core/p-ada71d7d.entry.js +2 -0
- package/dist/pine-core/{p-426e0f6b.system.entry.js.map → p-ada71d7d.entry.js.map} +1 -1
- package/dist/pine-core/p-b05d4eec.system.entry.js +2 -0
- package/dist/pine-core/p-b05d4eec.system.entry.js.map +1 -0
- package/dist/pine-core/p-bc1ad9d9.system.entry.js +2 -0
- package/dist/pine-core/p-bc1ad9d9.system.entry.js.map +1 -0
- package/dist/pine-core/p-c6c2433a.entry.js +2 -0
- package/dist/pine-core/p-c6c2433a.entry.js.map +1 -0
- package/dist/pine-core/p-db7adae7.system.entry.js +2 -0
- package/dist/pine-core/p-db7adae7.system.entry.js.map +1 -0
- package/dist/pine-core/p-e30495d0.entry.js +2 -0
- package/dist/pine-core/{p-f78a1d71.system.entry.js.map → p-e30495d0.entry.js.map} +1 -1
- package/dist/pine-core/p-eac002b6.entry.js +2 -0
- package/dist/pine-core/p-eac002b6.entry.js.map +1 -0
- package/dist/pine-core/p-f187ba6d.system.entry.js +2 -0
- package/dist/pine-core/p-f187ba6d.system.entry.js.map +1 -0
- package/dist/pine-core/p-f370e5ef.entry.js +2 -0
- package/dist/pine-core/{p-dd35371b.system.entry.js.map → p-f370e5ef.entry.js.map} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/hydrate/index.js +13 -13
- package/hydrate/index.mjs +13 -13
- package/package.json +2 -2
- package/dist/pine-core/p-048f3c8d.system.entry.js +0 -2
- package/dist/pine-core/p-048f3c8d.system.entry.js.map +0 -1
- package/dist/pine-core/p-098a54a8.system.entry.js +0 -2
- package/dist/pine-core/p-09f5b4d6.entry.js +0 -2
- package/dist/pine-core/p-09f5b4d6.entry.js.map +0 -1
- package/dist/pine-core/p-0e936138.entry.js +0 -2
- package/dist/pine-core/p-0e936138.entry.js.map +0 -1
- package/dist/pine-core/p-153ed714.entry.js +0 -2
- package/dist/pine-core/p-153ed714.entry.js.map +0 -1
- package/dist/pine-core/p-18046e2a.entry.js +0 -2
- package/dist/pine-core/p-18046e2a.entry.js.map +0 -1
- package/dist/pine-core/p-1e56a37b.entry.js +0 -2
- package/dist/pine-core/p-1e56a37b.entry.js.map +0 -1
- package/dist/pine-core/p-426e0f6b.system.entry.js +0 -2
- package/dist/pine-core/p-8e5e243b.entry.js +0 -2
- package/dist/pine-core/p-8e5e243b.entry.js.map +0 -1
- package/dist/pine-core/p-9646b00e.system.entry.js +0 -2
- package/dist/pine-core/p-9646b00e.system.entry.js.map +0 -1
- package/dist/pine-core/p-9ea80c68.entry.js +0 -2
- package/dist/pine-core/p-9ea80c68.entry.js.map +0 -1
- package/dist/pine-core/p-a5e1dff5.entry.js +0 -2
- package/dist/pine-core/p-a5e1dff5.entry.js.map +0 -1
- package/dist/pine-core/p-a6b8b03f.system.entry.js +0 -2
- package/dist/pine-core/p-a6b8b03f.system.entry.js.map +0 -1
- package/dist/pine-core/p-b8bebd20.entry.js +0 -2
- package/dist/pine-core/p-b8bebd20.entry.js.map +0 -1
- package/dist/pine-core/p-bde13ade.entry.js +0 -2
- package/dist/pine-core/p-bde13ade.entry.js.map +0 -1
- package/dist/pine-core/p-c45e649b.system.entry.js +0 -2
- package/dist/pine-core/p-c45e649b.system.entry.js.map +0 -1
- package/dist/pine-core/p-c84cc2f8.system.entry.js +0 -2
- package/dist/pine-core/p-c84cc2f8.system.entry.js.map +0 -1
- package/dist/pine-core/p-c943ba01.entry.js +0 -2
- package/dist/pine-core/p-c943ba01.entry.js.map +0 -1
- package/dist/pine-core/p-cb763cfb.system.entry.js +0 -2
- package/dist/pine-core/p-cb763cfb.system.entry.js.map +0 -1
- package/dist/pine-core/p-dce2f452.system.entry.js +0 -2
- package/dist/pine-core/p-dce2f452.system.entry.js.map +0 -1
- package/dist/pine-core/p-dd35371b.system.entry.js +0 -2
- package/dist/pine-core/p-e379a025.system.entry.js +0 -2
- package/dist/pine-core/p-e379a025.system.entry.js.map +0 -1
- package/dist/pine-core/p-e94ce082.entry.js +0 -2
- package/dist/pine-core/p-e94ce082.entry.js.map +0 -1
- package/dist/pine-core/p-f78a1d71.system.entry.js +0 -2
- package/dist/pine-core/p-fadcba13.entry.js +0 -2
- package/dist/pine-core/p-fadcba13.entry.js.map +0 -1
- package/dist/pine-core/p-fd1d280b.system.entry.js +0 -2
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-b18b20f4.system.js"],(function(e){"use strict";var i,r,t,o,s,n,a,c;return{setters:[function(e){i=e.r;r=e.c;t=e.h;o=e.H;s=e.g},function(e){n=e.m;a=e.P;c=e.a}],execute:function(){var l=':host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 2px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 2px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-grey-900);--color-background-checked-hover:var(--pine-color-grey-900);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-grey-700);--color-outline-focus:var(--pine-color-blue-200);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-grey-900);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--spacing-label-gap-size:var(--pine-spacing-150);--spacing-input-toggle-offset:calc(var(--pine-spacing-050) / 2);--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--spacing-label-gap-size));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--line-height-label);-webkit-margin-start:var(--spacing-label-gap-size);margin-inline-start:var(--spacing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}';var d=l;var h=e("pds_switch",function(){function e(e){var t=this;i(this,e);this.pdsSwitchChange=r(this,"pdsSwitchChange",7);this.onSwitchUpdate=function(e){if(t.disabled)return;t.pdsSwitchChange.emit(e)};this.switchClassNames=function(){var e="pds-switch";if(t.invalid===true){e+=" pds-switch--error"}if(t.helperMessage!==undefined){e+=" pds-switch--message"}return e};this.componentId=undefined;this.checked=false;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=undefined;this.required=false;this.type="checkbox";this.value=undefined}e.prototype.render=function(){return t(o,{key:"5c33e5bd4a42f187450a81faec033832524f1b29",class:this.switchClassNames(),"aria-disabled":this.disabled?"true":null},t("input",{key:"cb2a8287cdb44f337b4ecae15968e823f314b4d1","aria-describedby":c(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,checked:this.checked,class:"pds-switch__input",disabled:this.disabled,id:this.componentId,name:this.name?this.name:this.componentId,onChange:this.onSwitchUpdate,required:this.required,type:this.type,value:this.value}),t(a,{key:"86c700a16a23513b3ba34f2add1775274ecc6784",classNames:"pds-switch__label",htmlFor:this.componentId,text:this.label}),this.helperMessage&&t("div",{key:"30c8b18c990a54330bf3442d9cbbb35387de0ec3",class:"pds-switch__message",id:n(this.componentId,"helper")},this.helperMessage),this.errorMessage&&t("div",{key:"1eb57d78271d8c1fbe2fa680eeb88fd2fd1d35c9",class:"pds-switch__message pds-switch__message--error",id:n(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());h.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-426e0f6b.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as d,H as i}from"./p-0b541f88.js";import{a as r}from"./p-373bf876.js";const o=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-grey-900);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";const n=o;const a=class{constructor(d){e(this,d);this.pdsCopyTextClick=t(this,"pdsCopyTextClick",7);this.copyToClipboard=async e=>{try{if(typeof navigator.clipboard!=="undefined"){await navigator.clipboard.writeText(e);this.pdsCopyTextClick.emit("Copied to clipboard")}}catch(e){this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${e}`)}};this.handleClick=()=>{this.copyToClipboard(this.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}classNames(){const e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join(" ")}render(){return d(i,{key:"9960146a3ac3810bc14834a976f2e50627569dad",class:this.classNames(),id:this.componentId},d("pds-button",{key:"9d8c6dc9824be2483982d4362a5c8d8c4c232432",type:"button",variant:"unstyled",onClick:this.handleClick},d("span",{key:"7c093ec0ae96afdbad02adda3901be87989c9ce4"},this.value),d("pds-icon",{key:"466f5c685e32be0067938869afee751db522d3d3",icon:r,size:"16px"})))}};a.style=n;export{a as pds_copytext};
|
|
2
|
-
//# sourceMappingURL=p-8e5e243b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsCopytextCss","PdsCopytextStyle0","PdsCopytext","this","copyToClipboard","async","value","navigator","clipboard","writeText","pdsCopyTextClick","emit","err","handleClick","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --border-radius-default: var(--pine-border-radius-125);\n --border-radius-hover: var(--pine-border-radius-0);\n\n --border-width-default: var(--pine-border-width-none);\n\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n\n --color-background-default: var(--pine-color-white);\n --color-border-interactive-hover: var(--pine-color-grey-400);\n --color-text-hover: var(--pine-color-grey-900);\n // Update custom prop usage in Button before changing\n --copytext-color-background-hover: var(--pine-color-grey-200);\n\n --font-size-default: var(--pine-font-size-100);\n --font-weight-default: var(--pine-font-weight-semi-bold);\n\n --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n --spacing-bordered-padding-block: var(--pine-spacing-100);\n --spacing-bordered-padding-inline: var(--pine-spacing-200);\n --spacing-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-050);\n --spacing-padding-inline: var(--pine-spacing-100);\n --spacing-padding-none: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n pds-button {\n align-items: center;\n background: var(--color-background-default);\n border: var(--border-width-default);\n border-radius: var(--border-radius-default);\n display: inline-flex;\n font: var(--typography-default);\n max-width: 100%;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n &::part(button):hover {\n // Update custom prop usage in Button before changing\n background-color: var(--copytext-color-background-hover);\n border-radius: var(--border-radius-hover);\n color: var(--color-text-hover);\n }\n\n span {\n margin-inline-end: var(--spacing-margin-inline-end);\n white-space: nowrap;\n }\n\n :nth-child(2) {\n flex-shrink: 0;\n }\n }\n\n // bordered\n\n &:host(.pds-copytext--bordered) {\n border: var(--border-width-default);\n padding: var(--spacing-padding-none);\n\n pds-button {\n padding: var(--spacing-padding-none);\n\n &:hover {\n background: none;\n }\n }\n\n span {\n border: var(--border-interactive-default);\n border-radius: var(--border-radius-default);\n margin-inline-end: var(--spacing-bordered-margin-inline-end);\n padding-block: var(--spacing-bordered-padding-block);\n padding-inline: var(--spacing-bordered-padding-inline);\n }\n\n :hover {\n span {\n border: var(--border-interactive-hover);\n }\n }\n }\n\n // full width\n\n &:host(.pds-copytext--full-width) {\n display: flex;\n width: 100%;\n\n pds-button {\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n span {\n text-align: left;\n width: 100%;\n }\n }\n }\n\n // truncated\n\n &:host(.pds-copytext--truncated) {\n pds-button {\n display: flex;\n width: 100%;\n\n span {\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n width: 100%;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-copytext',\n styleUrl: 'pds-copytext.scss',\n shadow: true,\n})\nexport class PdsCopytext {\n /**\n * Determines whether `copytext` should have a border.\n * @defaultValue true\n */\n @Prop({ reflect: true }) border = true;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether `copytext` should expand to the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth = false;\n\n /**\n * Determines whether the `value` should truncate and display with an ellipsis.\n * @defaultValue false\n */\n @Prop() truncate = false;\n\n /**\n * String that is displayed and that is also copied to the clipboard upon interaction.\n */\n @Prop() value!: string;\n\n /**\n * Event when copyText button is clicked.\n */\n @Event() pdsCopyTextClick: EventEmitter;\n\n private copyToClipboard = async (value: string) => {\n try {\n if (typeof navigator.clipboard !== 'undefined') {\n await navigator.clipboard.writeText(value);\n this.pdsCopyTextClick.emit('Copied to clipboard');\n }\n } catch (err) {\n this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n }\n };\n\n private handleClick = () => {\n this.copyToClipboard(this.value);\n };\n\n private classNames() {\n const classNames = ['pds-copytext'];\n\n if (this.border) {\n classNames.push('pds-copytext--bordered');\n }\n\n if (this.fullWidth) {\n classNames.push('pds-copytext--full-width');\n }\n\n if (this.truncate) {\n classNames.push('pds-copytext--truncated');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n <span>{this.value}</span>\n <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n </pds-button>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,2zGACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAkCdC,KAAAC,gBAAkBC,MAAOC,IAC/B,IACE,UAAWC,UAAUC,YAAc,YAAa,OACxCD,UAAUC,UAAUC,UAAUH,GACpCH,KAAKO,iBAAiBC,KAAK,sB,EAE7B,MAAOC,GACPT,KAAKO,iBAAiBC,KAAK,oCAAoCC,I,GAI3DT,KAAAU,YAAc,KACpBV,KAAKC,gBAAgBD,KAAKG,MAAM,E,YAzCA,K,0CAWd,M,cAMD,M,qBA2BX,UAAAQ,GACN,MAAMA,EAAa,CAAC,gBAEpB,GAAIX,KAAKY,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAIb,KAAKc,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAIb,KAAKe,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOrB,KAAKW,aAAcW,GAAItB,KAAKuB,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAS1B,KAAKU,aACzDQ,EAAA,QAAAE,IAAA,4CAAOpB,KAAKG,OACZe,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,EAAUC,KAAK,U","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js"],(function(a){"use strict";var t,e,i,o,r;return{setters:[function(a){t=a.r;e=a.c;i=a.h;o=a.H;r=a.g}],execute:function(){var n='pds-tab{--border-none:var(--pine-border-width-none);--border-radius-availability:var(--pine-border-radius-100);--border-radius-default:var(--pine-border-radius-125);--border-radius-none:var(--pine-border-radius-0);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-active:var(--pine-color-grey-900);--color-background-availability:var(--pine-color-white);--color-background-default:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-400);--color-text-active:var(--pine-color-grey-900);--color-text-active-inverse:var(--pine-color-white);--color-text-default:var(--pine-color-grey-700);--color-text-focus:var(--pine-color-grey-800);--font-size-availability-content:var(--pine-font-size-085);--font-size-default:var(--pine-font-size-100);--font-size-filter-content:var(--pine-font-size-085);--font-weight-default:var(--pine-font-weight-medium);--line-height-availability-content:var(--pine-line-height-100);--line-height-default:var(--pine-line-height-150);--line-height-filter-content:var(--pine-line-height-125);--outline:4px solid var(--pine-color-blue-200);--spacing-padding-none:var(--pine-spacing-0);display:inline-block;position:relative}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--border-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--spacing-padding-none);-ms-flex-align:center;align-items:center;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--color-text-active)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--color-text-active)}.pds-tab:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-default);font-weight:var(--font-weight-default);line-height:var(--line-height-default);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:currentColor;bottom:0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-availability)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-default)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color-text-default)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-availability-content);line-height:var(--line-height-availability-content);padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--color-background-active)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--color-text-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-active);color:var(--color-text-active-inverse)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-filter-content);line-height:var(--line-height-filter-content);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}';var s=n;var d=a("pds_tab",function(){function a(a){t(this,a);this.pdsTabClick=e(this,"pdsTabClick",7);this.name=undefined;this.parentComponentId=undefined;this.variant=undefined;this.index=undefined;this.selected=false}a.prototype.onTabClick=function(a,t){this.pdsTabClick.emit([a,t])};a.prototype.render=function(){var a=i("span",{key:"5ea7f20d14e906993c0cfbef0ae9a37b305be9fd",class:"pds-tab-edge",role:"presentation"});var t=i("span",{key:"9fc8287a57fd777472d9f909a451332b7edd8c39",class:"pds-tab-edge pds-tab-edge--end",role:"presentation"});return i(o,{key:"16d11c4bda123cbb698674c560dc7c826fe653ca",variant:this.variant,slot:"tabs",index:this.index},i("button",{key:"63e18d48cd1206c87e520cbe85c09e7fbd8752f0",role:"tab",id:this.parentComponentId+"__"+this.name,"aria-controls":this.parentComponentId+"__"+this.name+"-panel",tabindex:this.selected?"0":"-1","aria-selected":this.selected?"true":"false",class:this.selected?"pds-tab is-active":"pds-tab",onClick:this.onTabClick.bind(this,this.index,this.parentComponentId)},this.variant==="availability"&&a,this.variant==="availability"&&t,i("div",{key:"5db0ed6e01b1cfe58f47669b369bb72bd3caa033",class:"pds-tab__content"},i("slot",{key:"1737f4b6a524cf165deb1eb1a2627ae834a76be2"}))))};Object.defineProperty(a.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return a}());d.style=s}}}));
|
|
2
|
-
//# sourceMappingURL=p-9646b00e.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTabCss","PdsTabStyle0","PdsTab","exports","class_1","prototype","onTabClick","index","parentComponentId","this","pdsTabClick","emit","render","availabilityTabEdgeInlineStart","h","key","class","role","availabilityTabEdgeInlineEnd","Host","variant","slot","id","name","tabindex","selected","onClick","bind"],"sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n --border-none: var(--pine-border-width-none);\n\n --border-radius-availability: var(--pine-border-radius-100);\n --border-radius-default: var(--pine-border-radius-125);\n --border-radius-none: var(--pine-border-radius-0);\n\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n\n --color-background-active: var(--pine-color-grey-900);\n --color-background-availability: var(--pine-color-white);\n --color-background-default: var(--pine-color-grey-300);\n --color-background-hover: var(--pine-color-grey-400);\n --color-text-active: var(--pine-color-grey-900);\n --color-text-active-inverse: var(--pine-color-white);\n --color-text-default: var(--pine-color-grey-700);\n --color-text-focus: var(--pine-color-grey-800);\n\n --font-size-availability-content: var(--pine-font-size-085);\n --font-size-default: var(--pine-font-size-100);\n --font-size-filter-content: var(--pine-font-size-085);\n\n --font-weight-default: var(--pine-font-weight-medium);\n\n --line-height-availability-content: var(--pine-line-height-100);\n --line-height-default: var(--pine-line-height-150);\n --line-height-filter-content: var(--pine-line-height-125);\n\n --outline: 4px solid var(--pine-color-blue-200);\n\n --spacing-padding-none: var(--pine-spacing-0);\n\n display: inline-block;\n position: relative;\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n appearance: none;\n background-color: transparent;\n border: var(--border-none);\n box-shadow: none;\n color: inherit;\n cursor: pointer;\n font-family: inherit;\n padding: var(--spacing-padding-none);\n}\n\n.pds-tab {\n @include pds-button-style-reset();\n\n align-items: center;\n color: var(--color-text-default);\n display: inline-flex;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n\n &.is-active,\n &[aria-selected='true'] {\n color: var(--color-text-active);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n }\n\n &:hover {\n color: var(--color-text-active);\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n .pds-tab__content {\n font-family: inherit;\n font-size: var(--font-size-default);\n font-weight: var(--font-weight-default);\n line-height: var(--line-height-default);\n padding-block-end: 11px;\n position: relative;\n\n &::after {\n background-color: currentColor;\n bottom: 0;\n content: '';\n height: 3px;\n left: 0;\n opacity: 0;\n position: absolute;\n right: 0;\n }\n }\n\n .pds-tab-edge {\n display: none;\n }\n}\n\n.pds-tabs--availability {\n --color-background-tab: transparent;\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);\n padding: 8px 16px 13px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--color-background-availability);\n\n .pds-tab__content::after {\n opacity: 1;\n }\n\n .pds-tab-edge {\n z-index: 1;\n }\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--color-background-default);\n }\n\n &:focus-visible {\n color: var(--color-text-default);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-availability-content);\n line-height: var(--line-height-availability-content);\n padding-bottom: 7px;\n }\n\n .pds-tab-edge {\n bottom: 0;\n display: block;\n height: 8px;\n inset-inline-end: 100%;\n overflow: hidden;\n position: absolute;\n width: 8px;\n\n &::before {\n border-radius: 50%;\n bottom: 0;\n box-shadow: 4px 4px 0 0 var(--color-background-tab);\n content: '';\n display: block;\n height: 200%;\n inset-inline-end: 0;\n position: absolute;\n width: 200%;\n }\n }\n\n .pds-tab-edge--end {\n inset-inline-end: unset;\n inset-inline-start: 100%;\n\n &::before {\n box-shadow: -4px 4px 0 0 var(--color-background-tab);\n inset-inline-end: unset;\n inset-inline-start: 0;\n }\n }\n}\n\n.pds-tabs--filter {\n --color-background-tab: var(--color-background-active);\n\n .pds-tab {\n background-color: var(--color-background-tab);\n border-radius: 50px;\n color: var(--color-text-active);\n padding: 6px 15px;\n\n &.is-active,\n &[aria-selected='true'] {\n --color-background-tab: var(--color-background-active);\n color: var(--color-text-active-inverse)\n }\n\n &:hover:not(.is-active, [aria-selected='true']) {\n --color-background-tab: var(--color-background-hover);\n }\n }\n\n .pds-tab__content {\n font-size: var(--font-size-filter-content);\n line-height: var(--line-height-filter-content);\n padding-block-end: 0;\n\n &::after {\n content: unset;\n }\n }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'pds-tab',\n styleUrl: 'pds-tab.scss',\n shadow: false,\n})\nexport class PdsTab {\n @Element() el: HTMLPdsTabElement;\n\n /**\n * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n */\n @Prop() name!: string;\n\n /**\n * Keeps track of the parentComponentId unique id, this property is passed by parent component\n */\n /** @internal */\n @Prop() parentComponentId: string;\n\n /**\n * Keeps track of if the expected tab variant, this property is passed by parent component\n */\n /** @internal */\n @Prop() variant: string;\n\n /**\n * Keeps track of if the tab index number, this property is passed by parent component\n */\n /** @internal */\n @Prop() index: number;\n\n /**\n * Keeps track of the tabpanel selected state, this property is passed by parent component\n */\n /** @internal */\n @Prop() selected = false;\n\n /**\n * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n */\n /** @internal */\n @Event() pdsTabClick: EventEmitter<object>;\n private onTabClick(index, parentComponentId) {\n this.pdsTabClick.emit([index, parentComponentId]);\n }\n\n render() {\n const availabilityTabEdgeInlineStart = (\n <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n )\n\n const availabilityTabEdgeInlineEnd = (\n <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n )\n\n return (\n <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n <button\n role=\"tab\"\n id={this.parentComponentId + \"__\" + this.name}\n aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n tabindex={this.selected ? \"0\" : \"-1\"}\n aria-selected={this.selected ? \"true\" : \"false\"}\n class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n >\n {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n <div class=\"pds-tab__content\"><slot/></div>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"kKAAA,IAAMA,EAAY,uzJAClB,IAAAC,EAAeD,E,ICMFE,EAAMC,EAAA,qB,gLA8BE,K,CAOXC,EAAAC,UAAAC,WAAA,SAAWC,EAAOC,GACxBC,KAAKC,YAAYC,KAAK,CAACJ,EAAOC,G,EAGhCJ,EAAAC,UAAAO,OAAA,WACE,IAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,iBAGlC,IAAMC,EACJJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,iCAAiCC,KAAK,iBAGpD,OACEH,EAACK,EAAI,CAAAJ,IAAA,2CAACK,QAASX,KAAKW,QAASC,KAAK,OAAOd,MAAOE,KAAKF,OACnDO,EAAA,UAAAC,IAAA,2CACEE,KAAK,MACLK,GAAIb,KAAKD,kBAAoB,KAAOC,KAAKc,KAAI,gBAC9Bd,KAAKD,kBAAoB,KAAOC,KAAKc,KAAO,SAC3DC,SAAUf,KAAKgB,SAAW,IAAM,KAAI,gBACrBhB,KAAKgB,SAAW,OAAS,QACxCT,MAAOP,KAAKgB,SAAW,oBAAsB,UAC7CC,QAASjB,KAAKH,WAAWqB,KAAKlB,KAAMA,KAAKF,MAAOE,KAAKD,oBAEpDC,KAAKW,UAAY,gBAAkBP,EACnCJ,KAAKW,UAAY,gBAAkBF,EACpCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAmBF,EAAA,QAAAC,IAAA,+C,uHA/DrB,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as a,H as o}from"./p-0b541f88.js";import{c as e,u as s}from"./p-373bf876.js";const i=":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";const t=i;const n=class{constructor(o){r(this,o);this.renderAssetWrapper=()=>{const r={height:this.avatarSize(),width:this.avatarSize()};return a("div",{style:r,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())};this.renderAvatar=()=>this.dropdown?a("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},this.renderAssetWrapper()):this.renderAssetWrapper();this.renderBadge=()=>this.badge&&a("pds-icon",{class:"pds-avatar__badge",icon:e,size:"33.53%"});this.renderIconOrImage=()=>this.image?a("img",{alt:this.alt,src:this.image}):a("pds-icon",{color:"var(--pine-color-blue-400)",icon:s,size:"33.53%"});this.classNames=()=>({"pds-avatar":true,[`pds-avatar--has-image`]:this.image!==""&&this.image!==null,[`pds-avatar--${this.variant}`]:this.variant==="admin"});this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}avatarSize(){const r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}}render(){return a(o,{key:"8c43a9de8b7799b5aafff0c12c2e95e53bed2041",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}};n.style=t;export{n as pds_avatar};
|
|
2
|
-
//# sourceMappingURL=p-9ea80c68.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","this","renderAssetWrapper","style","height","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","variant","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-blue-100);\n --color-background-badge: var(--pine-color-white);\n --color-border-badge: var(--pine-color-white);\n\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-radius-round: var(--pine-border-radius-round);\n --border-radius-none: var(--pine-border-radius-0);\n\n --spacing-none: var(--pine-spacing-0);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-spacing-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n --border-radius-round: var(--pine-border-radius-round);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--border-radius-none);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n display: flex;\n padding: var(--spacing-none);\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--color-background-badge);\n border: var(--border-default);\n border-color: var(--color-border-badge);\n border-radius: var(--border-radius-round);\n bottom: var(--spacing-none);\n position: absolute;\n right: var(--spacing-none);\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrl: 'pds-avatar.scss',\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => (\n this.image\n ? <img alt={this.alt} src={this.image} />\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n );\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"mappings":"wFAAA,MAAMA,EAAe,yzDACrB,MAAAC,EAAeD,E,MCUFE,EAAS,M,yBAiEZC,KAAAC,mBAAqB,KAC3B,MAAMC,EAAQ,CACZC,OAAQH,KAAKI,aACbC,MAAOL,KAAKI,cAGd,OACEE,EAAA,OAAKJ,MAAOA,EAAOK,KAAK,iBACrBP,KAAKQ,oBACLR,KAAKS,cACF,EAIFT,KAAAU,aAAe,IAEnBV,KAAKW,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,SAAQ,aAAY,2BAC3Db,KAAKC,sBAGND,KAAKC,qBAIHD,KAAAS,YAAc,IACpBT,KAAKc,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,EAAmBC,KAAK,WAGjEjB,KAAAQ,kBAAoB,IAC1BR,KAAKkB,MACDZ,EAAA,OAAKa,IAAKnB,KAAKmB,IAAKC,IAAKpB,KAAKkB,QAI9BZ,EAAA,YAAUe,MAAM,6BAA6BN,KAAMO,EAAYL,KAAK,WAGlEjB,KAAAuB,WAAa,MAEjB,aAAc,KACd,CAAC,yBAA0BvB,KAAKkB,QAAU,IAAMlB,KAAKkB,QAAU,KAC/D,CAAC,eAAelB,KAAKwB,WAAYxB,KAAKwB,UAAY,U,SA1GxB,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElD,UAAApB,GACN,MAAMqB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAMzB,KAAKiB,MAAO,CACpB,OAAOQ,EAAMzB,KAAKiB,K,KACb,CACL,OAAOjB,KAAKiB,I,EAuDhB,MAAAc,GAEE,OACEzB,EAAC0B,EAAI,CAAAC,IAAA,2CACHC,GAAIlC,KAAKmC,YACTvB,MAAKwB,OAAAC,OAAA,GAAMrC,KAAKuB,eAEfvB,KAAKU,e","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as a,H as i,g as o}from"./p-0b541f88.js";import{i as l,P as s,a as t,m as d}from"./p-e60fccc0.js";const n=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-grey-900);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-grey-700);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-blue-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-grey-700);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";const c=n;const h=class{constructor(a){e(this,a);this.pdsTextareaChange=r(this,"pdsTextareaChange",7);this.onTextareaChange=e=>{const r=e.target;l(r,this);if(r){this.value=r.innerHTML}this.pdsTextareaChange.emit({value:this.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}textareaClassNames(){const e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join(" ")}render(){return a(i,{key:"f58ccd5b20fc30c6e6153e04e98b27fe265040af","aria-disabled":this.disabled?"true":null},a("div",{key:"480b51012d0f7a05d83fb8cb359d2bc3a4e82189",class:"pds-textarea"},this.label&&a(s,{key:"0b34ee6ee8eec6891c00596f840d028ab6ac36bb",htmlFor:this.componentId,text:this.label}),a("textarea",{key:"6f066ce38aaec3257bddd69715118aa5740723c1","aria-describedby":t(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&a("p",{key:"91c66558978cdbb3191c0af31c34c2647749c01a",class:"pds-textarea__helper-message",id:d(this.componentId,"helper")},this.helperMessage),this.invalid&&a("p",{key:"da8320d10ace733c7181ab3c6827da99d94d7ebd","aria-live":"assertive",class:"pds-textarea__error-message",id:d(this.componentId,"error")},this.errorMessage)))}get el(){return o(this)}};h.style=c;export{h as pds_textarea};
|
|
2
|
-
//# sourceMappingURL=p-a5e1dff5.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","value","innerHTML","pdsTextareaChange","emit","event","componentId","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n --color: var(--pine-color-grey-900);\n --color-background: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-200);\n --color-border-default: var(--pine-color-grey-400);\n --color-border-error: var(--pine-color-red-300);\n --color-border-focus-visible: var(--pine-color-grey-300);\n --color-border-hover: var(--pine-color-grey-500);\n --color-disabled-default: var(--pine-color-grey-700);\n --color-error-default: var(--pine-color-red-300);\n --color-focus-visible-outline: var(--pine-color-blue-200);\n --color-focus-visible-outline-error: var(--pine-color-red-200);\n --color-placeholder-default: var(--pine-color-grey-700);\n\n --font-size-field: var(--pine-font-size-100);\n --font-size-helper-message: var(--pine-font-size-100);\n --font-size-label: var(--pine-font-size-100);\n --font-weight-field: var(--pine-font-weight-normal);\n --font-weight-helper-message: var(--pine-font-weight-normal);\n --font-weight-label: var(--pine-font-weight-medium);\n\n --line-height-field: var(--pine-line-height-150);\n --line-height-helper-message: var(--pine-line-height-125);\n --line-height-label: var(--pine-line-height-150);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-size: var(--font-size-label);\n font-weight: var(--font-weight-label);\n line-height: var(--line-height-label);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background);\n border: var(--pine-border-interactive-default);\n border-radius: var(--pine-border-radius-md);\n font-family: inherit;\n font-size: var(--font-size-field);\n font-weight: var(--font-weight-field);\n line-height: var(--line-height-field);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border-color: var(--color-border-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-disabled-default);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &::placeholder {\n color: var(--color-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font-size: var(--font-size-helper-message);\n font-weight: var(--font-weight-helper-message);\n line-height: var(--line-height-helper-message);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-textarea',\n styleUrl: 'pds-textarea.scss',\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the textarea is disabled\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * Specifies the error text and provides an error-themed treatment to the field\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a hint or description of the textarea\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the textarea is invalid or throws an error\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the textarea is readonly\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Indicates whether or not the textarea is required\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea\n */\n @Prop() rows?: number;\n\n /**\n * The value of the textarea\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Event emitted whenever the value of the textarea changes\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n private onTextareaChange = (ev: Event) => {\n const textarea = ev.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n if (textarea) {\n this.value = textarea.innerHTML;\n }\n\n this.pdsTextareaChange.emit({value: this.value, event: ev});\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n }\n <textarea\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onChange={this.onTextareaChange}\n >{this.value}</textarea>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yHAAA,MAAMA,EAAiB,qhHACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,8EAwEdC,KAAAC,iBAAoBC,IAC1B,MAAMC,EAAWD,EAAGE,OACpBC,EAAWF,EAAUH,MAErB,GAAIG,EAAU,CACZH,KAAKM,MAAQH,EAASI,S,CAGxBP,KAAKQ,kBAAkBC,KAAK,CAACH,MAAON,KAAKM,MAAOI,MAAOR,GAAI,E,yCApE1C,M,sEAgBc,M,+BAUVF,KAAKW,Y,yCAWT,M,cAMA,M,yCA4BX,kBAAAC,GACN,MAAMC,EAAa,CAAC,uBAEpB,GAAIb,KAAKc,SAAWd,KAAKc,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYpB,KAAKqB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRtB,KAAKuB,OACJL,EAACM,EAAQ,CAAAJ,IAAA,2CAACK,QAASzB,KAAKW,YAAae,KAAM1B,KAAKuB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,EAAkB3B,KAAKW,YAAaX,KAAKc,QAASd,KAAK4B,eAAc,eACzE5B,KAAKc,QAAU,OAASe,UACtCP,MAAOtB,KAAKY,qBACZS,SAAUrB,KAAKqB,SACfS,GAAI9B,KAAKW,YACToB,KAAM/B,KAAK+B,KACXC,YAAahC,KAAKgC,YAClBC,SAAUjC,KAAKkC,SACfC,SAAUnC,KAAKmC,SACfC,KAAMpC,KAAKoC,KACXC,SAAUrC,KAAKC,kBACfD,KAAKM,OACNN,KAAK4B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,WAE/BX,KAAK4B,eAGT5B,KAAKc,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,EAAUtC,KAAKW,YAAa,UAE/BX,KAAKuC,e","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function d(e){try{s(r.next(e))}catch(e){o(e)}}function a(e){try{s(r["throw"](e))}catch(e){o(e)}}function s(e){e.done?n(e.value):i(e.value).then(d,a)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,d;return d={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(d[Symbol.iterator]=function(){return this}),d;function a(e){return function(t){return s([e,t])}}function s(a){if(r)throw new TypeError("Generator is already executing.");while(d&&(d=0,a[0]&&(n=0)),n)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-f74c489d.system.js","./p-16b74124.system.js"],(function(e){"use strict";var t,n,r,i,o;return{setters:[function(e){t=e.r;n=e.c;r=e.h;i=e.H},function(e){o=e.a}],execute:function(){var d=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-125);--border-radius-hover:var(--pine-border-radius-0);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-grey-900);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-semi-bold);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);border-radius:var(--border-radius-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var a=d;var s=e("pds_copytext",function(){function e(e){var r=this;t(this,e);this.pdsCopyTextClick=n(this,"pdsCopyTextClick",7);this.copyToClipboard=function(e){return __awaiter(r,void 0,void 0,(function(){var t;return __generator(this,(function(n){switch(n.label){case 0:n.trys.push([0,3,,4]);if(!(typeof navigator.clipboard!=="undefined"))return[3,2];return[4,navigator.clipboard.writeText(e)];case 1:n.sent();this.pdsCopyTextClick.emit("Copied to clipboard");n.label=2;case 2:return[3,4];case 3:t=n.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(t));return[3,4];case 4:return[2]}}))}))};this.handleClick=function(){r.copyToClipboard(r.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}e.prototype.classNames=function(){var e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join(" ")};e.prototype.render=function(){return r(i,{key:"9960146a3ac3810bc14834a976f2e50627569dad",class:this.classNames(),id:this.componentId},r("pds-button",{key:"9d8c6dc9824be2483982d4362a5c8d8c4c232432",type:"button",variant:"unstyled",onClick:this.handleClick},r("span",{key:"7c093ec0ae96afdbad02adda3901be87989c9ce4"},this.value),r("pds-icon",{key:"466f5c685e32be0067938869afee751db522d3d3",icon:o,size:"16px"})))};return e}());s.style=a}}}));
|
|
2
|
-
//# sourceMappingURL=p-a6b8b03f.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsCopytextCss","PdsCopytextStyle0","PdsCopytext","exports","this","copyToClipboard","value","__awaiter","_this","navigator","clipboard","writeText","_a","sent","pdsCopyTextClick","emit","concat","err_1","handleClick","class_1","prototype","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n --border-radius-default: var(--pine-border-radius-125);\n --border-radius-hover: var(--pine-border-radius-0);\n\n --border-width-default: var(--pine-border-width-none);\n\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n\n --color-background-default: var(--pine-color-white);\n --color-border-interactive-hover: var(--pine-color-grey-400);\n --color-text-hover: var(--pine-color-grey-900);\n // Update custom prop usage in Button before changing\n --copytext-color-background-hover: var(--pine-color-grey-200);\n\n --font-size-default: var(--pine-font-size-100);\n --font-weight-default: var(--pine-font-weight-semi-bold);\n\n --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n --spacing-bordered-padding-block: var(--pine-spacing-100);\n --spacing-bordered-padding-inline: var(--pine-spacing-200);\n --spacing-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-050);\n --spacing-padding-inline: var(--pine-spacing-100);\n --spacing-padding-none: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n pds-button {\n align-items: center;\n background: var(--color-background-default);\n border: var(--border-width-default);\n border-radius: var(--border-radius-default);\n display: inline-flex;\n font: var(--typography-default);\n max-width: 100%;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n &::part(button):hover {\n // Update custom prop usage in Button before changing\n background-color: var(--copytext-color-background-hover);\n border-radius: var(--border-radius-hover);\n color: var(--color-text-hover);\n }\n\n span {\n margin-inline-end: var(--spacing-margin-inline-end);\n white-space: nowrap;\n }\n\n :nth-child(2) {\n flex-shrink: 0;\n }\n }\n\n // bordered\n\n &:host(.pds-copytext--bordered) {\n border: var(--border-width-default);\n padding: var(--spacing-padding-none);\n\n pds-button {\n padding: var(--spacing-padding-none);\n\n &:hover {\n background: none;\n }\n }\n\n span {\n border: var(--border-interactive-default);\n border-radius: var(--border-radius-default);\n margin-inline-end: var(--spacing-bordered-margin-inline-end);\n padding-block: var(--spacing-bordered-padding-block);\n padding-inline: var(--spacing-bordered-padding-inline);\n }\n\n :hover {\n span {\n border: var(--border-interactive-hover);\n }\n }\n }\n\n // full width\n\n &:host(.pds-copytext--full-width) {\n display: flex;\n width: 100%;\n\n pds-button {\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n span {\n text-align: left;\n width: 100%;\n }\n }\n }\n\n // truncated\n\n &:host(.pds-copytext--truncated) {\n pds-button {\n display: flex;\n width: 100%;\n\n span {\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n width: 100%;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-copytext',\n styleUrl: 'pds-copytext.scss',\n shadow: true,\n})\nexport class PdsCopytext {\n /**\n * Determines whether `copytext` should have a border.\n * @defaultValue true\n */\n @Prop({ reflect: true }) border = true;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether `copytext` should expand to the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth = false;\n\n /**\n * Determines whether the `value` should truncate and display with an ellipsis.\n * @defaultValue false\n */\n @Prop() truncate = false;\n\n /**\n * String that is displayed and that is also copied to the clipboard upon interaction.\n */\n @Prop() value!: string;\n\n /**\n * Event when copyText button is clicked.\n */\n @Event() pdsCopyTextClick: EventEmitter;\n\n private copyToClipboard = async (value: string) => {\n try {\n if (typeof navigator.clipboard !== 'undefined') {\n await navigator.clipboard.writeText(value);\n this.pdsCopyTextClick.emit('Copied to clipboard');\n }\n } catch (err) {\n this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n }\n };\n\n private handleClick = () => {\n this.copyToClipboard(this.value);\n };\n\n private classNames() {\n const classNames = ['pds-copytext'];\n\n if (this.border) {\n classNames.push('pds-copytext--bordered');\n }\n\n if (this.fullWidth) {\n classNames.push('pds-copytext--full-width');\n }\n\n if (this.truncate) {\n classNames.push('pds-copytext--truncated');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n <span>{this.value}</span>\n <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n </pds-button>\n </Host>\n );\n }\n}\n"],"mappings":"spDAAA,IAAMA,EAAiB,2zGACvB,IAAAC,EAAeD,E,ICQFE,EAAWC,EAAA,0B,sFAkCdC,KAAAC,gBAAkB,SAAOC,GAAa,OAAAC,UAAAC,OAAA,qB,oGAE/BC,UAAUC,YAAc,aAA/B,YACF,SAAMD,UAAUC,UAAUC,UAAUL,I,OAApCM,EAAAC,OACAT,KAAKU,iBAAiBC,KAAK,uB,+CAG7BX,KAAKU,iBAAiBC,KAAK,oCAAAC,OAAoCC,I,qCAI3Db,KAAAc,YAAc,WACpBV,EAAKH,gBAAgBG,EAAKF,M,cAzCM,K,0CAWd,M,cAMD,M,qBA2BXa,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,gBAEpB,GAAIjB,KAAKkB,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAInB,KAAKoB,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAInB,KAAKqB,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,EAGzBP,EAAAC,UAAAO,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO3B,KAAKiB,aAAcW,GAAI5B,KAAK6B,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAShC,KAAKc,aACzDU,EAAA,QAAAE,IAAA,4CAAO1B,KAAKE,OACZsB,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,EAAUC,KAAK,U,WAxEjB,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,h as s}from"./p-0b541f88.js";import{l as n}from"./p-373bf876.js";const e=":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-grey-900);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-085);--font-size-xs:var(--pine-font-size-085);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";const t=e;const o=class{constructor(s){i(this,s);this.componentId=undefined;this.external=false;this.variant="inline";this.fontSize="lg";this.href=undefined}classNames(){const i=["pds-link"];if(this.fontSize){i.push("pds-link--"+this.fontSize)}if(this.variant){i.push("pds-link--"+this.variant)}return i.join(" ")}render(){return s("a",{key:"de51c27a4c7e3ab6f105f40b683f7c8d1561049c",class:this.classNames(),href:this.href,id:this.componentId,target:this.external?"_blank":undefined,part:"link"},s("slot",{key:"3c4fbcff6544a604d81dd4388a504a902d6ee130"},this.href),this.external&&s("pds-icon",{key:"fd1acc513efd16134c062ad3845d44be20a911cf",icon:n,size:this.fontSize}))}};o.style=t;export{o as pds_link};
|
|
2
|
-
//# sourceMappingURL=p-b8bebd20.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsLinkCss","PdsLinkStyle0","PdsLink","classNames","this","fontSize","push","variant","join","render","h","key","class","href","id","componentId","target","external","undefined","part","icon","launch","size"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n\n --border-outline: 4px solid var(--pine-color-blue-200);\n --border-radius: var(--pine-border-radius-075);\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n --color-text-default: var(--pine-color-grey-900);\n\n --font-size: var(--pine-font-size-100);\n --font-size-sm: var(--pine-font-size-085);\n --font-size-xs: var(--pine-font-size-085);\n --font-weight: var(--pine-font-weight-medium);\n\n --spacing-inline-start-margin: var(--pine-spacing-050);\n --sizing-svg-lg: 15px;\n --sizing-svg-md: 13px;\n --sizing-svg-sm: 11px;\n\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--spacing-inline-start-margin);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--color-text);\n display: inline-flex;\n font-weight: inherit;\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--font-size-xs);\n\n pds-icon {\n height: var(--sizing-svg-sm);\n width: var(--sizing-svg-sm);\n }\n}\n\n.pds-link--md {\n font-size: var(--font-size-sm);\n\n pds-icon {\n height: var(--sizing-svg-md);\n width: var(--sizing-svg-md);\n }\n}\n\n.pds-link--lg {\n font-size: var(--font-size);\n\n pds-icon {\n height: var(--sizing-svg-lg);\n width: var(--sizing-svg-lg);\n }\n}\n\n.pds-link--plain {\n font-weight: var(--font-weight);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n// Default = inline link\n.pds-link--default {\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n tag: 'pds-link',\n styleUrl: 'pds-link.scss',\n shadow: true,\n})\nexport class PdsLink {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * When enabled, opens link in a new tab.\n * @defaultValue false\n */\n @Prop() external = false;\n\n /**\n *\n * Modifies the look of the link\n */\n @Prop() variant: 'inline' | 'plain' = 'inline';\n\n /**\n *\n * The Font size follows t-shirt model\n * sm: 12px\n * md: 14px\n * lg: 16px\n * @defaultValue lg\n */\n @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n /**\n * The URL that the hyperlink points to.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n target={this.external ? '_blank' : undefined}\n part=\"link\"\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAa,+7CACnB,MAAAC,EAAeD,E,MCYFE,EAAO,M,kEAUC,M,aAMmB,S,cAUC,K,oBAO/B,UAAAC,GACN,MAAMA,EAAa,CAAC,YAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,aAAeF,KAAKC,S,CAGtC,GAAID,KAAKG,QAAS,CAChBJ,EAAWG,KAAK,aAAeF,KAAKG,Q,CAGtC,OAAOJ,EAAWK,KAAK,I,CAGzB,MAAAC,GAEE,OACEC,EAAA,KAAAC,IAAA,2CACEC,MAAOR,KAAKD,aACZU,KAAMT,KAAKS,KACXC,GAAIV,KAAKW,YACTC,OAAQZ,KAAKa,SAAW,SAAWC,UACnCC,KAAK,QAELT,EAAA,QAAAC,IAAA,4CAAOP,KAAKS,MACXT,KAAKa,UACJP,EAAA,YAAAC,IAAA,2CAAUS,KAAMC,EAAQC,KAAMlB,KAAKC,W","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,h as e,H as i}from"./p-0b541f88.js";import{d as r}from"./p-373bf876.js";const n=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-150);--color-text-default:var(--pine-color-grey-700);--color-text-active:var(--pine-color-grey-950);--color-text-hover:var(--pine-color-grey-800);--font-weight-active:var(--pine-font-weight-semi-bold);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-details-padding-block-end:calc(var(--pine-spacing-200) + 2);--spacing-summary-padding-block:calc(var(--pine-spacing-150) / 2);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);border-radius:var(--border-radius-default)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--color-background-default)}details[open] summary{color:var(--color-text-active);font-weight:var(--font-weight-active)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--color-background-default);border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:var(--spacing-details-padding-block-end);padding-block-end:var(--spacing-details-padding-block-end);padding-inline:var(--spacing-details-padding-inline)}";const o=n;const d=class{constructor(e){a(this,e);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return e(i,{key:"7789d456b8a8415a7860754f374c5dad138216b8",class:"pds-accordion",id:this.componentId},e("details",Object.assign({key:"e81776ae675f74cd5584c668d717ba0ca91c314c"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),e("summary",{key:"ae8e7ed87ec55bcb51dfe44ed648f9cd0f416aa9"},e("slot",{key:"0840b76aa1e6d84f0b0bec40e37a26f243a4bbe3",name:"label"},"Details"),e("pds-icon",{key:"b41cb7c07dfb4a73f97d5a2bd5ec86316d5148f8",icon:r})),e("div",{key:"ed5c79c4930d94105343f0512ab9059ff30b7365",part:"accordion-body",class:"pds-accordion__body"},e("slot",{key:"9f1c522f1343b19b482a24c2ad063c8ec0e2457b"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};d.style=o;export{d as pds_accordion};
|
|
2
|
-
//# sourceMappingURL=p-bde13ade.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","part"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --border-radius-default: var(--pine-border-radius-100);\n\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n --color-background-default: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-150);\n --color-text-default: var(--pine-color-grey-700);\n --color-text-active: var(--pine-color-grey-950);\n --color-text-hover: var(--pine-color-grey-800);\n\n --font-weight-active: var(--pine-font-weight-semi-bold);\n\n --number-animation-transform-timing: 200ms;\n\n --spacing-details-padding-inline: var(--pine-spacing-150);\n --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px\n --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px\n --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);\n\n border-radius: var(--border-radius-default);\n\n pds-icon {\n transform: scaleY(1);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-background-default);\n\n summary {\n color: var(--color-text-active);\n font-weight: var(--font-weight-active);\n\n pds-icon {\n transform: scaleY(-1);\n }\n }\n}\n\nsummary {\n background-color: var(--color-background-default);\n border-radius: var(--border-radius-default);\n color: var(--color-text-default);\n font: var(--typography-default);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-text-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n padding-block-end: var(--spacing-details-padding-block-end);\n padding-inline: var(--spacing-details-padding-inline);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true,\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n };\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n };\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={downSmall} />\n </summary>\n <div part=\"accordion-body\" class=\"pds-accordion__body\">\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,4yEACxB,MAAAC,EAAeD,E,MCYFE,EAAY,M,yBAwBfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCAfU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,C,CAchB,gBAAAC,GACER,KAAKG,UAAUM,iBAAiB,SAAUT,KAAKC,a,CAGjD,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIf,KAAKgB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAab,KAAKK,mBAAkB,CAAEc,IAAMC,GAAQpB,KAAKG,UAAYiB,IACnET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,KAElBZ,EAAA,OAAAE,IAAA,2CAAKW,KAAK,iBAAiBV,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-16b74124.system.js"],(function(r){"use strict";var o,e,a,n,c;return{setters:[function(r){o=r.r;e=r.h;a=r.H;n=r.g},function(r){c=r.b}],execute:function(){var t=function(r){return!!r.shadowRoot&&!!r.attachShadow};var d=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-600);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-900);--color-text-secondary-disabled:var(--pine-color-grey-600);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-blue-300);--color-background-accent-disabled:var(--pine-color-blue-100);--color-background-accent-hover:var(--pine-color-blue-400);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-blue-200);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";var i=d;var l=r("pds_button",function(){function r(r){var e=this;o(this,r);this.handleClick=function(r){if(e.type!="button"){if(t(e.el)){var o=e.el.closest("form");if(o){r.preventDefault();var a=document.createElement("button");a.type=e.type;a.style.display="none";o.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")};r.prototype.render=function(){return e(a,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},e("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&e("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),e("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&e("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:c,part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return r}());l.style=i}}}));
|
|
2
|
-
//# sourceMappingURL=p-c45e649b.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","exports","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","class_1","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-grey-900);\n --color-background-primary-disabled: var(--pine-color-grey-300);\n --color-background-primary-hover: var(--pine-color-grey-950);\n --color-text-primary-default: var(--pine-color-white);\n --color-text-primary-disabled: var(--pine-color-grey-600);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-grey-900);\n --color-text-secondary-disabled: var(--pine-color-grey-600);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-blue-300);\n --color-background-accent-disabled: var(--pine-color-blue-100);\n --color-background-accent-hover: var(--pine-color-blue-400);\n --color-text-accent-default: var(--pine-color-white);\n --color-text-accent-disabled: var(--pine-color-blue-200);\n --color-outline-accent: var(--pine-color-blue-200);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-red-300);\n --color-background-destructive-disabled: var(--pine-color-red-100);\n --color-background-destructive-hover: var(--pine-color-red-400);\n --color-text-destructive-default: var(--pine-color-white);\n --color-text-destructive-disabled: var(--pine-color-red-200);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrl: 'pds-button.scss',\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"wMAIO,IAAMA,EAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,EAAe,47KACrB,IAAAC,EAAeD,E,ICeFE,EAASC,EAAA,wB,mCAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIZ,EAAaW,EAAKV,IAAK,CACzB,IAAMY,EAAOF,EAAKV,GAAGa,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIlB,KAAKmB,QAAS,CAChBD,EAAWE,KAAK,eAAiBpB,KAAKmB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBL,EAAAC,UAAAK,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYzB,KAAK0B,SAAW,OAAS,KACxCC,GAAI3B,KAAK4B,YACTC,QAAS7B,KAAKC,YACdkB,QAASnB,KAAKmB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO9B,KAAKkB,aACZQ,SAAU1B,KAAK0B,SACfK,KAAM/B,KAAK+B,KACXC,KAAK,SACL5B,KAAMJ,KAAKI,KACX6B,MAAOjC,KAAKiC,OAEXjC,KAAKkC,MAAQlC,KAAKmB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM/B,KAAKkC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCzB,KAAKmB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W,uHAvFtD,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,r,e,n){function o(t){return t instanceof e?t:new e((function(r){r(t)}))}return new(e||(e=Promise))((function(e,i){function a(t){try{u(n.next(t))}catch(t){i(t)}}function c(t){try{u(n["throw"](t))}catch(t){i(t)}}function u(t){t.done?e(t.value):o(t.value).then(a,c)}u((n=n.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,o,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(r){return u([t,r])}}function u(c){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(e=0)),e)try{if(n=1,o&&(i=c[0]&2?o["return"]:c[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,c[1])).done)return i;if(o=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;o=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){e.label=c[1];break}if(c[0]===6&&e.label<i[1]){e.label=i[1];i=c;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(c);break}if(i[2])e.ops.pop();e.trys.pop();continue}c=r.call(t,e)}catch(t){c=[6,t];o=0}finally{n=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-f74c489d.system.js"],(function(t){"use strict";var r,e,n,o,i;return{setters:[function(t){r=t.r;e=t.c;n=t.h;o=t.H;i=t.g}],execute:function(){var a=":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";var c=a;var u=t("pds_table",function(){function t(t){r(this,t);this.pdsTableSelect=e(this,"pdsTableSelect",7);this.pdsTableSelectAll=e(this,"pdsTableSelectAll",7);this.compact=undefined;this.componentId=undefined;this.responsive=undefined;this.fixedColumn=undefined;this.selectable=undefined;this.sortingColumn=null;this.sortingDirection="asc"}t.prototype.componentWillLoad=function(){this.sortingColumn=null};t.prototype.classNames=function(){var t=["pds-table"];if(this.compact){t.push("is-compact")}if(this.responsive){t.push("is-responsive")}return t.join(" ")};t.prototype.sortTable=function(t,r){var e=this.el.querySelector("pds-table-body");var n=Array.from(e.querySelectorAll("pds-table-row"));var o=Array.from(this.el.querySelectorAll("pds-table-head-cell[sortable]"));var i=o.find((function(r){return r.innerText.trim()===t}));if(!i){console.warn('Column "'.concat(t,'" not found.'));return}var a=o.indexOf(i);n.sort((function(t,e){var n=t.querySelector("pds-table-cell:nth-child(".concat(a+1,")")).textContent.trim();var o=e.querySelector("pds-table-cell:nth-child(".concat(a+1,")")).textContent.trim();if(r==="asc"){return n.localeCompare(o)}else{return o.localeCompare(n)}}));e.innerHTML="";n.forEach((function(t){e.appendChild(t)}))};t.prototype.handleTableSort=function(t){var r=t.detail.direction;this.sortTable(t.detail.column,r);this.sortingColumn=t.detail.column;this.sortingDirection=r};t.prototype.handleTableSelectAll=function(t){if(t.defaultPrevented)return;var r=this.el.querySelector("pds-table-body");var e=Array.from(r.querySelectorAll("pds-table-row"));e.forEach((function(r){r.isSelected=t.detail.isSelected}))};t.prototype.handleTableSelect=function(t){return __awaiter(this,void 0,void 0,(function(){var r,e,n,o,i;return __generator(this,(function(a){if(t.defaultPrevented)return[2];r=this.el.querySelectorAll("pds-table-row");e=Array.from(r).every((function(t){return t.isSelected}));n=Array.from(r).every((function(t){return!t.isSelected}));o=this.el.querySelector("pds-table-head");if(!o)return[2];i=o.shadowRoot.querySelector("pds-checkbox");i.checked=e;i.indeterminate=!e&&!n;return[2]}))}))};t.prototype.render=function(){return n(o,{key:"95cc4db296681faa0fc046c9b1d6807d640b7730",class:this.classNames(),id:this.componentId,role:"grid",selectable:this.selectable,tabindex:"0"},n("slot",{key:"ecc9bc0761409d5a2819a05d72290c294e27454f"}))};Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());u.style=c}}}));
|
|
2
|
-
//# sourceMappingURL=p-c84cc2f8.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsTableCss","PdsTableStyle0","PdsTable","exports","class_1","prototype","componentWillLoad","this","sortingColumn","classNames","compact","push","responsive","join","sortTable","column","direction","tableBody","el","querySelector","tableRows","Array","from","querySelectorAll","columnHeaderCells","columnHeaderCell","find","cell","innerText","trim","console","warn","concat","columnIndex","indexOf","sort","a","b","valueA","textContent","valueB","localeCompare","innerHTML","forEach","row","appendChild","handleTableSort","event","detail","sortingDirection","handleTableSelectAll","defaultPrevented","pdsTableBody","isSelected","handleTableSelect","allTableRows","allSelectedRows","every","noneSelectedRows","pdsTableHead","headerCheckbox","shadowRoot","checked","indeterminate","render","h","Host","key","class","id","componentId","role","selectable","tabindex"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n --color-background-default: var(--pine-color-white);\n\n background: var(--color-background-default);\n border-collapse: separate;\n box-sizing: border-box;\n display: table;\n width: 100%;\n}\n\n:host(:focus-visible) {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n}\n\n:host(.is-responsive) {\n background-attachment: local, local, scroll, scroll;\n background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n background-position: left center, right center, left center, right center;\n background-repeat: no-repeat;\n background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n display: block;\n margin: 0 auto;\n max-width: fit-content;\n overflow-x: auto;\n white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pds-table',\n styleUrl: 'pds-table.scss',\n shadow: true,\n})\nexport class PdsTable {\n @Element() el: HTMLPdsTableElement;\n\n /**\n * Determines if table displays compact which reduces the spacing of table cells.\n */\n @Prop() compact: boolean;\n\n /**\n * A unique identifier used for the table `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Enables the table to be responsive by horizontally scrolling on smaller screens.\n */\n @Prop() responsive: boolean;\n\n /**\n * Determines if table displays fixed column which fixes the first column of the table.\n */\n @Prop() fixedColumn: boolean;\n\n /**\n * Determines if table displays checkboxes for selectable rows.\n */\n @Prop() selectable: boolean;\n\n @State() sortingColumn: string | null = null;\n @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n /**\n * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n */\n @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n /**\n * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n */\n @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n componentWillLoad() {\n this.sortingColumn = null;\n }\n\n private classNames() {\n const classNames = ['pds-table'];\n\n if (this.compact) {\n classNames.push('is-compact');\n }\n\n if (this.responsive) {\n classNames.push('is-responsive');\n }\n\n return classNames.join(' ');\n }\n\n private sortTable(column: string, direction: 'asc' | 'desc') {\n const tableBody = this.el.querySelector('pds-table-body');\n\n // Get the rows in the table body\n const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n // Find the column index based on the column name\n const columnHeaderCells: HTMLElement[] = Array.from(\n this.el.querySelectorAll('pds-table-head-cell[sortable]')\n );\n\n const columnHeaderCell = columnHeaderCells.find(\n (cell) => cell.innerText.trim() === column\n );\n\n if (!columnHeaderCell) {\n console.warn(`Column \"${column}\" not found.`);\n return;\n }\n\n const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n // Sort the rows based on the content of the specified column\n tableRows.sort((a, b) => {\n const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n if (direction === 'asc') {\n return valueA.localeCompare(valueB);\n } else {\n return valueB.localeCompare(valueA);\n }\n });\n\n // Clear and append the sorted rows back to the table body\n tableBody.innerHTML = '';\n tableRows.forEach((row) => {\n tableBody.appendChild(row);\n });\n }\n\n @Listen('pdsTableSort')\n handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n const { direction } = event.detail;\n this.sortTable(event.detail.column, direction);\n this.sortingColumn = event.detail.column;\n this.sortingDirection = direction;\n }\n\n @Listen('pdsTableSelectAll')\n handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const pdsTableBody = this.el.querySelector('pds-table-body');\n const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n tableRows.forEach((row) => {\n row.isSelected = event.detail.isSelected;\n });\n }\n\n @Listen('pdsTableRowSelected')\n async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n if (event.defaultPrevented) return;\n\n const allTableRows = this.el.querySelectorAll('pds-table-row');\n const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n const pdsTableHead = this.el.querySelector('pds-table-head');\n if (!pdsTableHead) return;\n\n const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n headerCheckbox.checked = allSelectedRows;\n headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n id={this.componentId}\n role=\"grid\"\n selectable={this.selectable}\n tabindex=\"0\"\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"gnDAAA,IAAMA,EAAc,ghDACpB,IAAAC,EAAeD,E,ICMFE,EAAQC,EAAA,uB,gRA4BqB,K,sBACI,K,CAa5CC,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,cAAgB,I,EAGfJ,EAAAC,UAAAI,WAAA,WACN,IAAMA,EAAa,CAAC,aAEpB,GAAIF,KAAKG,QAAS,CAChBD,EAAWE,KAAK,a,CAGlB,GAAIJ,KAAKK,WAAY,CACnBH,EAAWE,KAAK,gB,CAGlB,OAAOF,EAAWI,KAAK,K,EAGjBT,EAAAC,UAAAS,UAAA,SAAUC,EAAgBC,GAChC,IAAMC,EAAYV,KAAKW,GAAGC,cAAc,kBAGxC,IAAMC,EAAYC,MAAMC,KAAKL,EAAUM,iBAAiB,kBAGxD,IAAMC,EAAmCH,MAAMC,KAC7Cf,KAAKW,GAAGK,iBAAiB,kCAG3B,IAAME,EAAmBD,EAAkBE,MACzC,SAACC,GAAS,OAAAA,EAAKC,UAAUC,SAAWd,CAA1B,IAGZ,IAAKU,EAAkB,CACrBK,QAAQC,KAAK,WAAAC,OAAWjB,EAAM,iBAC9B,M,CAGF,IAAMkB,EAAcT,EAAkBU,QAAQT,GAG9CL,EAAUe,MAAK,SAACC,EAAGC,GACjB,IAAMC,EAASF,EAAEjB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAC3F,IAAMW,EAASH,EAAElB,cAAc,4BAAAa,OAA4BC,EAAc,EAAC,MAAKM,YAAYV,OAE3F,GAAIb,IAAc,MAAO,CACvB,OAAOsB,EAAOG,cAAcD,E,KACvB,CACL,OAAOA,EAAOC,cAAcH,E,KAKhCrB,EAAUyB,UAAY,GACtBtB,EAAUuB,SAAQ,SAACC,GACjB3B,EAAU4B,YAAYD,E,KAK1BxC,EAAAC,UAAAyC,gBAAA,SAAgBC,GACN,IAAA/B,EAAc+B,EAAMC,OAAMhC,UAClCT,KAAKO,UAAUiC,EAAMC,OAAOjC,OAAQC,GACpCT,KAAKC,cAAgBuC,EAAMC,OAAOjC,OAClCR,KAAK0C,iBAAmBjC,C,EAI1BZ,EAAAC,UAAA6C,qBAAA,SAAqBH,GACnB,GAAIA,EAAMI,iBAAkB,OAE5B,IAAMC,EAAe7C,KAAKW,GAAGC,cAAc,kBAC3C,IAAMC,EAAYC,MAAMC,KAAK8B,EAAa7B,iBAAiB,kBAE3DH,EAAUuB,SAAQ,SAACC,GACjBA,EAAIS,WAAaN,EAAMC,OAAOK,U,KAK5BjD,EAAAC,UAAAiD,kBAAN,SAAwBP,G,mGACtB,GAAIA,EAAMI,iBAAkB,UAEtBI,EAAehD,KAAKW,GAAGK,iBAAiB,iBACxCiC,EAAkBnC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAAAA,EAAIS,UAAJ,IAC1DK,EAAmBrC,MAAMC,KAAKiC,GAAcE,OAAM,SAACb,GAAQ,OAACA,EAAIS,UAAL,IAC3DM,EAAepD,KAAKW,GAAGC,cAAc,kBAC3C,IAAKwC,EAAc,UAEbC,EAAiBD,EAAaE,WAAW1C,cAAc,gBAC7DyC,EAAeE,QAAUN,EACzBI,EAAeG,eAAiBP,IAAoBE,E,iBAGtDtD,EAAAC,UAAA2D,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO7D,KAAKE,aACZ4D,GAAI9D,KAAK+D,YACTC,KAAK,OACLC,WAAYjE,KAAKiE,WACjBC,SAAS,KAETR,EAAA,QAAAE,IAAA,6C,uHAjJa,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as i,h as r,H as o}from"./p-0b541f88.js";import{P as a,a as n,m as t}from"./p-e60fccc0.js";const s=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-error:0 0 0 2px var(--pine-color-red-200);--color-text-default:var(--pine-color-grey-950);--color-background-disabled:var(--pine-color-grey-100);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-text:var(--pine-color-grey-500);--color-placeholder-text:var(--pine-color-grey-700);--font-size-helper-message:var(--pine-font-size-100);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-text);cursor:not-allowed}input:hover{border-color:var(--color-border-hover)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input:-ms-input-placeholder{color:var(--color-placeholder-text)}input:has(~.pds-input__error-message){border-color:var(--color-border-error)}input:has(~.pds-input__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-input__error-message,.pds-input__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{color:var(--color-error)}";const l=s;const d=class{constructor(r){e(this,r);this.pdsInput=i(this,"pdsInput",7);this.onInputEvent=e=>{const i=e.target;if(i){this.value=i.value||""}this.pdsInput.emit(e)};this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=undefined;this.label=undefined;this.name=undefined;this.placeholder=undefined;this.readonly=undefined;this.required=undefined;this.type="text";this.value=undefined}render(){return r(o,{key:"d11ef85231a61d59752e289cb0832eb971115a84","aria-disabled":this.disabled?"true":null},r("div",{key:"722e05d546051d094ee4d870eaaefea24d241032",class:"pds-input"},r(a,{key:"a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7",htmlFor:this.componentId,text:this.label}),r("input",{key:"89d5b9cfa436ca98c58da38455c6e08abce6937c",class:"pds-input__field","aria-describedby":n(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,type:this.type,value:this.value,onInput:this.onInputEvent}),this.helperMessage&&r("p",{key:"4fe86e4f98f16c25009b9011cf02e7a71c9050ef",class:"pds-input__helper-message",id:t(this.componentId,"helper")},this.helperMessage),this.errorMessage&&r("p",{key:"50c1d4b6603868f5494c599298b23814df26782b",class:"pds-input__error-message",id:t(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage)))}};d.style=l;export{d as pds_input};
|
|
2
|
-
//# sourceMappingURL=p-c943ba01.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsInputCss","PdsInputStyle0","PdsInput","this","onInputEvent","ev","input","target","value","pdsInput","emit","render","h","Host","key","disabled","class","PdsLabel","htmlFor","componentId","text","label","assignDescription","invalid","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","type","onInput","messageId","errorMessage"],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);\n\n --color-text-default: var(--pine-color-grey-950);\n --color-background-disabled: var(--pine-color-grey-100);\n --color-border-default: var(--pine-color-grey-400);\n --color-border-error: var(--pine-color-red-300);\n --color-border-hover: var(--pine-color-grey-500);\n --color-disabled-text: var(--pine-color-grey-500);\n --color-placeholder-text: var(--pine-color-grey-700);\n\n --font-size-helper-message: var(--pine-font-size-100);\n --font-size-input-field: var(--pine-font-size-100);\n --font-size-label: var(--pine-font-size-100);\n --font-weight-helper-message: var(--pine-font-weight-normal);\n --font-weight-input-field: var(--pine-font-weight-normal);\n --font-weight-label: var(--pine-font-weight-medium);\n\n --line-height-label: var(--pine-line-height-150);\n --line-height-helper-message: var(--pine-line-height-125);\n --line-height-input-field: var(--pine-line-height-150);\n\n --spacing-field-padding-block: var(--pine-spacing-100);\n --spacing-input-field-padding-inline: var(--pine-spacing-200);\n --spacing-label-margin-block-end: var(--pine-spacing-100);\n --spacing-margin-top-helper-message: var(--pine-spacing-100);\n\n display: inline;\n}\n\n.pds-input {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n font-size: var(--font-size-label);\n font-weight: var(--font-weight-label);\n line-height: var(--line-height-label);\n margin-block-end: var(--spacing-label-margin-block-end);\n}\n\ninput {\n border: 1px solid var(--color-border-default);\n border-radius: 10px;\n font-size: var(--font-size-input-field);\n font-weight: var(--font-weight-input-field);\n line-height: var(--line-height-input-field);\n padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-disabled-text);\n cursor: not-allowed;\n }\n\n &:hover {\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n /* stylelint-disable */\n &::-webkit-input-placeholder {\n color: var(--color-placeholder-text);\n }\n\n &::-moz-placeholder {\n color: var(--color-placeholder-text);\n }\n\n &::-moz-placeholder {\n color: var(--color-placeholder-text);\n }\n\n &:-ms-input-placeholder {\n color: var(--color-placeholder-text);\n }\n\n &:has(~.pds-input__error-message) {\n border-color: var(--color-border-error);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n outline: none;\n }\n }\n /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n font-size: var(--font-size-helper-message);\n font-weight: var(--font-weight-helper-message);\n line-height: var(--line-height-helper-message);\n margin-block-end: 0;\n margin-block-start: var(--spacing-margin-top-helper-message);\n}\n\n.pds-input__error-message {\n color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-input',\n styleUrl: 'pds-input.scss',\n shadow: true,\n})\nexport class PdsInput {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Indicates whether or not the input field is disabled.\n */\n @Prop() disabled?: boolean;\n\n /**\n * Specifies the error message and provides an error-themed treatment to the field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the input field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Indicates whether or not the input field is invalid or throws an error.\n */\n @Prop() invalid?: boolean;\n\n /**\n * Text to be displayed as the input label.\n */\n @Prop() label?: string;\n\n /**\n * Specifies the name. Submitted with the form name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Specifies a short hint that describes the expected value of the input field.\n */\n @Prop() placeholder?: string;\n\n /**\n * Indicates whether or not the input field is readonly.\n */\n @Prop() readonly?: boolean;\n\n /**\n * Indicates whether or not the input field is required.\n */\n @Prop() required?: boolean;\n\n /**\n * Determines the type of control that will be displayed\n `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n * @defaultValue \"text\"\n */\n @Prop() type = 'text';\n\n /**\n * The value of the input.\n */\n @Prop({mutable: true}) value?: string;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() pdsInput: EventEmitter<InputEvent>;\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.pdsInput.emit(ev as InputEvent);\n };\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n <div class=\"pds-input\">\n <PdsLabel htmlFor={this.componentId} text={this.label} />\n <input class=\"pds-input__field\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInputEvent}\n />\n {this.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAc,m5FACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,M,4DAoEXC,KAAAC,aAAgBC,IACtB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9BL,KAAKM,SAASC,KAAKL,EAAiB,E,iQAjBvB,O,qBAoBf,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYX,KAAKY,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACTJ,EAACK,EAAQ,CAAAH,IAAA,2CAACI,QAASf,KAAKgB,YAAaC,KAAMjB,KAAKkB,QAChDT,EAAA,SAAAE,IAAA,2CAAOE,MAAM,mBAAkB,mBACXM,EAAkBnB,KAAKgB,YAAahB,KAAKoB,QAASpB,KAAKqB,eAAc,eACzErB,KAAKoB,QAAU,OAASE,UACtCV,SAAUZ,KAAKY,SACfW,GAAIvB,KAAKgB,YACTQ,KAAMxB,KAAKwB,KACXC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAK2B,SACfC,SAAU5B,KAAK4B,SACfC,KAAM7B,KAAK6B,KACXxB,MAAOL,KAAKK,MACZyB,QAAS9B,KAAKC,eAEfD,KAAKqB,eACJZ,EAAA,KAAAE,IAAA,2CACEE,MAAM,4BACNU,GAAIQ,EAAU/B,KAAKgB,YAAa,WAE/BhB,KAAKqB,eAGTrB,KAAKgC,cACJvB,EAAA,KAAAE,IAAA,2CACEE,MAAM,2BACNU,GAAIQ,EAAU/B,KAAKgB,YAAa,SAAQ,YAC9B,aAEThB,KAAKgC,e","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-16b74124.system.js"],(function(r){"use strict";var a,o,e,n,i;return{setters:[function(r){a=r.r;o=r.h;e=r.H},function(r){n=r.c;i=r.u}],execute:function(){var t=":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var s=t;var d=r("pds_avatar",function(){function r(r){var e=this;a(this,r);this.renderAssetWrapper=function(){var r={height:e.avatarSize(),width:e.avatarSize()};return o("div",{style:r,part:"asset-wrapper"},e.renderIconOrImage(),e.renderBadge())};this.renderAvatar=function(){return e.dropdown?o("button",{class:"pds-avatar__button",type:"button","aria-label":"Avatar dropdown trigger"},e.renderAssetWrapper()):e.renderAssetWrapper()};this.renderBadge=function(){return e.badge&&o("pds-icon",{class:"pds-avatar__badge",icon:n,size:"33.53%"})};this.renderIconOrImage=function(){return e.image?o("img",{alt:e.alt,src:e.image}):o("pds-icon",{color:"var(--pine-color-blue-400)",icon:i,size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=e.image!==""&&e.image!==null,r["pds-avatar--".concat(e.variant)]=e.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return o(e,{key:"8c43a9de8b7799b5aafff0c12c2e95e53bed2041",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}());d.style=s}}}));
|
|
2
|
-
//# sourceMappingURL=p-cb763cfb.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","exports","this","renderAssetWrapper","style","height","_this","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","_a","concat","variant","class_1","prototype","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --color-background-container: var(--pine-color-blue-100);\n --color-background-badge: var(--pine-color-white);\n --color-border-badge: var(--pine-color-white);\n\n --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --border-radius-round: var(--pine-border-radius-round);\n --border-radius-none: var(--pine-border-radius-0);\n\n --spacing-none: var(--pine-spacing-0);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-spacing-150);\n border-radius: var(--border-radius-admin-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n --border-radius-round: var(--pine-border-radius-round);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--border-radius-none);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n display: flex;\n padding: var(--spacing-none);\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--color-background-badge);\n border: var(--border-default);\n border-color: var(--color-border-badge);\n border-radius: var(--border-radius-round);\n bottom: var(--spacing-none);\n position: absolute;\n right: var(--spacing-none);\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrl: 'pds-avatar.scss',\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => (\n this.image\n ? <img alt={this.alt} src={this.image} />\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n );\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"mappings":"wMAAA,IAAMA,EAAe,yzDACrB,IAAAC,EAAeD,E,ICUFE,EAASC,EAAA,wB,mCAiEZC,KAAAC,mBAAqB,WAC3B,IAAMC,EAAQ,CACZC,OAAQC,EAAKC,aACbC,MAAOF,EAAKC,cAGd,OACEE,EAAA,OAAKL,MAAOA,EAAOM,KAAK,iBACrBJ,EAAKK,oBACLL,EAAKM,c,EAKJV,KAAAW,aAAe,WACrB,OACEP,EAAKQ,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,SAAQ,aAAY,2BAC3DV,EAAKH,sBAGNG,EAAKH,oB,EAIHD,KAAAU,YAAc,kBACpBN,EAAKW,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,EAAmBC,KAAK,UALnD,EAQdlB,KAAAS,kBAAoB,kBAC1BL,EAAKe,MACDZ,EAAA,OAAKa,IAAKhB,EAAKgB,IAAKC,IAAKjB,EAAKe,QAI9BZ,EAAA,YAAUe,MAAM,6BAA6BN,KAAMO,EAAYL,KAAK,UAN9C,EASpBlB,KAAAwB,WAAa,W,MAAA,OAAAC,EAAA,CAEjB,aAAc,MACdA,EAAC,yBAA0BrB,EAAKe,QAAU,IAAMf,EAAKe,QAAU,KAC/DM,EAAC,eAAAC,OAAetB,EAAKuB,UAAYvB,EAAKuB,UAAY,Q,CAJjC,E,SAtGS,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElDC,EAAAC,UAAAxB,WAAA,WACN,IAAMyB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAM9B,KAAKkB,MAAO,CACpB,OAAOY,EAAM9B,KAAKkB,K,KACb,CACL,OAAOlB,KAAKkB,I,GAuDhBU,EAAAC,UAAAO,OAAA,WAEE,OACE7B,EAAC8B,EAAI,CAAAC,IAAA,2CACHC,GAAIvC,KAAKwC,YACT3B,MAAK4B,OAAAC,OAAA,GAAM1C,KAAKwB,eAEfxB,KAAKW,e,WA3HQ,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-16b74124.system.js"],(function(a){"use strict";var n,o,r,i,c,s;return{setters:[function(a){n=a.r;o=a.c;r=a.h;i=a.H},function(a){c=a.d;s=a.r}],execute:function(){var e=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-300);--color-background-accent-interactive:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-300);--color-background-danger-interactive:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-300);--color-background-info-interactive:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-300);--color-background-neutral-dot:var(--pine-color-grey-600);--color-background-neutral-interactive:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-300);--color-background-success-interactive:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-300);--color-background-warning-interactive:var(--pine-color-yellow-200);--font-size-sm:var(--pine-font-size-085);--font-size-body:var(--pine-font-size-100);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-100);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-interactive)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-interactive)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-interactive)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-interactive)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-interactive)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-body);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-body);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";var d=e;var p=a("pds_chip",function(){function a(a){var r=this;n(this,a);this.pdsTagCloseClick=o(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){r.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}a.prototype.classNames=function(){var a=["pds-chip"];if(this.large){a.push("pds-chip--large")}if(this.variant){a.push("pds-chip--"+this.variant)}if(this.sentiment){a.push("pds-chip--"+this.sentiment)}return a.join(" ")};a.prototype.setChipContent=function(){var a=this.variant==="dropdown";var n=a?r("button",{class:"pds-chip__button",type:"button"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,r("pds-icon",{icon:c,size:"12px","aria-hidden":"true"})):r("span",{class:"pds-chip__label"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return n};a.prototype.render=function(){return r(i,{key:"a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&r("button",{key:"83d2273a0785c4516a57ed618645d937ba33f9f5",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},r("pds-icon",{key:"6ca04621d1acd134ce3352a034ea69ea7f794fbd",icon:s,size:"12px"})))};return a}());p.style=d}}}));
|
|
2
|
-
//# sourceMappingURL=p-dce2f452.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsChipCss","PdsChipStyle0","PdsChip","exports","this","handleCloseClick","_this","pdsTagCloseClick","emit","class_1","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":[":host {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n --border-radius: var(--pine-border-radius-200);\n\n --color-background-accent: var(--pine-color-purple-100);\n --color-background-accent-dot: var(--pine-color-purple-300);\n --color-background-accent-interactive: var(--pine-color-purple-200);\n --color-background-danger: var(--pine-color-red-100);\n --color-background-danger-dot: var(--pine-color-red-300);\n --color-background-danger-interactive: var(--pine-color-red-200);\n --color-background-info: var(--pine-color-blue-100);\n --color-background-info-dot: var(--pine-color-blue-300);\n --color-background-info-interactive: var(--pine-color-blue-200);\n --color-background-neutral: var(--pine-color-grey-300);\n --color-background-neutral-dot: var(--pine-color-grey-600);\n --color-background-neutral-interactive: var(--pine-color-grey-400);\n --color-background-success: var(--pine-color-green-100);\n --color-background-success-dot: var(--pine-color-green-300);\n --color-background-success-interactive: var(--pine-color-green-200);\n --color-background-warning: var(--pine-color-yellow-100);\n --color-background-warning-dot: var(--pine-color-yellow-300);\n --color-background-warning-interactive: var(--pine-color-yellow-200);\n\n --font-size-sm: var(--pine-font-size-085);\n --font-size-body: var(--pine-font-size-100);\n --font-weight: var(--pine-font-weight-medium);\n --line-height: var(--pine-line-height-100);\n\n --spacing-xxs: calc(var(--pine-spacing-050) / 2);\n --spacing-xs: var(--pine-spacing-050);\n --spacing-sm: calc(var(--pine-spacing-150) / 2);\n --spacing-md: var(--pine-spacing-100);\n --spacing-lg: calc(var(--pine-spacing-250) / 2);\n --spacing-xl: var(--pine-spacing-150);\n --spacing-xxl: calc(var(--pine-spacing-350) / 2);\n\n --sizing-close: 10px;\n --sizing-close-lg: 24px;\n --sizing-dot: 4px;\n\n align-items: center;\n border-radius: var(--border-radius);\n display: inline-flex;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n padding-block: var(--spacing-xs);\n padding-inline: var(--spacing-lg);\n}\n\n$pds-chip-sentiment: (\n accent: var(--color-background-accent),\n danger: var(--color-background-danger),\n info: var(--color-background-info),\n neutral: var(--color-background-neutral),\n success: var(--color-background-success),\n warning: var(--color-background-warning),\n);\n\n$pds-chip-sentiment-dots: (\n accent: var(--color-background-accent-dot),\n danger: var(--color-background-danger-dot),\n info: var(--color-background-info-dot),\n neutral: var(--color-background-neutral-dot),\n success: var(--color-background-success-dot),\n warning: var(--color-background-warning-dot),\n);\n\n$pds-chip-sentiment-interactive: (\n accent: var(--color-background-accent-interactive),\n danger: var(--color-background-danger-interactive),\n info: var(--color-background-info-interactive),\n neutral: var(--color-background-neutral-interactive),\n success: var(--color-background-success-interactive),\n warning: var(--color-background-warning-interactive),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n\n // dot colors\n .pds-chip__dot {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-dots, $sentiment);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-interactive, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-interactive, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: 1px solid transparent;\n border-radius: 50%;\n display: inline-block;\n height: var(--sizing-dot);\n margin-block-end: var(--spacing-xxs);\n margin-inline-end: var(--spacing-xs);\n width: var(--sizing-dot);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: 0;\n\n .pds-chip__dot {\n margin-block-end: calc(var(--spacing-xxs) / 4);\n margin-block-start: var(--spacing-xxs);\n }\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--border-radius);\n display: flex;\n font-family: inherit;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n padding-block: var(--spacing-xs);\n padding-inline: var(--spacing-lg);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n pds-icon {\n margin-inline-end: calc(var(--spacing-xxs) * -1);\n margin-inline-start: var(--spacing-xs);\n }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n padding-block: var(--spacing-xxs);\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 50%;\n height: var(--sizing-close);\n margin-inline-end: calc(var(--spacing-md) * -1);\n margin-inline-start: var(--spacing-xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n}\n\n// large\n\n:host(.pds-chip--large) {\n font-size: var(--font-size-body);\n padding-block: var(--spacing-sm);\n padding-inline: var(--spacing-xxl);\n\n &:host(.pds-chip--dropdown) {\n padding-block: var(--spacing-xs);\n padding-inline: var(--spacing-xxs);\n\n .pds-chip__dot {\n margin-block-end: 0;\n }\n }\n\n .pds-chip__button {\n font-size: var(--font-size-body);\n padding-inline: var(--spacing-xl)\n }\n\n .pds-chip__close {\n height: var(--sizing-close-lg);\n margin-inline-end: calc(var(--spacing-xl) * -1);\n width: var(--sizing-close-lg);\n }\n\n &:host(.pds-chip--tag) {\n padding-block: var(--spacing-xs);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'pds-chip',\n styleUrl: 'pds-chip.scss',\n shadow: true,\n})\nexport class PdsChip {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Sets the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n /**\n * Determines whether a dot should be displayed on the chip.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * Sets the text label content of the chip.\n */\n @Prop() label: string;\n\n /**\n * Determines whether the chip should be rendered in a larger size.\n * @defaultValue false\n */\n @Prop() large = false;\n\n /**\n * Sets the style variant of the chip.\n * @defaultValue 'text'\n */\n @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n /**\n * Event when close button is clicked on tag variant.\n */\n @Event() pdsTagCloseClick: EventEmitter;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\n }\n if (this.variant) {\n classNames.push('pds-chip--' + this.variant);\n }\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private setChipContent() {\n const isDropdown = this.variant === 'dropdown';\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n {this.label}\n <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n {this.label}\n </span>\n );\n\n return chipContent;\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.variant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size=\"12px\"></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"gNAAA,IAAMA,EAAa,urNACnB,IAAAC,EAAeD,E,ICOFE,EAAOC,EAAA,sB,sFAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,4CA/B8D,U,SAMxE,M,gCAWE,M,aAM+B,M,CAWvCC,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIP,KAAKQ,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIT,KAAKU,QAAS,CAChBH,EAAWE,KAAK,aAAeT,KAAKU,Q,CAEtC,GAAIV,KAAKW,UAAW,CAClBJ,EAAWE,KAAK,aAAeT,KAAKW,U,CAGtC,OAAOJ,EAAWK,KAAK,K,EAGjBP,EAAAC,UAAAO,eAAA,WACN,IAAMC,EAAad,KAAKU,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnClB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,MACNJ,EAAA,YAAUK,KAAMC,EAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACTjB,KAAKmB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDjB,KAAKoB,OAIV,OAAOL,C,EAGTV,EAAAC,UAAAkB,OAAA,WACE,OACER,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAOjB,KAAKO,aAAcoB,GAAI3B,KAAK4B,aACtC5B,KAAKa,iBACLb,KAAKU,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS7B,KAAKC,iBAAgB,aAAa,UACvFe,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,EAAQP,KAAK,U,WApFrB,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-b18b20f4.system.js"],(function(r){"use strict";var i,o,e,s,a,d,c;return{setters:[function(r){i=r.r;o=r.c;e=r.h;s=r.H},function(r){a=r.m;d=r.P;c=r.a}],execute:function(){var n='.sc-pds-radio-h{--border-interactive-default:var(--pine-border-width-thin) solid var( --pine-color-grey-400);--border-radius:50%;--box-shadow-focus:0 0 0 2px var(--color-focus);--box-shadow-focus-error:0 0 0 2px var(--color-invalid-focus);--color:var(--pine-color-grey-700);--color-background:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-grey-200);--color-border-hover:var(--pine-color-grey-500);--color-border-disabled:var(--pine-color-grey-300);--color-checked:var(--pine-color-grey-950);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-blue-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-085);--sizing-check-size:6px;--sizing-input-size:16px;--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-interactive-default);border-radius:var(--border-radius);height:var(--sizing-input-size);margin:0;position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--color-background);border-radius:50%;content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--color-border-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';var t=n;var l=r("pds_radio",function(){function r(r){var e=this;i(this,r);this.pdsRadioChange=o(this,"pdsRadioChange",7);this.handleRadioChange=function(r){if(e.disabled){return}var i=r.target;var o=i.checked;e.pdsRadioChange.emit(o)};this.checked=false;this.disabled=false;this.errorMessage=undefined;this.invalid=false;this.componentId=undefined;this.label=undefined;this.helperMessage=undefined;this.name=undefined;this.required=false;this.value=undefined}r.prototype.classNames=function(){var r=[];if(this.invalid){r.push("is-invalid")}if(this.disabled){r.push("is-disabled")}return r.join(" ")};r.prototype.render=function(){return e(s,{key:"e23a00c8941dfce9d9d6a99a554654b7bd2259c4",class:this.classNames()},e("input",{key:"571d2e6656cd94573253f54028b1926a3c5e1499","aria-describedby":c(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange}),e(d,{key:"42c2c95ed36e194f43367f2c28ed81660d82b096",htmlFor:this.componentId,text:this.label}),this.helperMessage&&e("div",{key:"32be02934f23b2832c6c1d0e56c3dceda8c9ccc9",class:"pds-radio__message",id:a(this.componentId,"helper")},this.helperMessage),this.errorMessage&&e("div",{key:"c670effc6a381f872800c8dd58095c2dce49016e",class:"pds-radio__message pds-radio__message--error",id:a(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};return r}());l.style=t}}}));
|
|
2
|
-
//# sourceMappingURL=p-dd35371b.system.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-f74c489d.system.js","./p-16b74124.system.js"],(function(a){"use strict";var e,i,n,r;return{setters:[function(a){e=a.r;i=a.h;n=a.H},function(a){r=a.d}],execute:function(){var o=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-150);--color-text-default:var(--pine-color-grey-700);--color-text-active:var(--pine-color-grey-950);--color-text-hover:var(--pine-color-grey-800);--font-weight-active:var(--pine-font-weight-semi-bold);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-details-padding-block-end:calc(var(--pine-spacing-200) + 2);--spacing-summary-padding-block:calc(var(--pine-spacing-150) / 2);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);border-radius:var(--border-radius-default)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--color-background-default)}details[open] summary{color:var(--color-text-active);font-weight:var(--font-weight-active)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--color-background-default);border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:var(--spacing-details-padding-block-end);padding-block-end:var(--spacing-details-padding-block-end);padding-inline:var(--spacing-details-padding-inline)}";var t=o;var d=a("pds_accordion",function(){function a(a){var i=this;e(this,a);this.handleToggle=function(){i.isOpen=i.detailsEl.open};this.getOpenAttribute=function(){if(i.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}a.prototype.handleOpenState=function(a){this.isOpen=a};a.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};a.prototype.render=function(){var a=this;return i(n,{key:"7789d456b8a8415a7860754f374c5dad138216b8",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"e81776ae675f74cd5584c668d717ba0ca91c314c"},this.getOpenAttribute(),{ref:function(e){return a.detailsEl=e}}),i("summary",{key:"ae8e7ed87ec55bcb51dfe44ed648f9cd0f416aa9"},i("slot",{key:"0840b76aa1e6d84f0b0bec40e37a26f243a4bbe3",name:"label"},"Details"),i("pds-icon",{key:"b41cb7c07dfb4a73f97d5a2bd5ec86316d5148f8",icon:r})),i("div",{key:"ed5c79c4930d94105343f0512ab9059ff30b7365",part:"accordion-body",class:"pds-accordion__body"},i("slot",{key:"9f1c522f1343b19b482a24c2ad063c8ec0e2457b"}))))};Object.defineProperty(a,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return a}());d.style=t}}}));
|
|
2
|
-
//# sourceMappingURL=p-e379a025.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","part"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --border-radius-default: var(--pine-border-radius-100);\n\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n --color-background-default: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-150);\n --color-text-default: var(--pine-color-grey-700);\n --color-text-active: var(--pine-color-grey-950);\n --color-text-hover: var(--pine-color-grey-800);\n\n --font-weight-active: var(--pine-font-weight-semi-bold);\n\n --number-animation-transform-timing: 200ms;\n\n --spacing-details-padding-inline: var(--pine-spacing-150);\n --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px\n --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px\n --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);\n\n border-radius: var(--border-radius-default);\n\n pds-icon {\n transform: scaleY(1);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-background-default);\n\n summary {\n color: var(--color-text-active);\n font-weight: var(--font-weight-active);\n\n pds-icon {\n transform: scaleY(-1);\n }\n }\n}\n\nsummary {\n background-color: var(--color-background-default);\n border-radius: var(--border-radius-default);\n color: var(--color-text-default);\n font: var(--typography-default);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-text-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n padding-block-end: var(--spacing-details-padding-block-end);\n padding-inline: var(--spacing-details-padding-inline);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true,\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n };\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n };\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={downSmall} />\n </summary>\n <div part=\"accordion-body\" class=\"pds-accordion__body\">\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,4yEACxB,IAAAC,EAAeD,E,ICYFE,EAAYC,EAAA,2B,mCAwBfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCAfY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,C,EAchBH,EAAAC,UAAAG,iBAAA,WACEX,KAAKI,UAAUQ,iBAAiB,SAAUZ,KAAKC,a,EAGjDM,EAAAC,UAAAK,OAAA,eAAAX,EAAAF,KACE,OACEc,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIlB,KAAKmB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAahB,KAAKM,mBAAkB,CAAEgB,IAAK,SAACC,GAAE,OAAMrB,EAAKE,UAAYmB,CAAvB,IAC5CT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,KAElBZ,EAAA,OAAAE,IAAA,2CAAKW,KAAK,iBAAiBV,MAAM,uBAC/BH,EAAA,QAAAE,IAAA,+C,uIAhDa,I","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,c as o,h as r,H as n}from"./p-0b541f88.js";import{d as i,r as c}from"./p-373bf876.js";const s=":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-300);--color-background-accent-interactive:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-300);--color-background-danger-interactive:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-300);--color-background-info-interactive:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-300);--color-background-neutral-dot:var(--pine-color-grey-600);--color-background-neutral-interactive:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-300);--color-background-success-interactive:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-300);--color-background-warning-interactive:var(--pine-color-yellow-200);--font-size-sm:var(--pine-font-size-085);--font-size-body:var(--pine-font-size-100);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-100);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-interactive)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-interactive)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-interactive)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-interactive)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-interactive)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-body);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-body);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";const e=s;const d=class{constructor(r){a(this,r);this.pdsTagCloseClick=o(this,"pdsTagCloseClick",7);this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}classNames(){const a=["pds-chip"];if(this.large){a.push("pds-chip--large")}if(this.variant){a.push("pds-chip--"+this.variant)}if(this.sentiment){a.push("pds-chip--"+this.sentiment)}return a.join(" ")}setChipContent(){const a=this.variant==="dropdown";const o=a?r("button",{class:"pds-chip__button",type:"button"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,r("pds-icon",{icon:i,size:"12px","aria-hidden":"true"})):r("span",{class:"pds-chip__label"},this.dot&&r("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return o}render(){return r(n,{key:"a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&r("button",{key:"83d2273a0785c4516a57ed618645d937ba33f9f5",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},r("pds-icon",{key:"6ca04621d1acd134ce3352a034ea69ea7f794fbd",icon:c,size:"12px"})))}};d.style=e;export{d as pds_chip};
|
|
2
|
-
//# sourceMappingURL=p-e94ce082.entry.js.map
|