monkey-style-guide 21.0.8 → 21.0.10

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.
Files changed (6) hide show
  1. package/fesm2022/monkey-style-guide.mjs +59 -17
  2. package/fesm2022/monkey-style-guide.mjs.map +1 -1
  3. package/monkey-style-guide-21.0.10.tgz +0 -0
  4. package/package.json +1 -1
  5. package/types/monkey-style-guide.d.ts +5 -2
  6. package/monkey-style-guide-21.0.8.tgz +0 -0
package/fesm2022/monkey-style-guide.mjs CHANGED
@@ -10065,6 +10065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10065
10065
  * MIT Licence
10066
10066
  ************************* */
10067
10067
  class MonkeyPassNumberComponent {
10068
+ get isDisabledNumbers() {
10069
+ return this.selected?.length === 4;
10070
+ }
10071
+ get isDisabledClear() {
10072
+ return this.selected?.length === 0;
10073
+ }
10068
10074
  get id() {
10069
10075
  return this._id;
10070
10076
  }
@@ -10089,7 +10095,7 @@ class MonkeyPassNumberComponent {
10089
10095
  }
10090
10096
  }
10091
10097
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MonkeyPassNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10092
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
10098
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
10093
10099
  <div class="pin-selected">
10094
10100
  @for (input of [0, 1, 2, 3]; track input) {
10095
10101
  <div class="pin-input">
@@ -10099,21 +10105,38 @@ class MonkeyPassNumberComponent {
10099
10105
  </div>
10100
10106
  <div class="grid">
10101
10107
  @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
10102
- <div class="button" (click)="onPress(pin)">
10108
+ <monkey-button
10109
+ size="lg"
10110
+ (click)="onPress(pin)"
10111
+ [disabled]="isDisabledNumbers || disabled"
10112
+ color="black"
10113
+ >
10103
10114
  {{ pin }}
10104
- </div>
10115
+ </monkey-button>
10105
10116
  }
10106
10117
  <div></div>
10107
- <div class="button" (click)="onPress(0)">0</div>
10108
- <div class="button secondary" (click)="clear()">
10118
+ <monkey-button
10119
+ size="lg"
10120
+ (click)="onPress(0)"
10121
+ [disabled]="isDisabledNumbers || disabled"
10122
+ color="black"
10123
+ >
10124
+ 0
10125
+ </monkey-button>
10126
+ <monkey-button
10127
+ size="lg"
10128
+ type="secondary"
10129
+ (click)="clear()"
10130
+ [disabled]="isDisabledClear || disabled"
10131
+ >
10109
10132
  <i class="mk-i mk-i-delete"></i>
10110
- </div>
10133
+ </monkey-button>
10111
10134
  </div>
10112
- `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }); }
10135
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
10113
10136
  }
10114
10137
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
10115
10138
  type: Component,
10116
- args: [{ selector: 'monkey-pass-number', imports: [], template: `
10139
+ args: [{ selector: 'monkey-pass-number', imports: [MonkeyButtonComponent], template: `
10117
10140
  <div class="pin-selected">
10118
10141
  @for (input of [0, 1, 2, 3]; track input) {
10119
10142
  <div class="pin-input">
@@ -10123,22 +10146,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10123
10146
  </div>
10124
10147
  <div class="grid">
10125
10148
  @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
10126
- <div class="button" (click)="onPress(pin)">
10149
+ <monkey-button
10150
+ size="lg"
10151
+ (click)="onPress(pin)"
10152
+ [disabled]="isDisabledNumbers || disabled"
10153
+ color="black"
10154
+ >
10127
10155
  {{ pin }}
10128
- </div>
10156
+ </monkey-button>
10129
10157
  }
10130
10158
  <div></div>
10131
- <div class="button" (click)="onPress(0)">0</div>
10132
- <div class="button secondary" (click)="clear()">
10159
+ <monkey-button
10160
+ size="lg"
10161
+ (click)="onPress(0)"
10162
+ [disabled]="isDisabledNumbers || disabled"
10163
+ color="black"
10164
+ >
10165
+ 0
10166
+ </monkey-button>
10167
+ <monkey-button
10168
+ size="lg"
10169
+ type="secondary"
10170
+ (click)="clear()"
10171
+ [disabled]="isDisabledClear || disabled"
10172
+ >
10133
10173
  <i class="mk-i mk-i-delete"></i>
10134
- </div>
10174
+ </monkey-button>
10135
10175
  </div>
10136
10176
  `, host: {
10137
10177
  'data-testid': 'monkey-pass-number',
10138
10178
  '[attr.id]': 'id',
10139
10179
  '[id]': 'id'
10140
- }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
10141
- }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
10180
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
10181
+ }], ctorParameters: () => [], propDecorators: { disabled: [{
10182
+ type: Input
10183
+ }], onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
10142
10184
  type: Input
10143
10185
  }] } });
10144
10186
 
@@ -10216,7 +10258,7 @@ class MonkeyPassSecretNumberComponent {
10216
10258
  <i class="mk-i mk-i-delete"></i>
10217
10259
  </div>
10218
10260
  </div>
10219
- `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
10261
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
10220
10262
  }
10221
10263
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
10222
10264
  type: Component,
@@ -10240,7 +10282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10240
10282
  'data-testid': 'monkey-pass-secret-number',
10241
10283
  '[attr.id]': 'id',
10242
10284
  '[id]': 'id'
10243
- }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
10285
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
10244
10286
  }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
10245
10287
  type: Input
10246
10288
  }] } });